[UXUI] 부트캠프 5일차 - 이름 붙이는 데에도 기술이 필요해

 

UXUI 디자이너에 관해 알면 알수록 단순히 화면을 예쁘게 설계하는 일과는 거리가 있음을 알게 된다. 한 때는 디자이너라하면 <악마는 프라다를 입는다> 에 나오는 패션 에디터들 같은 이미지를 떠올렸는데, 요즘 떠올리는 이미지는 '설계자' 에 가깝다. UXUI 디자인을 엔지니어링으로 부르기도 한다고 하니, 더욱 그런 느낌이 든다.

 

해외 대학원도 함께 알아보고 있는데, Information Architecture 라는 이름의 과목이 개설되어있는 학과도 있더라. 건축계를 동경해온 나로서는 더욱 흥미가 생길 수 밖에 없는 것이다. 그리고 동시에 아예 다뤄보지 않은 분야로 한 발자국씩 나아가고 있다는 게 확 실감났다. 

 

오늘은 컴포넌트와 배리언트를 학습했다. 그럼 오늘자 강의 본격 회고 레스고.

 

UXUI 디자이너는 회사의 디자인 시스템을 구축한다.
회사에 입사하면 제일 먼저 무얼 하게 될 것 같냐는 선생님의 질문. 막연하게 프로토타입 화면을 만들게 되지 않을까 생각했다. 아니면 기존에 운영하던 서비스의 UX리서치에 보조로 투입되거나. 리뉴얼해야하는 화면에서 개선점을 찾아보라는 업무를 지시받을 것 같았다. 선생님은 우리가 회사에 들어가게 되면 제일 먼저 회사에서 UI 전역을 어떻게 관리하고 있는지 보아야 한다고 했다. 물론 주니어 때는 툴 만지는 업무들이 주를 이룰 것이고, 연차가 쌓여 시니어 디자이너로 향할수록 디자인 시스템을 관리하는 일을 맡게 될 것이라 했다. 

 

One Source Multi Use

콘텐츠 IP 수업을 들을 때 귀에 딱지가 앉도록 들었던 표현을 여기서도 듣게 될 줄 몰랐다. 쉽게 풀어 말하자면, 하나의 요소를 잘 만들어두면 이후에 비슷하게 생긴 다른 요소를 만드는 데도 유용하게 쓰일 거라는 말이다. 어제 배운 내용에서도 강조했듯이, UXUI 디자이너는 반복되는 작업을 최대한 줄여야 한다. 그러기 위해서는 '컴포넌트(Component)와 배리언트(Varient)' 를 이용해서 데이터 혹은 밸류만 다른, 같은 속성의 요소를 여러개 복제할 수 있도록 기반을 마련해두어야 한다. 

 

컴포넌트는 모듈화가 가능하다.

요소를 컴포넌트로 만들면 레고 블록을 쌓는 것처럼 인터페이스를 채울 수 있다는 의미이다. 레고 블럭을 자세히 들여다보면, 일반적으로 크기가 같은 사각형과 원형으로 이루어져 있는 것을 알 수 있다. 여기서 크기와 색상 등을 바꾸어서 엄청나게 다양한 모형들을 만들 수 있다. 컴포넌트도 마찬가지다. 예를 들어, 버튼을 만든다고 가정해보자. 확인 / 취소 버튼을 만들고 싶다면, 제일 먼저 둥근 사각형의 버튼 하나에 텍스트를 삽입한 기본 형태 (프라이머리-디폴드) 버튼을 만든다. 버튼을 하나 더 복제한 뒤, 하나는 흰 배경에 '확인' 텍스트를 입력하고 다른 하나에는 회색 배경에 '취소' 텍스트를 입력한다.

 

이 작업을 수행할 때, 확인 버튼을 컴포넌트 및 배리언트로 지정한다면, 2번째 배리언트의 배경색과 텍스트를 수정해서 취소 버튼을 빠르게 만들 수 있게 된다. 이때, 확인 버튼과 취소 버튼은 동일한 속성을 가지는 요소이나 '상태' 가 다른 것으로 인식된다. 만약 흰색 바탕의 '더보기' 버튼을 추가한다면, 확인 버튼과 더보기 버튼은 상태가 동일하나, 서로 다른 '데이터' 를 가진 요소로 인식된다. 상태가 다른 것과 데이터가 다른 것을 명확하게 구분해야 한다.

 

