[PlusX Share X Fastcampus] UI 구조의 이해

구조

웹과 앱은 단순하게 이뤄어지지 않다. 다양한 요소들이 모여 만들어진다. UI 제작시 고려해야 할 특성은 조직성과 일관성이라고 설명해주 고있다. 일관성은 이해하였지만 조직성이라는 말이 잘 이해가 되진 않았다. 하지만 강의를 다 들은 후에는 어떤 것을 의미하는지 알게되었다. 웹과 모바일의 공통적인 모습을 보면 인간의 모습과 비슷하다고 느낀다. 헤더, 컨텐츠, 푸더로 구성이 되어있는게 크게 머리, 몸, 발로 되는 것과 비슷한 것 같다. 그리고 영역의 명칭이 디자인과 개발의 차이가 있다는 것도 알게되었다. 이렇게 간단하게 명칭을 이해하고 있으면 개발자와 소통시 도움이 될 것 이라고 예상한다. 

 

헤더

UX 설계나 서비스 성격에 따라 헤더의 모습이 달라지는 사례를 살펴볼 수 있었다. 네비게이션만의 기능만 하거나 네비게이션과 헤더를 구분하여 나타내는 사례를 살펴보았다. 뭐가 정답이 아니라 서비스 성격에 따라 들어갈 수 있는 기능은 달라진다. 모바일은 화면이 작기 때문에 헤더의 영역을 축약해서 보여줘야 한다고 설명하고 있다. 그래서 일반적으로 우리가 많이 보는 햄버거 버튼으로 축약 된 헤더의 모습을 살펴볼 수 있었다. 헤더는 하는 역할이 많다. 브랜드와 서비스를 대표하는 로고가 들어가기도 하고 기업 소개, 다양한 서비스 등 많은 것을 내재하고 있다. 그리고 헤더의 영역 노출을 고려해야 하는 부분도 배우게 되었다. 서핑 도중 스크롤시 헤더가 고정될 것인지 사라지게 할 것인지를 고민해야 한다고 한다. 각각의 장, 단점은 있겠지만 고정되어있는 경우 빠르게 다른 페이지 이동이 가능하지만 작은 모바일 환경에서는 컨텐츠 영역을 볼 수 있는 영역이 줄어들 것이다. 

 

푸터

사실 푸터를 엄청 신경쓰는 편은 아니였다. 하지만 헤더와 컨텐츠 영역에서 찾을 수 없는 정보를 푸터에 담아 웹 서핑을 용이하게 할 수 있도록 해야한다는 것을 느낀다. 강의에서도 헤더를 더 중요하게 되는 경우가 많은데 푸터 또한 들어가는 내용에 신경 써야한다고 말하고 있다.

 

---

 

수강인증