［TIL] 폰트 레퍼런스 리서치, 나만의 과제 (카카오페이지 UI 제작) #3

폰트 레퍼런스 리서치

 

 

1. 폰트 수집

  구글 폰트(일본어 4종), 눈누(한국어 5종), 카카오(1종) 수집 / 무료폰트이면서 많이 사용되는 폰트로 수집

  (도트고딕, 노토산스, 노토세리프, 램파트원 / SB어그로, 경기천년제목, 산돌 삼립 호빵체 김정철스크립트, 동글, 카카오)

 

 

2. 카테고리별 분류

분류	주요 특징	한글 폰트	일본 폰트	어울리는 용도
고딕체 (Gothic / Sans-serif)	획의 굵기가 일정하고 장식이 거의 없음. 깔끔하고 현대적인 인상.	카카오체, 경기 천년체, SB어그로체	Noto Sans JP	UI, 웹디자인, 브랜드 로고, 프레젠테이션
명조체 (Myeongjo / Serif)	획의 굵기 대비가 크고 끝에 세리프 장식이 있음. 전통적이고 안정된 느낌.		Noto Serif JP	출판물, 에디토리얼, 긴 본문 텍스트, 포스터
손글씨체 (Handwriting / Script)	손으로 쓴 듯한 자연스러운 곡선. 날카로운 끝선처리 혹은 둥글고 따뜻한 느낌.	김정철 스크립트체,		포스터, 감성 브랜딩, 캘리그래피, 인용구
디스플레이체 (Display / Decorative)	장식적이고 개성 강한 폰트. 큰 사이즈에서 시각적 임팩트 강조.	산돌 삼립 호빵체, 동글체	도트고딕JP, Rampart One	로고, 제목, 포스터, 광고 캠페인

 

 

3. 비교 및 분석

 

  1) SB어그로체 / 눈누

인상 - 글씨 전반에 적용된 직선이 곧고, 공간을 크게크게 사용해서 딱딱하지만 시원한 느낌이 든다. 가독성이 굉장히 좋다. 글씨의 굵기가 굵어 프레젠테이션에 알맞을 것 같다.

 

 

 

  2) 경기천년체 / 눈누

인상 - 기본적으로 고딕체인 것 같지만 명조체의 특징도 조금 섞여있다. 고딕체임에도 둥근 느낌이 섞여있어 부드러운 인상을 준다. 가독성이 좋다. 부드러운 느낌의 포스터의 제목 같은 곳에 잘 어울릴 것 같다.

 

 

 

  3) 카카오체 / 카카오

인상 - 직선적인 이미지가 강하고, 딱딱한 이미지를 가지고 있다. 강한 메시지를 전달하기 좋아보인다. 가독성이 굉장히 좋다.

 

 

 

  4) 김정철 스크립트체 / 눈누

인상 - 전반적으로 곡선이 많이 쓰여서 부드러운 인상이나 글씨의 끝처리가 날카로운 인상도 같이 준다. 자신의 메시지를 감정을 담아 전달하기 좋아보인다. 가독성은 나쁘지않으나 고딕체에 비하면 아쉬운 부분이 있다.

 

 

 

  5) 산돌삼립호빵체 / 눈누

인상 - 고딕과 명조의 사이, 고딕의 느낌이 조금 더 강하다. 전반적으로 글씨체 자체가 둥글어서 부드러운 이미지를 준다. 글자를 둥글게 표현한 것이 공간을 고딕체보다 적게 사용하게 만들고 여백를 늘려줘서 답답한 느낌이  없어진 것 같다.

 

 

 

  6) 동글체 / 눈누

인상 - 받침의 유무에 따라 밑선의 위치가 달라진다. 기본적으로 둥글어서 부드러운 이미지를 준다. 글씨체 자체가 엄청 작아서 다른 글씨체들과의 크기 통일성이 너무 떨어진다. 어간은 너무 넓어서 여백이 과하게 많다. 밑선의 위치가 일정하지 않아서 행간 사이가 너무 넓어보이고 그로인해 가독성이 굉장히 떨어진다.

 

 

 

  7) Noto Sans JP / 구글 폰트

인상 - 경직되어있다. 깔끔하다. 가독성이 굉장히 좋다. 정보를 전달하는 포스터에서 많이 봤던 폰트다.

 

 

 

  8) Noto Serif JP / 구글 폰트

인상 - 부드러우면서 날카롭다. 가독성은 산스체에비해 약간 떨어진다. 일본 화장품, 카드광고 포스터에서 많이 봤던 기억이 있다. 사람 얼굴이 클로우즈업되는 광고에서 많이 쓰인다.

 

 

 

  9) Rampart One / 구글 폰트

인상 - 글씨의 음영을 주어 그림자를 표현했다. 글자가 입체적으로 보인다. 강조하는 느낌이 든다. 가독성은 큰글씨가 아니면 굉장히 떨어진다. 포스터에서 큰 글씨로 제목을 강조할 때 많이 쓰이는 글씨체다.

 

 

 

  10) DotGothic16 / 구글 폰트

인상 - 도트의 감성을 잘 살렸다. 특징이 확실한 폰트임에도 가독성이 굉장히 좋은편이다. 도트 게임 같은 곳에 잘 어울릴 것 같고 실제로 많이 사용되는 것으로 알고 있다.

 

 