이름을 잘 지어주는 것이 중요하다.

디자인 시스템을 잡는 데에는 여러 사람이 관여할 수 있다. 따라서 요소를 부를 때 작업자들이 모두 이해할 수 있는 통일된 이름을 붙여주어야 한다. 이번에 처음 알게 되었는데, 이름 붙이는 방식에도 여러가지가 있더라. camelCase, snake_case, PascalCase -> 이렇게 세 가지를 배웠다. 굳이 따지자면 나는 스네이크 케이스로 이름을 붙이곤 했는데, 선생님은 파스칼 케이스를 주로 사용하신다고 한다. 이름 붙이는 데에도 각자 다른 방식을 사용하니, 회사에 들어간다면 내부에서 어떤 양식을 사용하는지 살펴봐야겠다. 

 

오늘의 클로닝

 

여전히 클로닝 속도가 매우 .. 느리다. 나는 어딜가나 항상 느려서 문제구나 ! 아무튼 느리다고 손 놓고 있을 수만은 없으니 매일 클로닝해야겠다고 다짐했다. 오늘 실습시간에 했던 클로닝은 우리의 교과서 'Kream' 의 앱 메인 화면이었다. 디테일은 아직 부족하지만 이정도면 느낌은 꽤 살렸다고 생각한다. 그리고 이제서야 패딩 & 갭 값 주는 거에 조금 익숙해져서, 오늘은 탭과 탭 간의 간격을 원본과 최대한 유사하게 줘 보려고 노력했다.

 

오늘의 피드백

아이템 컴포넌트에서 이미지 변경하는 방법 - 변경할 이미지의 프로퍼티 패널에서 Fill 값 박스를 클릭해서 복사한다. 붙여넣을 컴포넌트에서 command 를 누르면 변경할 이미지 위치가 바로 셀렉된다. 그런 다음 프로퍼티 패널의 Fill 값에 복사해온 이미지를 붙여넣는다. 마무리로 이전에 삽입되어 있던 이미지를 삭제해주면 깔끔하게 변경 완료!

 

내가 자꾸 프로퍼티 패널이 아니라 원본 이미지를 복사해다가 컴포넌트에 넣으려고 했는데 당연히 변경이 안 됐다. 이것 때문에 선생님을 내 피그마로 모셔왔는데 이전 시간에 배웠던 내용이었어서 머쓱했다 ... 그리고 자꾸 원본 이미지 복사해서 선생님이 내가 정말 이해한 건지 미심쩍어 하셨다. 그래서 선생님 앞에서 3번이나 반복했다 ...

 

10월 28일 화요일 수업 일지

오늘따라 회고 쓰기가 귀찮아서 이정도 쓰는 데에만 두 시간 가까이 걸렸다. 다음엔 꼭 자정 전까지 작성해서 업로드하는 게 목표다. 그리고 클로닝하는 시간도 줄이고 싶다. 크림 메인페이지 클로닝하는데에도 두시간 넘게 걸렸다 ... 물론 이미지 복사하기 때문에 혼자 애먹느라 시간을 다 잡아먹어서 그런 것이지만. 나는 여전히 질문하기가 두려운가보다. 전에 다니던 회사에서부터 알게 된 사실인데, 나는 무언가를 하다가 어려움을 맞이해도 나 혼자 해결하려는 습성이 있다는 걸 파악했다. 그래서 사수분들께 '혼자 깊게 생각하느라 업무 처리가 늦어진다' 는 피드백을 받기도 했다. 다음 회사에 들어가기 전까지 이 부분을 꼭 개선하려고 한다. 당장의 부트캠프에서는 다른 수강생 분들처럼 더 대담하게 질문하기 ! 를 나와의 약속으로 정해야겠다.