[UXUI 내일배움캠프] TIL #17

 

💭 2024. 3. 13 오늘의 일기

 

 

오늘 한 일

- 3강 숙제 

- 피그마 활용(2) 강의 후기 작성

- 디자인 아티클 스터디

- 개인 과제 피드백 바탕으로 수정

- 디자인 책 읽기

 

 

 

드디어 피그마 활용 강의를 다 듣고 마무리했다.

후기 글은 따로 작성했다.

https://nannannan.tistory.com/13

[스파르타코딩클럽] Figma 활용법 (2) 강의 후기

 

 

---

디자인 아티클 스터디

 

 

https://blog.toss.im/article/beginning-of-tps

토스 프로덕트 산스 제작기: 금융 맥락과 디지털 환경을 고려한 서체 - 금융이 알고 싶을 때, 토

오늘의 주제는 토스에서 사용되는 폰트, 프로덕트 산스에 관한 아티클이다.

 

 

1. 아티클 첫 인상과 후기

 

- 토스에서 사용하는 서체는 많은 폰트 패밀리와 다양한 언어를 지원해 따로 서체 고민을 하지 않도록 만들어져 있을 것 같다.

→ 라이트, 레귤러, 미듐, 세미볼드, 볼드, 엑스트라 볼드, 헤비 총 7개의 폰트 패밀리와 한국어, 영어, 베트남어까지 지원하며 각종 특수 문자까지 일관된 가이드라인(가변폭과 고정폭)에 맞춰 제작해 지원한다.

 

- 토스에서 초창기부터 한 서체만 사용했을지, 만약 아니라면 언제 개발하여 쓰기 시작했는지에 대한 이야기가 나올 것 같다.

→ 2020년 여름, 산돌과 함께 토스 프로덕트 산스의 첫 번째 버전을 개발했고 두 번째 개발부터는 이도타입과 개발했다.

 

- 왜 시스템 폰트말고 다른 서체를 사용하게 되었을까?

→ 모든 환경에서 사용되는 단 하나의 서체이기 때문에, 디자인 툴에 적용해보면 앱에 적용됐을 때 나타날 모든 환경에서의 오류를 미리 확인해 볼 수 있다.

→ 처음에는 ios와 안드로이드, 맥과 윈도우, 토스팀 내부와 외부 등 환경에 따라 다 다른 시스템 폰트를 사용하였는데 환경마다 다른 서체를 사용하니 비효율적인 상황이 발생했다.

 

- 서체를 제작하면서 가장 초점을 맞춘 부분은 어디일까?

→ 균형 : 알맞은 크기와 간격을 찾음, 숫자만 썼을 때, 국문만 썼을 때, 영문만 썼을 때에도 서로 균형을 이룰 수 있는 지점을 찾음

→ 맥락 : 숫자와 기호까지 재해석, 금융 앱인 토스 특성 상 자주 쓰이는 퍼센트 쉼표 더하기 등과 같은 기호의 가독성을 높이고 조금 더 아이콘에 가깝게 보일 수 있도록 함

→ 형태 : 글자 대신 글이, 형태 대신 내용이 보일 수 있도록 과도하게 특징적인 부분은 절제하고, 획이 중첩되는 부분은 밖으로 파내 사람들의 가독성을 높임

 

- 서체가 UX와 어떤 관련이 있을까?

→ 환경마다 폰트의 수직 위치 값이 달라 사용자의 가독성을 해치는 것을 막기 위해 최적화된 버티컬 매트릭스를 개발하여 사용자의 피로를 줄이고 편의성을 증가시킴

 

 

2. 강의 내용 복습

- 애자일 : 일정한 주기로 빠르게 제품을 배포해 사용자의 피드백을 받고 요구사항을 수정해 나가는 과정을 반복하는 제품 방법론. 수평적으로 일하면서 불필요한 의사결정을 줄이고 즉각적인 계획과 실행으로 피드백을 빠르게 반영한다. 1~4주의 스프린트 단위로 제품을 개발, 테스트하고 피드백을 받아 개선해 나간다. 반대 의미로 폭포수 방식이 존재한다.

 

 

 

3. 새로 알게 된 내용

- 폰트 매트릭스 : 개발에서 사용되는 단어로, 현재 설정된 폰트의 정보를 가지고 있는 클래스를 뜻한다. 하나의 글자에 매우 많은 정보가 있기 때문에 안드로이드, ios와 같은 다양한 환경에서 각각 다른 서체를 사용할 경우에는 개발자가 각각의 서체 구현도를 맞추기 위해 많은 시간을 들여야 한다.

 

 

 

4. 아티클 내용과 유사한 실제 사례

https://seed.line.me/index_kr.html

LINE Seed

 

- 라인씨드체

• 지오매트릭 기반의 서체로 라인의 편리한 사용성과 친근한 아이덴티티에서 영감을 받아 제작된 서체.
• 시각 중심을 중앙과 가깝게 설정해 안정적인 글줄 운용이 가능하고, 라인의 다양한 서비스를 아이콘으로 표현하여 글의 시각적 재미를 더했다.
• 특정 국가에서 사용하는 라인의 특징에 따라 한글, 영어, 일본어, 태국어 총 4개의 언어로 제작됐다.
  
  
  
  

팀원분들이 공유해주신 시각보정 아티클
https://brunch.co.kr/@thinkaboutlove/227

시각적으로 균형있는 디자인하는 방법(시각 보정 팁)

https://www.remain.co.kr/page/designsystem/grid-structure.php

리메인커리어 | 리메인

---

 

 

오늘은 오랜만에 점심시간에 헬스장에 나가서 30분정도 근력 운동을 했다.

피티쌤도 뵙고 하루종일 앉아있다고 말씀드리니 하루 한시간정도는 운동을 꾸준히 해야한다고 하시더라..

슬슬 허리가 아프기도 하구 이제 운동을 열심히 해야겠구만