[클론 디자인 스터디] 1. Asana | 유료 플랜 구독하기 - (2) 클론 디자인 및 분석

 

레퍼런스의 UX 분석 내용 보기: https://sejeongdesign.tistory.com/3

 

[클론 디자인 스터디] 1. Asana | 유료 플랜 구독하기 - UX 분석

 

 

---

 

클론 디자인

 

 

에셋 및 컴포넌트

 

 

레퍼런스 디자인과 클론 디자인 비교

 

 

 

클론 디자인 셀프 평가

 

잘한 점

 

비주얼 에셋도 피그마로 만들어서 일러스트레이터를 같이 사용할 때보다 작업 시간을 단축했다.

• “Show pixel grid” 와 “Snap to pixel grid”를 설정해서 아이콘 제작에 맞는 작업 환경을 만들었다. “Show pixel grid”는 1px 단위의 그리드를 화면에 그려주는 기능이고, “Snap to pixel grid”는 픽셀 그리드에 오브젝트를 정렬해주는 기능이다. 이 두 기능을 잘 사용한다면 비주얼 에셋의 수치 값이 정수가 아닌 일을 최소화할 수 있을 것이다. 이 두 가지 기능은 키보드 단축키를 외워서 앞으로도 업무할 때 자주 써먹을 예정이다.
• 피그마를 쓰다가 모르는 기능이 있으면 Ctrl+/ 단축키를 누르면 필요한 기능을 직접 검색해서 쓸 수 있다는 것도 알게 되었다.

 

 

그레이 색상을 5가지 이내에서 사용해서 그레이 색상을 무엇을 사용해야 할지 고민하는 시간을 줄였다.

• 색의 단계를 설정할 때는 명도 값을 홀수 단위로 설정해서 일관성 있는 규칙을 만들었다.

 

 

서체, 폰트의 자간을 -2%로 설정한 것, 그리고 폰트 크기의 수치를 짝수로 맞춘 것이 정확하게 들어맞았다.

 

 

아쉬운 점

 

타이포그래피를 레퍼런스보다 2px 더 작게 사용했다.

• 원인: 페이지의 정보량을 고려하지 않고 영문의 평균 본문 크기(15/16px)를 그대로 적용했다.
• 해결 방안: 결제 페이지처럼 정보가 적어서 페이지의 마진이 매우 넓은 페이지에는 폰트의 크기를 평균 수치보다 2pt 더 크게 사용한다.

수정 전 (타이틀 18px, 본문 16px 사용)

수정 후 (타이틀 20px, 본문 18px 사용)

 

라디오 버튼 아이콘의 “선택된 상태”의 아이콘이 어색하다.

• 원인: 아이콘의 바깥 오브젝트와 안쪽 오브젝트의 간격 수치가 바깥 오브젝트의 윤곽선 수치와 같기 때문이다.
• 해결 방안: 바깥 오브젝트와 안쪽 오브젝트의 간격 수치는 바깥 오브젝트의 윤곽선 수치보다 작게 설정한다.

수정 전 (작은 원 12px, 큰 원과 작은 원의 간격 1)

 

수정 후 (작은 원 10px, 큰 원과 작은 원의 간격 2)

 

인풋 필드 안의 콘텐츠들의 크기가 일관되어 보이지 않는다. 이미지(신용카드사 로고)가 텍스트보다 작아 보인다.

• 원인: 이미지의 높이를 글자 몸통이 아닌 글자 면적과 똑같이 맞췄기 때문이다.
• 해결 방안: 글자 면적의 높이보다는 이미지의 높이가 조금 더 커야 두 콘텐츠의 크기가 비슷해 보이는 것 같다. 이걸 나름대로 공식화해보자면, 이미지의 높이는 글자 몸통의 높이보다 8px(위 4px, 아래 4px) 더 작은 값을 사용해본다.

 

수정 전 (글자 몸통의 높이 29(160%), 신용카드 로고 컨테이너 높이 20)

 

 

 

수정 후 (글자 몸통의 높이 32(175%), 신용카드 로고 컨테이너 높이 32(면적 24+간격 8))

 

 

웹 접근성의 개념을 잘 모르고 텍스트의 행간을 160%로 설정했다.

• 해결 방안: 일반적인 경우 행간은 웹접근성 기준에 맞춰 글자 크기*1.75를 반올림한 수치를 표준으로 사용한다.
• 웹 접근성 규정에 따르면 행간은 최소 1.5 이상으로 설정해야 한다.
• 행간과 관련해서 참고할 만한 내용: https://www.remain.co.kr/page/designsystem/line-height.php