타입브랜딩
하이마트스러운
하이마트와 개발한 「하이로운」은 ‘하이마트스러운’ 것이 무언인가에 대한 물음에서 출발했어요. 이는 한 가지 관점에서 규정할 수 없는 물음이었는데요. 하이마트의 오랜 히스토리 속에서, 앞으로 어떻게 나아갈지에 대한 미래의 방향성을 함께 고민해야만 하기 때문입니다.
하이마트는 오랜 시간 사랑받은 가전 전문 쇼핑몰이라는 뚜렷한 특성이 있었어요. 그 때문에 전문적이고 신뢰감을 줄 수 있는 인상의 폰트가 필요했죠. 그리고 밝고 톡톡 튀는 젊은 사용자들을 새로운 타깃으로 설정하고자 하는 목표도 있었습니다. 이를 배경으로 ‘전문적이면서 위트 있고, 캐주얼한 인상’의 폰트가 필요하다고 정의할 수 있었는데요. 산돌과 하이마트는 상반되는 두 개념을 하나의 폰트에 담기 위해, 가볍고도 무거운 그리고 짧고도 긴 논의를 시작했습니다.
느낌 꺼내기
첫 미팅에서는 ‘전문적이면서도 위트 있고 캐주얼한', ‘하이마트스러운 인상’을 폰트에 어떻게 담아낼 수 있을지를 고민했어요. 이 과정을 통해 각자가 생각하는 개념들이 시각화된다면 어떤 형태로 표현할 수 있을지 구체적인 레퍼런스들을 공유하는 시간이었습니다. 상상 속에만 존재하던 ‘이런 느낌’과 ‘저른 느낌’을 서로가 공유하며 맞춰가는 작업이었어요.
그 결과 도출된 키워드는 ‘지오메트릭한', ‘리드미컬한', ‘경쾌한’, ‘유니크한'으로 정리할 수 있었어요. 이 네 가지 키워드들이 ‘하이마트스러운 인상’을 폰트로 보여줄 수 있는 키워드라고 정의한 것입니다. 이때 해당하는 키워드를 어느 정도로 표현할 것인지를 설정하는 것도 중요한 부분 중 하나인데요. 예를 들어 유니크한 캐릭터를 표현할 때, 그 캐릭터를 얼마나 눈에 띄게 만들지도 중요하기 때문입니다. 하이마트가 추구하는 전문적 이미지를 고려했을 때, 너무 과하게 느껴지는 방향은 지양해야 했어요. 물론 이와 동시에 「하이로운」만의 유니크한 특징은 필요했죠. 타입브랜딩에서는 폰트에 어떤 키워드를 담을 것인지, 또 이를 어느 정도를 표현할 것인지를 설정하는 것이 어렵고도 중요한 지점입니다. 모든 선택이 양극단에 있는 각의 목적에 부합할 수 있도록 적합한 중간 지점을 발견해야 했어요.
테스트, 테스트, 테스트
각자가 생각에만 존재하던 느낌을 시각 자료로 꺼내어 정리한 후, 본격적으로 ‘하이마트스러운’ 캐릭터에 대한 탐구를 시작했했어요. 프로토타입 단계에서 「하이로운」이 가진 특징을 정립했는데, 크게 두 가지로 나눌 수 있었는데요.
첫 번째, ‘리드미컬하고 지오메트릭한’ 키워드를 글줄의 높이 변화로 풀어내는 것을 고민했어요. 한글은 네모 틀 안에 여러 가지 자소가 조합되어 구성되는데요. 네모 틀에 꽉 차는 형태일수록 글줄의 외곽 변화가 줄어들며 반듯하고 정렬된 인상을 줄 수 있어요.
왼쪽부터 Sandoll 격동고딕 2, HG꼬딕씨, Sandoll 고딕Neo1
반대로 네모 틀을 채우지 않으면, 글줄의 외곽 변화가 커지며 들쑥날쑥해서 움직이는 듯한 인상을 줄 수 있어요. 이 변화가 극심해지면 탈 네모꼴 형태로도 발전되기도 해요.
왼쪽부터 Sandoll 고딕Neo2, Sandoll 고딕Neo3, Sandoll 로마
「하이로운」은 리드미컬한 특징을 드러낼 수 있도록 네모 틀에 덜 차게 조정했어요. 글자의 높낮이에 차이를 주어, 글줄 하단 외곽 라인에서 리듬감을 느낄 수 있도록 했죠. 그러면서도 지오메트릭한 형태를 기반으로 설계했는데요. 'ㅇ', 'ㅎ’과 같은 자소의 둥근 줄기에서 최대한 정원의 형태를 유지하도록 지오메트릭한 인상을 가지고 있습니다.
지오메트릭한 형태와 글줄 모양 설계
두 번째, ‘경쾌하고 유니크한’ 키워드를 특징적인 자소의 형태로 풀어내는 것을 고민했어요. 주로 논의되었던 특징은 크게 세 가지로, ①'ㅎ', 'ㅊ’의 꼭지, ②자소 접합부 표현, ③자소 생략 표현이 있었는데요.
①'ㅎ', ‘ㅊ'의 꼭지
‘ㅎ'과 'ㅊ’의 꼭지는 글자의 외곽에 위치해 있어요. 차지하는 면적이 넓거나 획이 길지 않아 유니크한 인상을 더 할 때 쉽게 변형을 시도할 수 있는 부분이에요. 한 쪽으로 기울어진 형태는 획의 시작점과 끝점을 연상할 수 있고, 속도감을 녹여낼 수 있는 장점도 있는데요. 「하이로운」에 경쾌한 인상을 더하기 위해, 다양한 각도와 표현법을 테스트하며 적당한 지점을 찾고자 했어요.
'ㅎ' 꼭지 형태 테스트 버전
'ㅎ' 꼭지 형태 최종 버전
②자소 접합 표현
한글은 여러 자소가 하나의 글자가 되는 모아쓰기 방식을 사용하는데요. 그 때문에 다양한 형태의 자소가 붙고 떨어지는 과정을 거칩니다. 이때 여러 가지 경우의 수가 발생됩니다. 「하이로운」에서는 이 지점에 집중해 유니크한 캐릭터를 만들고자 했어요. 글자의 판독에 영향이 없이, 획을 붙여 보다 간결하게 표현할 수 있을지가 관건이었어요. 물론 채택된 표현보다 드롭된 표현이 훨씬 많았어요. 매우 작은 크기로 존재하는 한 개의 획의 차이로, 멍멍이가 댕댕이가 될 수도 있기 때문입니다.
‘머, 대, 터’에서 접합 테스트 ('머' 채택, '대, 터' 드롭)
‘을, 활’ 접합 테스트 ('Concept A' 드롭, ‘Concept B’ 채택)
③자소 생략 표현
이어서 획을 삭제하여 생략하는 표현이 가능할지 역시 다양한 테스트를 거쳤어요. 자소 생략 표현은 앞선 접합 표현보다, 드롭된 안에 훨씬 많았는데요. 한글에 있어서는 더하는 것보다 빼는 것이 더 크리티컬하게 다가왔기 때문이었습니다.
짧은기둥의 유무에 따른 생략 테스트 (전체 드롭)
‘쌍닿자’ 생략 테스트 (전체 채택)
바깥 쪽 다듬기
거듭된 테스트를 거쳐 ‘하이마트스러운’ 형태를 단계적으로 정립해 나갔습니다. ‘하이마트스러움’에 대한 고민을 폰트의 안쪽으로 주입하는 앞선 작업들을 통해 진행해 온 건데요. 이와 함께 폰트 파일이라는 형태로 잘 사용될 수 있도록, 바깥쪽을 다듬는 것도 주요한 지점입니다. 폰트의 사용성을 극대화하는 단계라고 설명할 수 있어요.
「하이로운」은 하이마트의 웹과 앱에서 사용하는 것을 목적으로 제작된 폰트인데요. 그 때문에 웹과 앱의 환경, 즉 디스플레이에서의 사용성을 고려해야 했어요. 폰트가 사용되는 환경에 따라, 기본적인 디자인부터 파일의 포맷, 구성까지 달라질 수 있어요. 바깥을 다듬는다는 것 역시 안쪽을 다듬는 것만큼 수차례 확인하는 과정이 필요합니다.
하이마트 측에서 공유해준 서비스 적용 범위 예시
폰트의 적용 범위에 실제로 얹혀보며 수정하는 과정을 거쳤어요. 아래는 특히 중요했던 숫자의 최종 버전 이미지입니다. 하이마트의 웹과 앱 환경에서는 특히 가격이나 할인율 표기하는 숫자의 중요도가 높았어요. 가격은 보통 작은 크기로 보이기 때문에 사용자가 쉽고 빠르게 읽어낼 수 있는 기능적인 부분이 뒷받침되어야 했죠. 따라서 특징적인 표현은 최대한 덜어내고, 작은 크기에서도 명료하게 인지되도록 형태와 공간을 다듬었습니다.
또한 UI 환경에서 자주 쓰이는 화살표 기호(↑↓←→), 숫자와 자주 쓰이는 퍼센트 기호(%), 가격을 표기할 때 단위를 구분하는 콤마(,) 등의 문장부호도 함께 다듬었습니다. 문장부호는 숫자뿐만 아니라 한글이나 라틴과도 함께 쓰일 수 있도록, 포괄적인 사용성을 고려하여 수정해 나갔어요.
숫자와 문장부호 최종 버전
하이마트와 「하이로운」
「하이로운」은 하이마트가 담고자 하는 ‘하이마트스러움’에 집중하여 제작된 폰트입니다. 명확한 목적과 사용 환경을 토대로 진행된 프로젝트였던 만큼 만족스러운 결과물을 완성할 수 있었어요. 하이마트에서 실제 사용하고 계시는 사례를 덧붙이며 아티클을 마무리하려고 합니다. 「하이로운」이 하이마트의 서비스에 딱 맞는 목소리로 사용자들에게 읽혀 길 바랍니다.
하이마트 웹 적용 화면
하이마트 앱 적용 화면
|
| 이수현 |
| 타입디자인팀 팀장 |
글자를 그립니다. 산돌에서는 여러 사람들과
함께 고민하며 그려요. |
타입브랜딩
하이마트스러운
하이마트와 개발한 「하이로운」은 ‘하이마트스러운’ 것이 무언인가에 대한 물음에서 출발했어요. 이는 한 가지 관점에서 규정할 수 없는 물음이었는데요. 하이마트의 오랜 히스토리 속에서, 앞으로 어떻게 나아갈지에 대한 미래의 방향성을 함께 고민해야만 하기 때문입니다.
하이마트는 오랜 시간 사랑받은 가전 전문 쇼핑몰이라는 뚜렷한 특성이 있었어요. 그 때문에 전문적이고 신뢰감을 줄 수 있는 인상의 폰트가 필요했죠. 그리고 밝고 톡톡 튀는 젊은 사용자들을 새로운 타깃으로 설정하고자 하는 목표도 있었습니다. 이를 배경으로 ‘전문적이면서 위트 있고, 캐주얼한 인상’의 폰트가 필요하다고 정의할 수 있었는데요. 산돌과 하이마트는 상반되는 두 개념을 하나의 폰트에 담기 위해, 가볍고도 무거운 그리고 짧고도 긴 논의를 시작했습니다.
느낌 꺼내기
첫 미팅에서는 ‘전문적이면서도 위트 있고 캐주얼한', ‘하이마트스러운 인상’을 폰트에 어떻게 담아낼 수 있을지를 고민했어요. 이 과정을 통해 각자가 생각하는 개념들이 시각화된다면 어떤 형태로 표현할 수 있을지 구체적인 레퍼런스들을 공유하는 시간이었습니다. 상상 속에만 존재하던 ‘이런 느낌’과 ‘저른 느낌’을 서로가 공유하며 맞춰가는 작업이었어요.
그 결과 도출된 키워드는 ‘지오메트릭한', ‘리드미컬한', ‘경쾌한’, ‘유니크한'으로 정리할 수 있었어요. 이 네 가지 키워드들이 ‘하이마트스러운 인상’을 폰트로 보여줄 수 있는 키워드라고 정의한 것입니다. 이때 해당하는 키워드를 어느 정도로 표현할 것인지를 설정하는 것도 중요한 부분 중 하나인데요. 예를 들어 유니크한 캐릭터를 표현할 때, 그 캐릭터를 얼마나 눈에 띄게 만들지도 중요하기 때문입니다. 하이마트가 추구하는 전문적 이미지를 고려했을 때, 너무 과하게 느껴지는 방향은 지양해야 했어요. 물론 이와 동시에 「하이로운」만의 유니크한 특징은 필요했죠. 타입브랜딩에서는 폰트에 어떤 키워드를 담을 것인지, 또 이를 어느 정도를 표현할 것인지를 설정하는 것이 어렵고도 중요한 지점입니다. 모든 선택이 양극단에 있는 각의 목적에 부합할 수 있도록 적합한 중간 지점을 발견해야 했어요.
테스트, 테스트, 테스트
각자가 생각에만 존재하던 느낌을 시각 자료로 꺼내어 정리한 후, 본격적으로 ‘하이마트스러운’ 캐릭터에 대한 탐구를 시작했했어요. 프로토타입 단계에서 「하이로운」이 가진 특징을 정립했는데, 크게 두 가지로 나눌 수 있었는데요.
첫 번째, ‘리드미컬하고 지오메트릭한’ 키워드를 글줄의 높이 변화로 풀어내는 것을 고민했어요. 한글은 네모 틀 안에 여러 가지 자소가 조합되어 구성되는데요. 네모 틀에 꽉 차는 형태일수록 글줄의 외곽 변화가 줄어들며 반듯하고 정렬된 인상을 줄 수 있어요.
반대로 네모 틀을 채우지 않으면, 글줄의 외곽 변화가 커지며 들쑥날쑥해서 움직이는 듯한 인상을 줄 수 있어요. 이 변화가 극심해지면 탈 네모꼴 형태로도 발전되기도 해요.
「하이로운」은 리드미컬한 특징을 드러낼 수 있도록 네모 틀에 덜 차게 조정했어요. 글자의 높낮이에 차이를 주어, 글줄 하단 외곽 라인에서 리듬감을 느낄 수 있도록 했죠. 그러면서도 지오메트릭한 형태를 기반으로 설계했는데요. 'ㅇ', 'ㅎ’과 같은 자소의 둥근 줄기에서 최대한 정원의 형태를 유지하도록 지오메트릭한 인상을 가지고 있습니다.
두 번째, ‘경쾌하고 유니크한’ 키워드를 특징적인 자소의 형태로 풀어내는 것을 고민했어요. 주로 논의되었던 특징은 크게 세 가지로, ①'ㅎ', 'ㅊ’의 꼭지, ②자소 접합부 표현, ③자소 생략 표현이 있었는데요.
①'ㅎ', ‘ㅊ'의 꼭지
‘ㅎ'과 'ㅊ’의 꼭지는 글자의 외곽에 위치해 있어요. 차지하는 면적이 넓거나 획이 길지 않아 유니크한 인상을 더 할 때 쉽게 변형을 시도할 수 있는 부분이에요. 한 쪽으로 기울어진 형태는 획의 시작점과 끝점을 연상할 수 있고, 속도감을 녹여낼 수 있는 장점도 있는데요. 「하이로운」에 경쾌한 인상을 더하기 위해, 다양한 각도와 표현법을 테스트하며 적당한 지점을 찾고자 했어요.
②자소 접합 표현
한글은 여러 자소가 하나의 글자가 되는 모아쓰기 방식을 사용하는데요. 그 때문에 다양한 형태의 자소가 붙고 떨어지는 과정을 거칩니다. 이때 여러 가지 경우의 수가 발생됩니다. 「하이로운」에서는 이 지점에 집중해 유니크한 캐릭터를 만들고자 했어요. 글자의 판독에 영향이 없이, 획을 붙여 보다 간결하게 표현할 수 있을지가 관건이었어요. 물론 채택된 표현보다 드롭된 표현이 훨씬 많았어요. 매우 작은 크기로 존재하는 한 개의 획의 차이로, 멍멍이가 댕댕이가 될 수도 있기 때문입니다.
③자소 생략 표현
이어서 획을 삭제하여 생략하는 표현이 가능할지 역시 다양한 테스트를 거쳤어요. 자소 생략 표현은 앞선 접합 표현보다, 드롭된 안에 훨씬 많았는데요. 한글에 있어서는 더하는 것보다 빼는 것이 더 크리티컬하게 다가왔기 때문이었습니다.
바깥 쪽 다듬기
거듭된 테스트를 거쳐 ‘하이마트스러운’ 형태를 단계적으로 정립해 나갔습니다. ‘하이마트스러움’에 대한 고민을 폰트의 안쪽으로 주입하는 앞선 작업들을 통해 진행해 온 건데요. 이와 함께 폰트 파일이라는 형태로 잘 사용될 수 있도록, 바깥쪽을 다듬는 것도 주요한 지점입니다. 폰트의 사용성을 극대화하는 단계라고 설명할 수 있어요.
「하이로운」은 하이마트의 웹과 앱에서 사용하는 것을 목적으로 제작된 폰트인데요. 그 때문에 웹과 앱의 환경, 즉 디스플레이에서의 사용성을 고려해야 했어요. 폰트가 사용되는 환경에 따라, 기본적인 디자인부터 파일의 포맷, 구성까지 달라질 수 있어요. 바깥을 다듬는다는 것 역시 안쪽을 다듬는 것만큼 수차례 확인하는 과정이 필요합니다.
폰트의 적용 범위에 실제로 얹혀보며 수정하는 과정을 거쳤어요. 아래는 특히 중요했던 숫자의 최종 버전 이미지입니다. 하이마트의 웹과 앱 환경에서는 특히 가격이나 할인율 표기하는 숫자의 중요도가 높았어요. 가격은 보통 작은 크기로 보이기 때문에 사용자가 쉽고 빠르게 읽어낼 수 있는 기능적인 부분이 뒷받침되어야 했죠. 따라서 특징적인 표현은 최대한 덜어내고, 작은 크기에서도 명료하게 인지되도록 형태와 공간을 다듬었습니다.
또한 UI 환경에서 자주 쓰이는 화살표 기호(↑↓←→), 숫자와 자주 쓰이는 퍼센트 기호(%), 가격을 표기할 때 단위를 구분하는 콤마(,) 등의 문장부호도 함께 다듬었습니다. 문장부호는 숫자뿐만 아니라 한글이나 라틴과도 함께 쓰일 수 있도록, 포괄적인 사용성을 고려하여 수정해 나갔어요.
하이마트와 「하이로운」
「하이로운」은 하이마트가 담고자 하는 ‘하이마트스러움’에 집중하여 제작된 폰트입니다. 명확한 목적과 사용 환경을 토대로 진행된 프로젝트였던 만큼 만족스러운 결과물을 완성할 수 있었어요. 하이마트에서 실제 사용하고 계시는 사례를 덧붙이며 아티클을 마무리하려고 합니다. 「하이로운」이 하이마트의 서비스에 딱 맞는 목소리로 사용자들에게 읽혀 길 바랍니다.
함께 고민하며 그려요.