오늘 작업 내용
- 프로젝트 세팅
- 모바일 UI 디자인
내가 디자인한 UI 를 팀원들에게 보여주었는데, 반응이 좋았다. 나름 뿌듯했다.
디자인하면서 뭐가 더 좋을지 모르는 부분은 팀원들의 의사를 반영하여 결정했다.
오늘은 배포를 하기 위한 사전작업 - typescript, react, nest.js, redux 등의 파일 세팅 - 을 하였다.
나는 웹 UI 디자인을 바탕으로 모바일 UI 디자인을 하였다.
모바일 뷰를 어떻게 만들지 감이 잘 안와서 멜론, 왓챠, 쿠팡 등의 사이트를 참고했다.
모바일 앱과도 비교를 해 봤는데 모바일 웹뷰와 모바일 앱뷰는 차이가 있어서 그냥 웹뷰를 위주로 참고했다.
특히 모바일 웹뷰는 하단 메뉴바가 없는 사이트가 많아서 나도 하단 메뉴바는 만들지 않았다.
디자인을 하다 보니 폰트 사이즈를 어떻게 써야 할지 감이 잘 안왔다.
검색을 해 보니...
모바일 앱 타이포그래피 디자인 가이드 [네이버 블로그]
모바일 뷰에서의 본문 폰트 사이즈는 16 ~ 18 pt 가 알맞다고 한다. 이는 애플, 구글 등 여러 회사가 제안하는 법칙이다.
그래서 본문은 16px, 제목은 20px 정도로 맞추었다.
Web Content Accessibility Guidelines (WCAG) 라는 것도 있었다. w3c 가 웹 표준을 제시하는 문서다.
게임과 프론트엔드에 관심이 많습니다.