[Project] 프론트엔드 사이드 프로젝트를 기획하는 방법

지금까지 숱한 팀프로젝트를 해오면서, 특히 최근 백엔드와 협업하는 프로젝트를 진행하며 배운 기획 과정을 기록하고자 한다.
팀프로젝트는 팀장과 팀원들이 함께 얘기하며 어찌저찌 굴러간다 쳐도, 프로젝트를 혼자 시작할 땐 할건 많은데 뭐부터 해야할지, 이거 하다보면 저거도 보이고, 저거 하다보면 또 다른 해야 할 일들이 계속 보여서 이도 저도 안되는 우왕좌왕 시간을 많이 보내게 되더라.
이제는 프로젝트 시작 시 본 글을 보며 우왕좌왕하는 기획 단계를 최대한 줄여보고자 글을 작성한다.

1. 아이디어 브레인스토밍

• 공공 데이터 api 사이트 참고하며 아이디어 얻기
• 나의 최근 관심사를 전부다 생각해보기
• 내가 해결하고 싶은 사회문제가 있는지 생각해보기
• 내가 가장 자주 쓰는 사이트 적어보기
• 평소에 해보고 싶었던 도전 기능들 생각해보기

2. 주제 선정 및 구체화

• 나온 아이디어 중 가장 하고 싶은 주제 선정
• 해당 주제로 어떤 기능을 제공하는 웹서비스를 만들고 싶은지 전부 적어보기
  (이 과정에서 다양한 레퍼런스 사이트들을 참고하면 도움이 많이 된다.)
• 서비스 제공 타겟 선정
  (타겟이 명확해지면 서비스의 컨셉과 방향도 명확해진다.)
• 어떤 기능이 들어가면 좋을지 생각하기

3. 페이지 구상

• 메인페이지부터 시작해서 어떤 페이지들이 필요한 지 작성

  • 피그마에서 프레임을 짜기 시작하는 단계!
  • 메인페이지에서 헤더 메뉴바를 구성하기 시작하면 다른 페이지 구성들의 가닥이 잡히기 시작한다.

• 필요한 페이지들을 프레임만 만들어놓고, 우선 텍스트로 해당 페이지에서 필요한 화면 구성을 정리

• 간단한 도형 및 텍스트로 페이지별 레이아웃 잡아놓기

4. 디자인

• 다양한 레퍼런스 사이트들을 참고하여 메인페이지를 시작으로 각 페이지 디자인 진행
  • 사이트의 포인트 컬러를 정하면 좋다! (ex. 당근마켓의 주황색 등)
  • 메인 컬러(배경색), 서브 컬러(텍스트), 메인 포인트 컬러, 서브 포인트 컬러를 정해놓고 디자인을 하면 좀 더 수월해진다.
• Desktop first, Mobile first 정하기
  • Desktop first인 경우 대체로 1440px * 1024px 화면 구성을 먼저 시작한다.
    (너비 1440px일 때 내부 컨텐츠의 너비는 1200px 정도가 적당하다.)
  • Mobile first인 경우 본인은 아이폰 미니 정도를 기준으로 생각하여 375px으로 잡고 진행하지만, 모바일의 경우는 너비 기준에 대한 생각이 다양한 듯 하다.