main-project 8~10일차 (22.09.14 ~ 16. 기획서 작성)

✅ 오늘 한 일

UserFlow 작성

• 화면 구성, API 설계 시 사이트의 동작 과정을 알기 쉽게 하기 위해 작성했다.
• miro를 사용하여 작성

Figma 화면 디자인 (PC/Mobile)

• 와이어프레임을 토대로 PC화면과 반응형(모바일) 화면을 구성했다. (팀원 전체)
• 반응형 디자인을 할 떄 많은 생각을 했다. 사이즈가 786px이 모바일인 줄 알았지만 사실 태블릿 사이즈였다.
  1920 → 786 → 428순으로 웹, 태블릿, 모바일의 크기다. 428이 모바일중 가장 큰 사이즈이다.

React 반응형 테스트

• 반응형을 미디어쿼리에 하나씩 필요한 곳에서 작성을 할지 아니면 컴포넌트를 변경을 해줄 지 많은 고민을 했고, 디자인 틀이 다르게 변화되는 것이 있어서 컴포넌트를 교체하는 형식을 사용하기로 했다.
• 사용된 라이브러리: React-responsive
  • 반응형 미디어 쿼리를 편하게 해주며 크기에 따라 출력되는 컴포넌트를 정할수 있는 라이브러리이다.

🥲 어려웠던 일

• UserFlow 작성 시 비회원, 회원, 관리자가 접속할 수 있는 페이지와 기능을 구별하여 작성하는 것이 어려웠다.
• 디자인을 할 때, 반응형을 고려하여 디자인하는 것이 처음이라 실수를 했다.
• 처음 사용하는 React-responsive 라이브러리에 적응하는데 어려움을 겪었지만 몇번 시도해보니 충분히 사용할 수 있었고 팀원들에게도 알려줄 수 있었다.

📌 해야할 일

• 디자인된 화면을 실제 코드를 작성하여 화면에 출력해야한다.