4. 심층분석

 

  1) 각 폰트의 구조가 주는 시각적 인상 - 부드럽고, 메시지를 전달하기 좋은 서체이다. 기본적으로 서체가 고딕체보다 둥글기 때문에 자간이나 어간에 여유도 생기고 글자가 쓰이는 공간 자체도 적게 들어가서 네거티브 스페이스가 넓다. 그래서 답답함이 적고 가독성이 좋다.

 

  2) 같은 문장을 다른 폰트로 썼을 때, 메시지의 톤의 변화 - 지금 예시로 되어있는 ‘당신이 포기할 때, 나는 시작한다.’라는 문장만 보더라도 SB어그로체는 외치는 느낌을, 경기천년체는 다짐하는 느낌을, 카카오체는 정보를 전달하는 느낌을 받았다.

 

  3) 내가 선호하는 폰트들의 공통점 - 가독성이 좋고, 너무 각지지 않고 부드러운 느낌의 글자들을 선호하는 것 같다. 문장을 인식하기 전 글자의 생김새들만 눈에 인식되었을때 딱딱하다는 이미지를 가진 글자는 선호하지 않는 것 같다.

 

  4) 이 폰트를 사용한다면 어떤 메시지를 강화하거나 약화할 수 있을까 - 무언가 속으로 다짐하면서 외치는 듯한 메시지를 전달할 때 강점이 있을 것 같다. 반대로 날카로운 단어들이나 남을 공격하는 문장에는 어울리지 않는 것 같다.

 

  5)가독성과 개성 사이의 균형 - 한글의 가독성은 직선에서 나온다고 생각한다. 직선이 많이 사용될수록 개성은 떨어지지만 가독성이 올라가고 곡선이 많이 사용될수록 개성은 올라가지만 가독성은 떨어진다. 그래서 적당히 가독성이 떨어지지 않는 수준의 곡선들을 넣어 개성을 챙기는 것이 좋다고 생각한다. 다만 국문 서체의 윗선과 아랫선을 지키지 않고 위아래로 심하게 요동치는 글씨체는 직선 곡선에 상관없이 가독성이 심하게 떨어질 수 밖에 없다고 생각해서 정보를 전달하는 줄글의 형태로는 사용하지 않는 것이 좋다고 생각한다.

 

 

 이번 폰트 레퍼런트 리서치 및 분석을 진행하면서 각 폰트마다 특징들이 존재하고 그 특징들에 의해 단어나 글의 느낌이 확실히 바뀐다는 것을 알게되었습니다. 폰트라는 것이 디자인에서 빼놓을 수 없는 부분이니만큼 각 폰트들을 잘 분석하고 수집해서 적재적소에 활용할 수 있는 능력을 길러야한다는 것을 깨닫게 되었습니다.

 

 

 

 

나만의 과제 (카카오페이지 UI 제작) #3

 

 

1. Home 화면에 필요한 컴포넌트 추가 제작

  1) 아이콘 5종

 카카오페이지의 하단 바에 들어가는 아이콘과 비슷한 아이콘이 플러그인에 없어 직접 제작하였습니다. 전반적으로 도형을 기반으로 Subtrack기능을 이용하여 제작하였습니다. 예외적으로 4번 아이콘은 패스를 이용하여 장식부분을 제작하였습니다.

 

  2) 하단 앱 바

 하단 앱 바는 직접 제작한 아이콘들을 바탕으로 아이콘 - 오토레이아웃 - 컴포넌트화 - 배리언츠 On/Off - Text 프로퍼티 - 인스턴트 스왑 - 복사 후 5종류 제작 순서로 제작하였습니다.

 그 후 5종류의 아이콘을 각각 복사하여 오토레이아웃과 컴포넌트를 적용시켜 완성하였습니다.

 

  3) 이용약관 텍스트

 이용약관 텍스트는 이용약관, 고객센터, 사업자 정보 텍스트를 오토레이아웃으로 묶은 뒤 밑의 KaKao텍스트와 다시 오토레이아웃을 적용시켜 제작하였습니다.

 

  4) 배너 + 텍스트

 배너+텍스트 컴포넌트는 기존에 제작해두었던 배너와 Text 2가지를 오토레이아웃으로 묶어 컴포넌트로 제작하였습니다.

 

 

2. Home화면 제작

 

 기존에 제작해두었던 컴포넌트들을 이용해 실제 카카오페이지 홈 화면과 동일하게 구성해보았습니다. 추가로 간단한 프로토타입을 적용하여 실제 앱에서 스크롤하는 방식과 똑같이 재현해보았습니다.

 

 

구현화면

카카오페이지 홈 화면.mp4

5.63MB

 

 

3. 문제 해결

홈화면 프로토타입 적용 중 Horizontal이 적용이 되지 않는 문제가 발생했습니다. 

파란선으로 둘러쌓인 두 부분이 호리젠탈 적용부분이나 제대로 적용되지않고 오류가 뜨는 모습

 

 

 

Horizontal 적용을 하기위해 해당 프레임들을 지웠다가 다시 제작해서 넣어보기도 하고 위치를 옮겨보기도 했지만 해결이 되지않아서 굉장히 난처하던 중에 프레임들을 감싸고 있는 컨테이너의 프레임을 줄여보라는 조언을 듣고 실행해보았습니다.

 

컨테이너의 프레임을 줄이니 Horizontal이 활성화되고 프리뷰에서도 정상작동하는 모습을 확인할 수 있었습니다.