개인과제 : 반복되는 UI 요소를 활용한 체계적인 화면 설계

본캠프 3주차...! 마침내 첫번째 개인 과제가 끝났다. 약 5일(+주말)간 UI랑 씨름을 했는데 마감하니 한숨 놓인다. 이번 과제는 [화면 캡처 - 반복되는 UI 요소 찾기 - 아이템, 모듈, 섹션 구분하기 - 스타일 분석하기 - 컴포넌트 만들기 - 조합해서 클론디자인하기] 과정으로 진행되었는데, 생각보다 쉬운 파트도 있었고 어려운 파트도 있었다. 반복되는 UI요소 찾기나 스타일 분석은 쉽다고 생각했는데 생각보다 시간이 걸리는 작업이었고, 컴포넌트 만들기나 클론디자인하기는 의외로 수월하게 끝낼 수 있었다.

 

반복되는 UI 요소 찾기, 화면별로 1, 2, 3 숫자를 매겨 분류했다.

주제는 구인구직 어플인 원티드였는데, 텍스트 스타일도 다양하게 쓰이고 신경 쓸 부분이 많아서 시간이 상당히 많이 걸렸다. 무작정 모양만 따라하는 게 아니라, 앱이 어떤 구조로 구성되어 있고 어떤 게 반복되는지(컴포넌트인지) 신경쓰며 봐야했다. 평소에 눈으로 쓱 훑으며 이 정도면 만들기 쉽겠다 생각했었는데, 뜯어보니 새삼 여러가지 요소가 쓰이고 있어서 풀어가는 과정이 만만치 않았다. 먼저 아이템, 모듈, 섹션을 구분하고 그 안에서도 카드, 리스트 등 반복되는 형태를 찾았다.

 

UI 분석하기 파트가 특히 어려웠는데, 백지 위에 타이포그래피와 컬러, 여백과 곡률 등등을 채워넣는 내용이었다. As-is 파트에서는 화면만 보고 내 나름대로의 분석을 하고, To-be 파트에서는 원티드의 디자인 라이브러리를 확인하며 부족한 부분을 채워넣었다. 실제 디자인 라이브러리는 이것보다 훨씬 상세하고 까다롭지만 캡처한 홈, 목록, 상세 화면을 구성하는 데에는 이 정도로 충분하지 않을까 하며 조금씩 디자인 고도화를 시켜보았다. 위에서도 적었지만 가장 어려운 건 타이포그래피였는데, 자간이나 행간도 미묘하게 다른 부분이 많아서 화면과 일일이 비교하며 신경을 정말 많이 썼다. 다양한 컨텐츠로 구성된 만큼 각각의 여백도 각기 다른 너비를 가지고 있어서 최대한 화면과 비슷하게 구성하려고 계속 수치를 쟀다.

 

튜터님께 다녀와서 들은 이야기들

 

(좌) 스타일화, 컴포넌트화하는 모습 / (우) 컴포넌트에 프로퍼티를 적용한 모습

이전 클론에서는 모양 카피에 신경을 썼다면, 중간에 ㅅ 튜터님을 만나뵙고 난 후로는 조금 더 '구조'에 집중을 했다. 실제로 개발될 수 있는지, 얼마나 재사용할 수 있을지 생각하면서 컴포넌트화시키는 게 중요하다고 하셨기 때문이다. 실무 환경에서는 스타일과 컴포넌트를 활용해 더 빠르고 효율적으로 화면을 배치할 수 있는 능력이 필요하다고 하셨기에 '재사용'에 특히 초점을 맞추고 각 스타일 적용, 요소 컴포넌트화를 시켰다. 왜 이런 작업을 하는지 학습목표에 대해 그다지 깊은 생각을 하지 않았는데, 이렇게 레고를 떼었다 붙이듯 분리하고 조립하는 과정이 디자인에 꼭 필요한 과정이라는 것을 명확하게 알게 된 계기였던 것 같다. (+애매하게 알고 있던 '반응형' 레이아웃에 대한 이해도 최대한 해보려고 애썼지만 전체 화면이 반응하게 만드는 데에는 부족했던 것 같아 아쉽다)

 

'원티드' 앱 클론 디자인

중반부에 바짝 속도를 내서 컴포넌트 제작 작업을 마치고 나니 그 다음은 일사천리였다. 각 요소들을 화면에 알맞게 배치하고 보기 좋게 섹션을 나눠주는 데에 집중하면서 스퍼트를 올렸다. 이미지까지 채워넣으니 제법 그럴싸한 화면이 완성되었다. 

덕분에 예정보다 시간이 남아 튜터님께 찾아뵈었더니, 어렵게 생각하는 도메인을 찾아 클로닝 해보는 것도 좋겠다고 하셔서 '타다'의 앱 디자인도 클로닝해보았다. 타다는 원티드와 다르게 시원시원한 구성과 큼직한 인터페이스라 몇 시간 안에 금방 해치웠다. 다른 사람이 만든 아주 다른 스타일의 어플 두개를 분석해보니 시각적 특색과 장단이 보여 즐거웠다. ㄷ 튜터님은 UI를 보는 안목과 빠른 작업 속도가 나의 강점이라고 말씀하시면서, 이제는 UX에 조금 더 집중해보면 좋겠다고 하셨다. 더불어 다른 수강생들을 도우며 커뮤니케이션 스킬을 늘려보려고 조언하셔서 필요한 것이 무엇인지 조금 더 확실하게 알게 되었다.

'타다' 앱 클론 디자인

타다 클로닝을 할 때에는 각 아이콘들도 피그마로 직접 그려보았다. 그동안 남이 만들어놓은 아이콘 소스를 가져다쓰거나 일러스트레이터에서 만들어서 가져왔었는데, 피그마에서 .5 단위까지 만져가며 아이콘을 묘사하는 것도 꽤나 즐거운 일이었다. (ㅁ 튜터님의 조언: 혜택(선물) 아이콘 같은 경우, 세로로 길어보이니 시각보정이 필요하다. 이런 부분도 체크해놓았다가 업데이트하면 좋을 것 같다) 

슬슬 컴포넌트와 프로퍼티에 대한 이해도 마친 것 같고, 오토레이아웃에도 완전히 익숙해진 것 같다. 내가 봐도 썩 그럴싸하니 만족스럽다. 결과물보다 과정이 빛나는 공부였다. 머리를 싸매고 고민했던 요며칠의 나에게 박수를 치며 글을 줄인다.