런픽 | EP01. 와이어 프레임 제작
런픽(RUN PICK)은 이번 프로젝트 웹앱의 가제이다. 이 프로젝트를 시작하게 된 계기는 이전 글을 참고하면 될 것 같다.
여하튼 이번 프로젝트의 경우 개발뿐만 아니라 기획 단계도 포함되어 있기 때문에 웹서비스를 출시한다는 느낌으로 시작하고 있다. 마치 스타트업을 창업할 때와 비슷한 기분이다.
하지만 분명한 점은 어찌 됐든 이 프로젝트는 개발이 메인이고, 사업화를 진행할 것은 아니기 때문에 실제 창업할 때의 프로세스보다는 많이 간략화 했다.
그래서 실제 이 서비스를 어떤 고객에게 어떠한 가치를 제공할지, 그에 맞는 가설을 세우고 검증하는 등의 단계들은 과감하게 스킵했다.
대신 혼자서 어느 브레인 스토밍 정도만 진행했었다.
브레인 스토밍
우선 프로젝트를 시작했을 때 브레인 스토밍을 진행했었다. 러닝화 분석 웹이라는 주제에 대해 떠오르는 생각들을 가감 없이 그저 생각나는대로 그대로 적어봤었다. 두서 없는 브레인 스토밍 메모를 보고 싶으면 아래 더보기 클릭
- 어떤 정보들 다뤘으면 좋겠어?
- 메이저 브랜드 러닝화들에 대한 정보
- 나이키/아디다스/호카/아식스/뉴발란스/리복/미즈노 …
- 러닝화 데이터들 어떻게 끌어올거야? 크롤링, 웹스크래핑?
- 러너에 대한 정보
- 러너의 발사이즈, 실착 사이즈, 발볼 크기(정사이즈, 칼발..) 등
- 러닝화 리뷰
- 안정성
- 발목 안정성
- 물집, 발가락, 발등, 아킬레스건, 무릎, 관절 등 부상에 대한 이슈
- 쿠셔닝
- 퍼포먼스
- 안정성
- 추천
- 러너: 입문자/초보자/중급자/전문가 …
- 등급은 어떤 기준으로 나눌거야?
- 용도: 장거리/단거리/대회용/연습용/인터벌
- 러너: 입문자/초보자/중급자/전문가 …
- 메이저 브랜드 러닝화들에 대한 정보
- 회원들의 등급은 어떻게 인증?
- 프로젝트 기획은 어떻게 진행할거야?
- 먼저 피그마로 간단한 기획 시작
- 기획에 맞게 DB 엔티티 및 erd 설계
- 아키텍처 설계
- backend: nestJS + postgreSQL + prisma
- frontend: nuxt3
- 인프라는 추후 차근 차근
- SEO, sitemap 등 웹 기술들도 고려
- 보안 취약점 고려
- 모든 코딩을 단계적으로 실시! 처음부터 완벽한 아키텍처 절!대! 바라지마
- 회원들은 어떻게 끌어들이고, 어떻게 유지시킬거야?
- 러너의 관여도를 높이려면?
- 러너의 등급을 어떻게 부여? 카페처럼 방문, 게시글, 댓글 등의 방식? 아니면 달리기 기록?
- 나이키앱 등의 데이터를 연동시킬 수는 없나?
이 생각들을 다이어그램으로 다시 한 번 정리해봤다.
와이어 프레임 제작
위의 생각들을 토대로 바로 와이어 프레임을 만들기 시작했다. 사실 혼자서 하다 보니 너무 빡빡하고 디테일하게 준비하는 것이 귀찮다..
여하튼, 이 웹사이트의 홈페이지는 우선순위에 밀려서 우선은 작성을 안 했고, 러닝화 리스트 페이지를 먼저 제작했다.
그 이후 러닝화 디테일 페이지 제작
러닝화 리뷰 작성 페이지
이외에도 마이페이지와 로그인/회원가입 등의 페이지도 간략하게 작성해서 전체 와이어프레임은 다음과 같다.
이제 다음으로 와이어 프레임에 기반해서 개발 요구사항 명세들을 작성하려고 했는데, 또 귀찮다... erd를 작성하면서 요구사항들을 동시에 정리해도 될 것 같다는 생각이 들었다. erd는 다음 글에서!