210729(목) - 모바일 레이아웃 구현

1. 모바일 레이아웃 구현

---

1. 모바일 레이아웃 구현

백엔드 API를 기다리면서, 페어와 모바일 레이아웃을 구현했다. 우리 팀은 웹 UI를 먼저 짜는 것으로 시작했는데, 다른 팀들을 보니 모바일 UI를 먼저 타깃으로 시작하는 팀이 꽤 있었다. 이유를 들어보니, 모바일 웹 화면을 먼저 구성하면 이후에 웹 UI를 구성할 때 편해서 그랬다고 한다. 웹에서 모바일로 전환이나 모바일에서 웹으로 전환 모두 경험해보지 못해서 어떤 방식으로 시작하는 게 더 편한지는 모르겠으나, 우리 프로젝트에서 모바일로 전환하는 작업은 크게 어렵지 않았다. 주로 스타일 컴포넌트에 '@media'를 추가해서 화면 크기 별로 조정할 수 있게 했다. 모바일 레이아웃 작업을 하면서 약간의 노력이 필요했던 부분은 왼쪽의 사이드바의 모바일 전환이었다. 모바일 화면에서 사이드바를 햄버거 메뉴 안에 넣어서 누르면 나오는 방식을 선택했는데, 기존의 사이드바에 여러 조건들을 추가하니 생각보다 코드가 길어지고 더러워져서 결국 새로운 컴포넌트를 만들었다. 웹 타깃으로 시작하면서 이후 모바일로 전환하기 쉽게 컴포넌트를 구현하자고 페어와 이야기했지만, 원하는 대로 되지는 않았다. 그래도 웹에서 모바일로 전환하면서 노트북, 태블릿, 스마트폰 등에서 보기 좋게 컴포넌트를 재배치하는 것은 꽤 재미있었다.