1. 토스 홈탭 클론디자인
텍스트 배리에이션
사이즈: 18/16/14/12/10
굵기: 정확한 폰트를 사용할 순 없었으나 pretendard로 작업 시 레귤러 포함한 얇은 굵기는 사용하지 않은 것 같다. (Bold/SemiBold/Medium)
행간: 정확한 수치를 알 수는 없으나 150%, 135%로 사용 시 문제 없었음.
색상: 홈탭 내의 텍스트에만 적용된 색상. 
여백/간격
마진: 좌우로 16
패딩: 2/4/12/16/20/24 를 주로 사용. 2px은 4px 사용 시 넓어보이거나 어긋나있는 부분들을 채우는 목적으로 사용했는데, 의미가 있는지 잘 모르겠다. 특히 4px일 때는 맞아떨어지지 않았던 간격이 6px일 때 맞아떨어지는 부분들이 꽤 있었는데 이 부분에 대해선 4px일 때와 6px로 했을 때를 비교해보면서 이유를 고민해보는 것도 방법이라는 튜터님의 조언을 받았다.
그리고 하나 더, 아이콘과 텍스트가 하나씩 있는 버튼에 좌우 패딩을 같게 하면 맞아떨어지지 않는 현상이 있었다. 버튼을 만들 때 좌측에 위치한 아이콘에 무게감이 실리기 때문에 좌측에는 여백을 덜 주고, 우측에는 여백을 더 주는 방법이 맞는 걸까?
시각 보정을 위해 좌측과 우측의 패딩값을 다르게 적용하는 것에 대해 더 알아봐야 할 것 같다.
아이콘
불과 며칠 전까지 피그마에서 도형을 잇고 오리고 붙이고 하는 것들이 정말 어렵게 느껴졌는데, 오늘 갑자기 원래도 익숙했던 것처럼 손쉽게 아이콘 여러 개를 만들 수 있었다. 이상한 일이다. 어렵고 귀찮기만 했던 아이콘 만들기가 오늘은 재밌었다. 물론 클론디자인에서만 유효한 감정일 것이다.
궁금했던 점과 튜터님의 답변
클론디자인을 하다보면 예를 들어 리스트가 담긴 카드 UI를 똑같이 만들기 위해 내부의 리스트마다 여백을 줘서 컨텐츠 간의 간격이나 겉을 둘러싸는 박스의 크기를 늘리는지, 혹은 리스트에는 여백을 적게 주고 리스트 간의 간격을 늘리거나 겉을 둘러싸는 박스에 여백을 많이 주는 건지 같은 것들이 고민이었다. 게다가 그 수치는 어떻게 부여를 할 것인가와 함께.
튜터님은 알 수 없고 사람마다 달라 정답이 없지만, 내가 그걸 고민해가는 과정에서 하다보면 나한테 맞는 방법이 생길 거라고 말해주셨다. 추가로 개발 시 어떻게 구조화 하는 것이 더 도움이 될 지를 함께 고민해보는 게 좋다고 하셨다.
디바이더로 예를 들면 카드 내부에 리스트들을 구분할 때 리스트마다 아래에 디바이더를 함께 묶어 컴포넌트화 시켜 사용하는 것도 방법 중 하나인데, 리스트가 늘어감에 따라 리스트/구분선/리스트/구분선 으로 추가되는 것보다 리스트+구분선 이 추가되다가 맨 아래 것에만 구분선을 안 보이게 해주면 더 효율적일 수 있다는 것이다. 마찬가지로 정답은 없다 하셨지만 더 효율적인 작업 방식을 생각하는 것이 중요하겠다고 한 번 더 느꼈다.
클론디자인의 의미
완전무결하게 똑같이 클론디자인을 하는 것도 좋지만 그게 목표가 되어선 안 된다. 그걸 똑같이 해보는 과정에서 얘넨 왜 이렇게 했을까를 고민하고 내 것으로 만드는 시간이 되어야 한다. 나만의 답을 찾았다면 내 디자인에서 적용해보기도 하고, 내 생각에 더 나은 답이 있다면 비교해보기도 하는 시간이 되어야 한다. 이렇듯 기존 서비스를 클론디자인 하거나 핀터레스트 등에서 레퍼런스들을 검색해서 본닫면 주로 참고해야 할 그래픽 역량에는 배경색, 라인 색상과 굵기, 그림자 여부, R값 수치, 그리고 카드 등 컴포넌트들의 여백, 컴포넌트 간의 간격, 안에 구성된 요소들의 컬럼 수 등을 함께 고려하면 공부에 도움이 많이 될 것이다.
2. 모니모 클론디자인
토스 홈탭 화면을 끝낸 후에 모니모 홈탭 화면(+스플래시/온보딩)까지 클론디자인 해봤는데, 두 서비스의 구성 요소들을 아직 비교해보진 못 했지만 비교해가면서 공부도 해봐야겠다.
3. 2차 과제 제출
심화과제까지 수행한 과제를 제출했다. 크게 달라진 것도 없고 추가로 수행할 과제만 완성해서 제출했는데, 튜터님에게 찾아가서 진행한 질답 시간이 조금 더 빨랐다면 좋았을 거라는 아쉬움이 들었다. 2차 피드백을 받고 나면 오늘의 조언들을 참고해서 커머스 앱으로서 더 보완할 부분들을 수정해보면 좋을 것 같다.
마무리
오늘 정말 오랜만에 딱 붙어 앉아 스스로 열심히 했다 느끼는 날이다.
튜터님에게 찾아간 김에 1차 때 제출한 과제에 대해 좀 더 생각을 여쭈었는데, 오토레이아웃으로 구성한 구조라던지 상황에 맞게 적용하는 점이라던지 어느 정도의 비주얼 적인 측면까지도 고려하면 피그마 역량이 상위권에 속한다는 기분 좋은 평가를 받을 수 있었다. 앞서 주셨던 서면 피드백에서 클론디자인으로 그래픽 역량을 쌓아보면 좋겠다는 조언을 들었었는데, 클론디자인을 하는 의미라던가 클론디자인을 하면서 어떤 걸 얻어야 할지 전보다 훨씬 명확해진 것 같아 그것도 기분 좋았다.
타 디자인 분야보다 UXUI는 어느정도 정답이 있는 분야인 것 같다는 말씀을 하셨다.
터치 시의 최소 영역, 폰트 최소 크기 등을 등등 사용성을 고려한 디자인을 하기 위해선 지켜야 할 것들이 있기 때문인데, 그런 이론적이고 인간 공학적인 측면, 심리학적인 측면 등 두루 공부하다보면 정말 좋은 프로덕트 디자이너가 될 것 같다.
