1. 발단
삼엽충에서 앱등이로
- 삼성 갤럭시 S 출시로부터 약 13년 간 삼성만 사용해온 나는 높은 하드웨어성능, 다양한 서드파티, 충실한 A/S와 기본기능 등 삼성 갤럭시에 대한 아주 큰 만족도를 바탕으로 삼성에 충성충성하는 삼엽충이었다.
- 하지만 GOS를 시작으로 처음으로 배신감이 들기 시작했다.
- 게다가 4개월 정도 사용하던 폴드3의 디스플레이 코팅이슈 A/S가 유상처리되는 상황을 겪으며 배신감이 극에 달해 마음이 바뀌었다.
- 생에 처음으로 아이폰을 사용해야겠다고 생각했고, 그렇게 14 proMax를 통해 애플 생태계에 입문했다.
- 한달 정도 지났을 때, 내 책상에는 맥북이, 내 손에는 애플워치가, 귀에는 에어팟이 꽃혀있었고, 마우스 대신 트랙패드를 쥐면서 개발하는 지경이 되었다. (물론 Flutter의 ios빌드는 맥북만 가능하므로 어차피 필요하긴 했다.)
- 그 와중에 갤럭시S23 역대급 성능의AP SnapDragon8 Gen2 탑재의 소식을 듣고는 뭔가 섵불리 결정했던 후회가 밀려왔다.
- 그렇게 후회를 하고 나니, 사용자들에게 스마트폰 뿐만 아니라 생태계의 제품들을 직접 비교해서 장단점을 한 눈에 볼 수 있는 서비스를 만들면 좋겠다고 생각했다. 가격까지 한번에 볼 수 있다면 아주 좋겠다.
- 그래서 만드는 과정을 기획에서부터 개발, 발행까지 원스톱진행의 전체과정을 포스팅한다.
2. 기획
벤치마킹
- 원래 나는 CPU/GPU 성능을 비교하면서 전자제품 구경하는 것을 좋아한다. 뭐 오버클럭하고 벤차마크점수/클럭수치같은 숫자로 헥헥대는 변태까지는 아니다.
- CPU/GP 비교 사이트들을 둘러보며 UI를 벤치마킹 해왔고, 개선할 UI나 킬러기능이 무엇인지를 생각했다.
- 그렇게 여러가지 제반 개발기획들이 떠올랐다.
- 한국인이 어떤 사람들인가. 내로남불의 전투민족이 아닌가.
- 내가 쓰는 건 좋고 남이 쓰는 건 구리다는 생각을 가진 아주 현명한 사람들이 아닌가.
- 그렇게 비교와 경쟁, 사용자의 참여를 통해 쌓여가는 데이터와 함께, 쉽게 파악이 가능한 easy한 UX를 가진 서비스를 통해 사용자가 현명한 선택을 하고 소비할 수 있도록 도와줄 수 있다면 좋은 서비스가 아닐까. 생각하게 되었다.
UI /UX 요구사항
- 깔끔하고 빠를 것
- 읽기 좋으며, 접근성을 고려할 것
- 한 눈에 제품의 핵심스펙이 보일 것
- 한 눈에 제품의 핵심평가가 보일 것
- 사용자의 참여를 통해 별점/댓글과 같은 기능들이 공존하여 강조될 것
- UI와 페이지디자인으로 인해 제품의 디자인이나 분위기가 헤쳐져서는 안될 것
- 제품의 장단점을 객관적으로 평가하여 시각적 컬러로 표현될 것
- 한글지원을 시작으로, 이후 영어 지원도 고려할 것
기능개발 요구사항(1차, 대략적)
- 좌우를 분할, 사용자가 현재 선택한 제품의 스펙을 data 기반의 table을 렌더링하여 spec과 그것에 대한 평가를 확인할 수 있도록 바인딩한다.
- 댓글과 좋아요/싫어요 기능을 구현하여 사용자의 의견을 적극 수렴한다.
- 사용자가 참여하는 기능에는 로그인이 필요하도록하고, 회원가입/로그인 기능을 구현한다.
- OAuth는 추가예정이며, 사용자의 이메일을 기반으로 한 회원관리시스템을 구현한다.
- SPA기반의 웹앱 구축한다.
- 1페이지 : 6가지의 생태계 제품을 비교할 수 있는 페이지 (좌측 애플, 우측 삼성)/(폰,탭,PC,노트북,워치,이어버드)
- 2페이지 : 각각의 제품 1가지를 상세하게 비교하는 페이지
- 3페이지 : 애플제품끼리 상세 비교하는 페이지, 앱등이들을 위한 페이지
- 4페이지 : 삼성제품끼리 상세 비교하는 페이지, 삼엽충들을 위한 페이지
- 후원페이지 : 개발자가 꽁짜로 서버 유지하는게 아니다. 우리도 아마존꺼 돈 주고 산다.
기술스택 (웹만 할거임)
- Communication Tool : 잔디
- Design : Figma
- Version Management : Git - GitHub
- Frontend : React/PWA
- Backend :
- WS : NGINX
- WAS : Node(Express)
- DB : MongoDB(Mongoose)
- Hosting : AWS EC2 / S3(IMG server)
3. 진행
- 총 인원 3명 참여.
- 피그마를 통해 디자인/기획을 동시에 진행.
- 회의를 통해 디자인/기획 확정 후 베이스코드 세팅(풀스택)
- 기반 자료조사 및 DB구축
- MERN 소스세팅하여 GitHub으로 공유.
- 페이지별 아키텍쳐 개발
- 기능별 개발 / 소규모이므로 GitBranch 전략 없음
- 개발하면서 blog 포스팅한다. 이슈 처리나 WBS, 커뮤니케이션은 잔디를 활용한다.
오늘은 여기까지!
댓글