우리 회사도 브랜딩을 해보자!!! 라는 생각이 등장하고 나면 우리 회사의 대부분의 것들이 꼬져 보입니다. 이 브랜딩이란 게 참으로 단어도 멋지고 막 요즘 사방팔방 브랜딩난리이니, 안하면 뒤쳐진 것 같은 느낌과 동시에 브랜딩을 한다는 것이 막 새 집 이사가는 것 같은 설레임을 주기도 합니다. 뭔가 대단한 것을 하고 있는 듯한 기분도 들고, 이번에 확실하게 브랜딩을 해놓으면 막 우리회사가 여기저기 회자되며 사람들 입에 오르내리고 카페에서도 막 '너 그거 써봤어?' 라는 얘기가 오고가는 상상을 합니다. 브랜딩만 하면 우리 회사 졸라 짱이 되는거야!! 가즈아!!!!브랜딩 가즈아아아!! 하지만 현실은 좀 다릅니다. 브랜딩을 한다고 해서 뭐가 갑자기 바뀌는 것도 아니고, 대단히 엄청난 충격이 쎄게 오는 것도 아닙니다. 단시간내에 우르르 인기를 끈다고 해서 그게 지속되리란 법도 없고, 오히려 급격한 이미지구축은 '쟤 왜 저래?' 라는 갸웃거림을 자아내기도 합니다. 일단 설레이는 마음은 좀 내려놓고 브랜딩을 시작하기에 앞서 생각을 먼저 정리해보도록 하겠습니다. 그리고 생각을 정리한 자료를 가지고, 디자이너를 만나보는 것이지요. (또는 내부디자이너에게 요청하거나). 광대하고 우주적인 개념들을 크앙크앙거리며 열변을 토한다고 상대방이 쉽게 이해할 순 없습니다. 일단 미팅을 하고 내 생각을 잘 전달해서 최적의 결과물을 만들려면, 말하는 쪽에서 최대한 깔끔한 언어를 구사해주어야 합니다.준비할 내용이 있습니다.1. A4용지 여러 장2. 연필과 지우개3. 충언을 서슴치않는 직원 1명(팩트폭력역할)4. 지당하신 말씀이시옵니다 직원 1명(멘탈지킴이)5. 자료뭉치(외부레퍼런스와 내부사업자료 모두)6. 마음(멘탈 꽉 잡으시고)각 준비물들의 쓰임새는 아래의 미팅준비단계에서 차근차근 설명하겠습니다. 일단 준비가 완료되면 본격적인 생각정리 스텝을 밟아보도록 하죠.1단계 : 내부정리1. 브랜딩은 일을 벌리는 것이 아닙니다.2. 그러나 일이 생기는 것은 어쩔 수 없습니다.3. 새로운 일이 하나 생길 때는 기존의 일을 하나 줄일 수 있는 지 고민해야 합니다.4. 내부 업무부터 효율적으로 만듭니다. 여유공간을 주는 것이지요.5. 내부자료를 꺼냅니다(준비물5번)6. 우리 사업의 사업계획서와 제안서, 업무분장표, 프로젝트현황 등을 나열합니다.7. 우리는 도대체 왜 때문에 바쁘고 정신없는지 충신(준비물3번)으로부터 듣습니다.8. 지당한 말씀 격려를 받으며 멘탈을 잠시 다잡습니다.(준비물 4번)9. 내부에 쓸데없는 일들과 인력낭비를 쳐냅니다.10. 시간과 인력을 확보한 뒤 다음을 진행합니다.위 단계에서 시간과 인력이 확보가 되지 못했는데 억지로 브랜딩을 감행하거나, 원대한 꿈을 맘껏 펼치겠다고 하면 사무실의 7개지옥이 열리고 어디선가 켈베로스가 등장해 컴터를 다 씹어먹는 사태가 발행할 수 있습니다.대표님 마음이야 충분히 이해합니다. 빨리 브랜딩해서 챡챡 정리된 멋진 회사의 모습을 보고싶겠지만... 항상 일은 내가 아닌 실무자가 하고 있단 사실을 깨달아야 합니다. 일에는 순서가 있고 체계와 비용이 필요합니다. 사람이 하는 일이다보니 그렇게 우주적인 내용을 챡챡 만들어내기 힘듭니다.  직원들에게 인피니티스톤이라도 하나씩 크리스마스 선물로 주신다면 모르겠지만.우리 브랜드를 이해하려면 적어도 우주급빌런은 되어야 하지2단계 : 브랜드정리1. 대표님 자신과 직원들을 찬찬히 보십시다.2. 이 사람들을 한 마디로 묶으면 어떤 집단일까요3. 우리가 누구인지부터 규정합니다.4. 그 사람이 뭔 일을 하고 있는지 규정합니다.5. 그거 왜 하고 있는지 살핍니다.6. 누가 무엇을 왜 하는 지 문장으로 만듭니다.7. 여기까지는 그냥 브랜딩 경영서에 나오는 것들입니다.8. 그것과 상관없는 일들을 구별합니다.9. 그건 왜 시작하게 되었는지 생각해봅니다.10. 대부분 그냥 돈때문입니다.11. 일단 그것들은 저리 치워놓습니다.12. 6번내용을 실제로 구현하는 우리 회사의 정책은 무엇인지 살펴봅니다.13. 대부분 없습니다.14. 없으니까 미팅을 하는 거겠죠.15. 로고, 슬로건, 제안서, 회사소개서 등등을 쭉 꺼내옵니다.16. 6번과 관계가 있는지 살펴봅니다.17. 대부분 없습니다..18. 합리화시키지 않습니다. 딱 봤을 때 아니면 아닌겁니다.19. 만들어야 할 것들 리스트를 정리합니다.20. 각 제작물들의 역할과 기능을 정의합니다.내부 브랜딩정리는 참 어렵습니다. 크게 3가지 이유죠.우선은 합리화가 지립니다. 사람이 말은 하면 할수록 말이 된다고...생각이 많아지고 말이 계속될수록 이것도 말이 되고 저것도 말이 되는 것 같습니다. 하지만 소비자들은 그렇게 오랜 고민을 통해 브랜딩을 인식하지 않습니다. 직관적인 겁니다. 그리고 이성적이지도 않고 논리적인 것도 아닙니다. 그러니 6번을 규정했다면 그 기준에 맞춰서 나머지 것들을 판단합니다.두 번째는 애정이 넘칩니다. 어쨋든 사업초기에 애써서 고생해서 만든 눈물과 애환과 피와 땀이 녹아있는 사랑스러운 것들이라서 쉽사리 버리기가 힘듭니다. 제작물에 인격을 부여하지 마세요. 애정어린 옛 것들로 사업하는 게 아닙니다. 방향에 맞으면 남기고, 아니면 버립니다. 주로 대표님이 혼자 하기엔 마음의 상처가 너무 크니, 냉정하기가 이루말할 데 없는 직원에게 일임하도록 합시다. 마지막으론 6번 정리가 안됩니다. 6번의 잘못된 예를 보여드리겠습니다.; 열정 넘치는 사람들이 소비자의 행복을 위해 만드는 가치있는 생활가구세상 멋진 말을 다 가져다 붙이는 게 정의가 아닙니다. 정의...라는 것은 어떤 개념으로 일축되어야 합니다. 정의에 또다른 정의가 필요한 저런 문장은 그냥 똥입니다.; 가구덕후들이 모여 만든 원룸족들을 위한 공간창출 생활가구이렇게 '아, 1인가구 전문기업!' 으로 일축!!... 물론 퀸사이즈도 팔고 3인용 식탁도 팔겠죠. 하지만 그건 플러스알파인 겁니다. 우리가 이것저것 다판다고 해서 '이것저것 다팝니다.' 라는 식이라거나 (아예 다이소처럼 그걸 컨셉으로 가져갈 게 아니라면) 가치있는 가구를 팝니다 는 등의 어쩌라고?식의 문장들만 늘어놓는 것이 딱히 좋은 방식은 아닙니다. 일단 우리의 메인을 잡고 가는 겁니다. '메인은 이건데 너무 1인가구만 팔면 2인가구는 불편할까봐 이것도 팔고있어' 라는 식인거죠. 그래서 6번을 정의할 땐 아주 메인과 부가적인 영역을 잘 구분해야 합니다. 잘 모르겠으면 지금부터 정리해서 잡도록 합시다.아니 브랜드에 멋진 말 안쓰면 회사 기가 죽습니까3단계 : 미팅준비1. 2단계의 19,20번에서 준비한 리스트와 장표를 들고 갑니다.2. 6번문장도 숙지합니다.3. 제작의뢰를 합니다.4. 단가책정을 하거나 총 금액으로 합산합니다.5. 보통 저런 비쥬얼브랜딩 제작물을 따로따로 만들진 않습니다.6. 제작 후엔 관리가이드도 함께 요청합니다.7. 기한을 산정합니다.8. 디자이너와 레퍼런스 정리를 하고9. 이 다음부턴 보통 디자인 커뮤니케이션과 같습니다.10. 브랜딩담당 직원과 컨택포인트를 연결합니다.여기서 10번의 직원은 브랜딩총괄을 하란 것이 아닙니다. 디자이너와 커뮤니케이션 할 수 있는 채널을 압축시키는 것이지, 그 사람이 혼자 브랜딩하란 얘기가 절대 아닙니다. 근데 보통은 절대 아니라고 이렇게 말해도 어느덧 시간이 지나면 그사람이 독박쓰는 경우가 99%더군요. 그래서 직원들 사이에서 뭐 똥을 밟았니, 잘못 걸렸다느니 하는 소리가 나오는 겁니다. 업무분장할 땐 이걸 명확히 해줘야 합니다. 그 담당직원에게 '너가 다 하는 게 아니야.' 라고 달래봤자 소용없습니다. 다른 직원들에게 다른 일을 주는 것이 더 중요하죠.넌 디자이너와 컨택만 해넌 실무운영가이드를 만들어넌 현재까지 만들었던 기존 제작물 파일들모아서 외장하드에 봉인시켜넌 대외홍보용 채널 확보해놔넌 매장인테리어, 앱 리뉴얼 단가랑 프로세스 확인해이런 식으로 나누어주는 겁니다. 내부적으로 '아 쟤가 다하는구나.' 라는 분위기를 만들지 않는 것이 좋습니다.상처를 치료해줄 사람 어디 없나 가만히 놔 두다간 끊임없이 덧나 사랑도 사람도 너무나도 겁나 혼자인게 무서워 난 잊혀질까 두려워 상처를 치료해줄 사람 어디 없나...제발이렇게 미팅을 시작하도록 합시다. 비쥬얼브랜딩 미팅 이후의 제작단계는 디자이너가 알아서 할 일입니다. 물론 그 디자이너가 어떻게 브랜드제작물을 만드는가는 제 다른 매거진의 글의 링크를 통해 확인하시면 편하실 듯 합니다.1. 로고를 만들어보쟈2. 회사소개서를 만들어보쟈(1)3. 회사소개서를 만들어보쟈(2)4. 제안서를 만들어보쟈5. 컨셉을 잡아보자오늘 글의 본질은 '내 생각을 먼저 정리하고 미팅을 하자' 라는 것입니다. 제 경험상 미팅이 폭망하거나 또는 뭔 말인지 못 알아듣겠거나, 하기 싫거나 또는 해도 결과물이 이상하게 나오거나, 잘나와도 관리가 안되는 모오오오오오오오든 이유는 최초에 '제작의 목적' 자체가 흐지부지였기 때문입니다. 처음엔 그렇게 말하지 않았잖아요...흐르르그르흐르륵제대로 기한을 잡고 내부정리를 먼저 하라는 이유는 서로 언짢고 매너없는 경우를 피하기 위함입니다. 개인적으로 프로젝트하다가 '내부적으로 정리가 안되서요..좀 바빠서요...다음 주에 피드백 드릴께요..' 라는 식으로 계속 딜레이만 되거나 또는 컨택포인트라고 알려준 사람이 전혀 내용을 모르고 있거나, '확인하고 다시 연락드릴께요.' 라거나.... 아니 왜 자기 회사 브랜딩프로젝트를 직원이 확인을 해봐야 하는거지??? 애시당초 내가 몸담고 있는 곳의 정체성이 어떻게 바뀌는 지에 대한 공유와 협의가 전혀 이루어지지 않았다는 얘기 아닐까요. 대기업이나 BX팀이 따로 존재하는 경우는 그럴 수도 있을 것 같지만, 제가 저런 말을 들은 곳은 소위 '그래서는 안되는 곳' 들 이었습니다. 그러니 프로젝트를 시작하기전엔 일단 우리가 그 프로젝트를 잘 운영할 수 있는 여건인가? 를 확인해 보는 것이 서로를 위해 좋을 듯 합니다.그리고 2단계에서 먼저 브랜드정리를 하는 이유는 추후에 '아 맞다!!..' 또는 제작도중에 계속 방향이 바뀌고 딴 소리가 나오는 것을 최소화 시키기 위해서입니다. 시안에 대한 수정이 이루어질 순 있겠으나, 전체 방향자체가 바뀌어버리면 안되는 겁니다. 이것은 신뢰도에 문제이기도 합니다. 어쩃든 디자이너도 외부사람입니다. 일단 그에게 비춰지는 회사의 이미지를 생각해보세요. 이랬다저랬다 생각만 많고 정리도 안되어있고... 이런 느낌으로 다가가선 안될 듯 합니다.마지막으로 예산관리는 어떤 것들을 하느냐에 따라 다르지만, 솔직히 말해서 50만원들여서 제안서 하나 만드는 걸 브랜딩이라고 하지 않았으면 합니다. 그건 그냥 제안서 만드는 거지 브랜딩이 아닙니다. 비쥬얼브랜딩 프로젝트는 보통 개월단위 또는 연단위로 진행되고 예산도 보통 수백에서 수천까지 예상보다 훨씬 "많이"듭니다.그리고 제작되는 제작물의 가이드와 관리, 운영까지 모두 프로세스잡고 실제 보여지는 과정까지가 비쥬얼브랜딩이기 때문에 시안만 전달하고 안녕~하는 것은 그냥 디자인 작업한 거지 뭐 브랜딩했다뭐한다 얘기하기가 조금 이상한 부분이 있습니다. 디자인의 본질은 그 기능에 있습니다. 디자이너가 결과물의 기능을 100%책임질 순 없지만, 떠내보내고 나몰라라 하는 것도 웃긴 일입니다. 적어도 궤도상에 올리는 단계까지의 가이드는 제공해주는 것이 맞습니다. 가능하면 그 과정까지 인볼브하는 것이 좋구요.모두모두 깔끔한 정리로 깔끔한 미팅과 만족스런 결과물들로 새해를 시작하셨으면 좋겠습니다!!!~~메리 크리스마스 :)

 이 글은 아무래도 실무를 진행하면서 쉽게 잊게 될 수 있는 이야기 입니다. 실무를 하고 계신분들은 다시한번 상기할 수 있는 기회를, 준비를 하시는 분들에게는 꼭 필요한 인사이트를 드리고 싶네요:)"내가 만든 서비스를 보다 쉽고 재밌게 이용자들에게 제공하고 싶다."라는건, 세상 모든 기획자, 개발자, 디자이너 분들이 다 가지고 있는 궁극적인 목표입니다. 열심히 만든 서비스가 단순히 "보기 힘들어서, 서비스 외적인 부분에 결함이 있어서" 사용하지 못하게 된다면 그것만큼 화나는 경험이 없겠죠. 그런 의미에서 UI/UX는 서비스의 얼굴을 만드는 과정이기 때문에 엄청나게 중요한 역할을 차지합니다. 굳이 서비스를 제작하시는 분들이 아니더라도, UI, UX에 대한 이야기들은 많이들 들으셨을 텐데요, 두단어가 비슷하게 보일 수는 있지만, 기본적으로 UI와 UX는 큰 차이가 있는 단어라고 생각합니다. 1. UX (User Experience) 직역하자면 사용자 경험이고, 이용자가 재화나 서비스 등을 사용할 때 생기는 신체적 반응이나 심리적 기호도(또는 선호도), 그리고 상징적 상호적인 사회적 기준 등을 수집하고, 이에 대한 조사와 연구 등을 통해 "이용자가 더 맘에  들어할 수 있는 재화 또는 서비스."를 설계하는 큰  과정입니다. UX는 개발자 중심이 아닌 사용자 중심의 컴퓨터 시스템을 구축하기 위한 제록스사의 연구 중 HCI(Human Computer Interection) 연구에서 처음 사용된 개념이며, 처음엔 하드웨어에 집중된 연구였다고 합니다.  현재는 UX라는 개념이 컴퓨터와 관련된  것뿐만 아니라 모든 산업을 통해 제공되는 재화와 서비스 전반적인 사회의 흐름이나 문화에 이르기까지 널리 응용되고 있고, 이를 연구하기 위하여는 다방면의 관점과 지식, 시야를 가지고 접근해나가야 합니다. 2. UI (User Interface) UI는 아무래도 더 친숙한 개념이실 텐데요, 왜 아이폰이나 애플, 또는 샤오미 같은 전자기기 회사에 대한 이야기를 할 때 "UI가 직관적이고 혁신적이다." 이런 말 많이 들어보셨죠? 정말 간단히 설명하자면, 전자기기 또는 어플이나 웹을 사용했을 때 이용자들이 보게 되는 화면 구성을  이야기하는데요, 이용자들이 선호하는 구성, 배치, 콘텐츠 등을 UX 조사를 통해 분석하고, 조율하여 보다 직관적이고 빠르게 서비스를 이용할 수 있도록 하는 개념입니다.  보시다시피 UI는 사용자의 경험을 기반으로 하여 어느 위치에 어느 기능이 담긴 어떤 기호 또는 인포그래픽을 그리고 어떤 콘텐츠를 기입함에 따라 보다 쉽게 이용자들의 생산성을 향상 시키는 분야라고 할 수 있습니다.(자세한 이야기는 여기, 와 여기를 참조하세요!) 설명에서  보시다시피 UX가 UI의 개념을 포괄하는 것을 보실 수 있죠, 그렇다면 UX, 또는 UI 정보는 어떻게 얻을 수 있을까요? 기본적으로 여러분들이 초보 디자이너 또는 기획자 시라면, 성공적으로 돌아가고 있는 서비스들이나, 다양한 UI 제작 회사나, UX 에이전시들의 제작 리뷰, 리서치 결과 등을 벤치마칭 하는 것으로 디자인 프로세스를 시작들 하시곤 하죠. 물론 검증이 된 서비스의 틀을 사용하는 것은 기존 이용자들의 편의성을 이끌어 낼 수 있기 때문에 굉장히 효율적인 방법이라고 생각합니다. "이용자의 경험에  기반한다."라는 약속을 100% 지킨 제작 방법이니깐요. 그러나 유명한, 또는 큰 서비스들의 심미성이나, 배치만을 보고 그대로 따라 하는 디자인은 절대로 옳지 않은 판단이라고 생각합니다. 아이디어의 유용에도 이유가 있어야 합니다. 출처: http://austinkleon.com/steal/ 저는 디자이너는 아니지만 재화 또는 서비스를 기획하고 디자인하시는 분이라면, 자신이 제작한 디자인, 또는 목업작업에 내재된 인사이트를 정확하게 설명을 할 수 있어야 하고, 이를 위해 스스로 리서치에 대한 결과를 분석하고 판단할 수 있어야 한다고 생각합니다. 예를 들면, 서울시 지하철 바닥에 붙인 동그라미 스티커나 버스 정류장에 붙여 있는 빨간색 스티커를 보신 적이 있으신가요? 출처: http://news.sbs.co.kr/news/endPage.do?news_id=N1003310218출처: http://www.lgchallengers.com/career/young1829/20130118_inter/  경제(행동경제학) 용어로는 넛지 효과(Nudge Effect)라고 하는데요, 의연 중에 이용자의 결정에 개입하여 원하는 결과를 이끌어 내는 효과를 뜻합니다. 제가 생각하기에는 이러한 피지컬 한(또는 비져블 한) UX도 그냥 여기서 끝나는 것이 아니라, 응용을 통하여 다방면의 분야에 퍼질 수 있다고 생각합니다. "이용자의 심리적인 판단의 흐름을 읽고, 인지적 선호에 따라 이용자의 행동을 파악, 이용자에게 시각적인 제한을 줌으로써 공공이익을 유도할 수  있다."라고 개인적인 인사이트를  발전시킬 수 있는 것 이죠. 웹을  벤치마킹하는 것도 다르지 않다고 생각합니다, 분명히 같은 모양, 같은 색, 같은 배열로 서비스 디자인을 할 수 있지만, 개인의 연구와 조사를 통해 인사이트를 발전시켜 나감에 따라 정당한 디자인 프로세스를 진행하고, 인사이트를 기반으로 익숙한 UX에 새로운 UX를 적용하는 것이 가장 바람직하다고 생각합니다.#코인원 #블록체인 #기술기업 #암호화폐 #스타트업인사이트

스포카 비주얼 디자인팀은 스포카 한 산스를 판올림한 두 번째 버전을 배포했습니다. 스포카 한 산스2.0에 관한 몇 가지 단편적 사실들 포스트에 이어 이 글에서는 스포카 한 산스를 웹페이지에 사용하고자 “커스텀”한 부분을 소개하고 스포카 한 산스 웹폰트 사용시 권장하는 방법을 알립니다.웹페이지에서 사용할 때를 고려한 변경사항먼저, 웹페이지 사용을 염두한 변경사항에 대해 소개합니다. 스포카 한 산스는 웹폰트로 많이 사용하기에, 웹에서 UI와 함께 쓰이는 상황을 필수로 고려했습니다. 스포카 한 산스2.0에 관한 몇 가지 단편적 사실들에 자세한 디자인 변경사항에 대해서 소개했는데, 해당 포스트에서 소개하지 않은 변경사항을 적어봅니다.1. “더보기”나 “뒤로” 레이블과 함께 쓰는 화살표 아이콘을 폰트 파일에 추가했습니다.고대 문자 등 일반적으로 쓰이지 않는 특수한 글리프 공간에 임의로 다른 글리프를 넣을 수 있습니다. 이를 Private Use Areas, 줄여서 PUA라고 부릅니다.버전2에는 이 PUA에 “더보기”나 “뒤로” 레이블과 함께 쓰는 화살표(Caret) 글리프를 넣었습니다.왼쪽, 오른쪽 화살표를 각각 U+E000, U+E001에 할당했습니다. UI를 구현하면서 보통 화살표 아이콘을 이미지나 SVG를 만들어 CSS로 처리하곤 하지만, PUA에 넣으면 마치 텍스트를 입력하는 것처럼 아이콘을 넣을 수 있습니다. 때문에 작업품이 덜 들고 경제적입니다.폰트는 UI 요소로써 쓰입니다. 당연하게도 UI 요소인 폰트 완성도를 높이면 UI의 정교함도 올라갑니다. 어떤 웹 페이지에서는 종종 오른쪽 부등호(>) 글리프를 넣어 이 아이콘을 대신합니다. 하지만 이 방식을 사용하면 해당 글리프의 표준 의미와도 일치하지 않고, 디자인 완성도가 약간 떨어집니다. 부등호 글리프 모양들은 수학기호 표기를 위해 만들어졌기에 아이콘 형태와는 거리가 멀기 때문입니다.이 방식이 편리하고 경제적이라면, 모든 모양 아이콘도 다 폰트에 넣으면 좋으리라고 생각하기 쉽습니다. 하지만 형태가 조금 복잡한 아이콘을 폰트에 넣고 힌팅 정보를 따로 입력하지 않으면1작은 글자 크기에서 모양이 일그러집니다. 아이콘을 어느 크기이든 명료하게 보여주려면, 폰트 힌팅까지 전부 고려해야 합니다. 모든 아이콘을 PUA에 추가하는 방식은 효과에 견줘 공수가 너무 많이 든다고 판단해 화살표 글리프만 PUA에 추가했습니다.이 왼쪽, 오른쪽 화살표 모양은 폰트 굵기별로 다른 굵기를 지정했습니다. 얇은 스타일에서는 얇게, 두꺼운 스타일에서는 굵게 보여줍니다.사용방법은 간단합니다. HTML 문자 엔티티를 마크업 코드에 넣는 방법대로 왼쪽 화살표는 , 오른쪽 화살표는 <을 HTML문서에 작성합니다./* 왼쪽 화살표 */ < 뒤로 가기 /* 왼쪽 화살표 */ 더 알아보기 > 위 코드를 스포카 한 산스를 불러오는 웹페이지의 HTML파일에 적어 넣으면 아래처럼 보입니다.< 뒤로 가기더 알아보기 >2. 서브셋에는 한글 완성형 글꼴에 추가 글자 224자를 더했습니다.스포카 한 산스를 배포하고나서 부족한 글자에 대한 제보가 꾸준히 들어왔습니다. 한글 완성형 2,350자는 1987년 규격화된 표준입니다. 굉장히 오래전에 지정된 표준이기 때문에 일상생활에서 자주 쓰는 글자가 없는 경우가 왕왕 있습니다.우리는 사용성을 어떻게 하면 개선할 수 있을지 고민하다가 노민지, 윤민구 님이 작성하신 논문인 “KS 코드 완성형 한글의 추가 글자 제안”을 발견했습니다. 스포카 한 산스 두 번째 버전 서브셋은 이 논문의 제안 안을 따라 KS 완성형에 추가 글자 224자를 더해 총 2,574자를 제공합니다.3. 서브셋 폰트 파일을 만드는 스크립트를 제작했습니다.서브셋 폰트 파일을 만드는 스크립트가 저장소에 반영되었습니다.2 이후 오리지널 파일을 수정하더라도 쉽게 서브셋 폰트 파일로 만들 수 있습니다.서브셋 폰트 파일을 만드는 스크립트 build_subset 파일의 작동 방식을 간단히 소개합니다.이 스크립트는 subset 폴더 내에 위치한 glyphs.txt를 읽어서 서브셋을 만듭니다.한글 폰트의 경우 glyphs.txt 파일에는 완성형 2,350자와 위에 언급한 추가글자 224자, 그리고 각종 필수 약물이 적혀있습니다.U+2603(눈사람 기호), U+E000과 U+E001(왼쪽, 오른쪽 화살표) 글리프는 스크립트에 하드코딩 했습니다. PUA를 더할 때는 스크립트를 직접 수정합니다.용량 차이가 크지 않기 때문에 힌팅 정보, 이름 등의 메타정보를 최대한 살리는 방향으로 옵션을 설정했습니다.이전에 스포카 한 산스와 글꼴 경량화 포스트에서는 GUI로 경량화할 수 있는 방법을 소개했습니다. 그런데 이번에 작업을 해보니 커멘드라인으로 스크립트를 돌리는 것에 익숙하다면 이쪽이 훨씬 간편하다는 것을 알았습니다.3 또한, 커멘드라인 툴에 익숙하지 않은 디자이너라도, 프로그래머 도움을 아주 조금만 받으면 쉽게 서브셋 폰트를 만들 수 있다는 사실을 알았습니다. 혹시 스포카 한 산스를 일부만 서브셋으로 만들고 싶다거나 다른 폰트를 서브셋으로 만들기 원한다면 위 스크립트를 활용해보세요.스포카 한 산스 웹폰트 사용 가이드라인다음으로, 스포카 한 산스를 웹폰트로 사용할 때 권장하는 두가지 방법을 살펴보겠습니다.1. 스포카 한 산스 서브셋 파일을 직접 CDN에 올려서 사용하세요.스포카 한 산스 공식 웹페이지에서 설명한 웹폰트 사용법대로 쓰시면 폰트를 불러오는 속도가 다소 느립니다. Rawgit이라는 무료 CDN을 사용했기 때문인데요, 무료로 파일을 불러오는 대신 조금 느립니다. 내부에서 테스트해 본 결과 폰트를 불러오는 시간이 짧게는 2초에서 길게는 20초 이상 걸리기도 했습니다.이런 불편한 점을 해결하려면 회사의 경우는 자사의 CDN에 파일을 올려서 서브하는 방식을 추천합니다. 어떤 CDN은 비용을 내야하는 경우가 있겠지만 일단 속도가 무척 빨라지기 때문에 웹 페이지의 성능이 좋아집니다. 참고로, Cloudflare에는 개인이 이용할 수 있는 무료 플랜도 있습니다.2. 웹페이지에서 폰트 로딩이 되기 전까지 아무것도 안 뜨는 현상을 해결하세요.웹페이지에서 글자가 아무것도 뜨지 않는 현상은 한국어 웹페이지를 접속하는 모든 사람이 한 번쯤 겪어보았을 것입니다. 이 현상은 한글 웹폰트를 불러올 때 흔하게 일어납니다. 이는 한글 웹폰트 용량이 영문 웹폰트에 비해 아주 무겁기 때문인데요. 이러한 현상을 FOIT(Flash of Invisible Text)라고 부릅니다.해외에서 웹폰트를 사용한 한국 웹페이지에 접속한다거나, 무척 느린 인터넷 환경에서 용량이 큰 한글 웹폰트를 불러올 때 이 현상은 빈번하게 목격됩니다. 스포카 한 산스를 사용한 웹페이지에서도 FOIT 현상이 자주 나타났습니다. 최근에 Woff2 파일을 가장 먼저 불러오도록 CSS의 @font-face 방식을 바꾸는 Pull Request가 저장소에 반영되고 나니 폰트 로딩 속도가 월등하게 개선되었습니다. 로딩 속도와 FOIT 발생빈도는 반비례합니다.아까 언급했다시피 각자의 CDN에 올려 폰트 로딩 속도를 빠르게 변경하면 이 현상을 피할수 있습니다만, 확실하게 하기위해서는 폰트를 불러오는 동안에 다른 폰트를 보여주는 비동기 로딩 방식을 사용하는 게 좋습니다. 스포카 기술블로그에서는 FOIT를 방지하기 위해 웹폰트 로더, 그 중에서도 비동기 로딩 방식을 사용해서 FOIT를 방지합니다.4사용방법 안내는 아래 포스트를 소개하는 것으로 대신합니다. 폰트를 불러오는 동안 깜빡이는 현상에 관해 구체적인 내용을 읽고 싶거나, 폰트 로딩에 대해 더 알아보려면 한 번쯤 읽어보시길 추천합니다. 폰트 로딩 방식에 관해 자세히 정리한 글입니다.FOUT, FOIT, FOFT웹 폰트를 로컬 스토리지에 저장하는 기법 - 캐시 안정성 증가, 글꼴 깜빡임 현상 제거나눔고딕 구글 웹폰트(Webfont) 사용하기마치며스포카 한 산스를 공식 배포하고 1년이 조금 넘었습니다. 그간 분에 넘치는 관심과 성원에 감사합니다. 그동안 우리팀에서 작성한 스포카 한 산스 관련 웹페이지를 첨부하며 이 글을 마칩니다.스포카 한 산스 공식 웹페이지스포카 한 산스 2.0에 관한 몇 가지 단편적 사실들스포카 한 산스와 글꼴 경량화폰트 힌팅은 말 그대로 힌트를 말합니다. 외곽선을 렌더링 할때 필요한 추가 정보인데요, 이 정보가 부족하면 작은 글자 크기나 해상도에서 깨져 보일 수 있습니다. FreeType 라이브러리의 힌팅과 커닝 항목도 참고해보세요. ↩이 스크립트는 스포카 제품팀 팀장인 김재석 님이 작업해주셨습니다. ↩개인 사이드프로젝트인 한글 웹폰트 글꼴보기집을 만들 때는 Fonttools 같은 도구를 살펴보았습니다. ↩스포카 기술블로그에는 default.html의 헤더에 해당 스크립트를 넣었습니다. ↩#스포카 #디자인 #디자이너 #폰트 #인사이트 #경험공유 #후기 #일지

Overview2년 전이었을까요. 엄마에게 스마트폰을 꺼내들어 그동안 만들었던 콘텐츠를 보여주었습니다. 아들이 이런 걸 만든다며 당당하게 말했지만, 제 콘텐츠를 처음 마주한 엄마는 인상을 찌푸리며 소리쳤습니다.“아이고, 안 보여!” 분명 제 눈엔 잘 보였는데 엄마는 미간을 찌푸려야 글씨가 보였던 겁니다. 그제서야 무언가 잘못됐다는 걸 느꼈습니다. 노이즈를 없애자!크리에이터는 콘텐츠를 제작해 자신의 생각과 경험을 독자에게 전합니다. 그것이 온전하게 전달되었을 때 독자는 콘텐츠를 보고 웃고, 공감하고, 감동을 받지요. 하지만 그렇지 않을 때는 가차 없이 ‘뒤로 가기’를 누를 겁니다. 독자가 온전히 콘텐츠를 즐기는 데에 방해되는 요소, 즉 노이즈를 미리 없애기만 해도 읽기 편한 콘텐츠가 될 수 있겠지요? 많은 노이즈가 있겠지만, 오늘은 가장 기본적이면서도 중요한 텍스트의 노이즈를 없애는 방법부터 살펴보겠습니다. 1.순서를 정하자! 어느 버튼이 보기 좋을까요대부분의 엘리베이터 버튼은 왼쪽의 형태를 갖추고 있습니다. 오른쪽 버튼처럼 되어 있다면 사람들은 버튼을 누르기 전에 어디를 눌러야 할지 망설일 겁니다. 예를 들어 6층을 가려고 했는데 5층 버튼 위에 보여야 할 6층 버튼이 바로 보이지 않았으니까요. 썸네일이 잘려 있는 건 다 이유가 있습니다. / 네이버 웹툰 제공앱 화면도 종종 우리의 행동을 유도합니다. 위의 앱 화면에서 썸네일이 잘려있을 경우, 우리는 자연스럽게 손가락을 움직입니다. 그러므로 콘텐츠 크리에이터는 독자가 순서대로, 편하게 읽을 수 있도록 시각적인 힌트를 콘텐츠 안에 심어야 합니다. 우리나라 사람들은 왼쪽에서 오른쪽으로 글을 읽는다두 문장 중 어디부터 읽으셨나요? 아마 왼쪽부터 읽었을 겁니다. 우리나라 사람들은 왼쪽부터 글을 읽는 것에 익숙하기 때문입니다. 아래에서 위로 글을 읽는 사람은 없습니다.그렇다면 이번엔 위쪽과 아래쪽 중 어느 문장을 먼저 읽으셨나요? 당연히 위쪽부터 읽었을 겁니다. 결국 독자는 글을 읽을 때 왼쪽에서 오른쪽 순으로, 위에서 아래 순으로 읽는다는 걸 알 수 있습니다. 왼쪽에서 오른쪽으로, 위에서 아래로앞의 두 결과를 합치면 이런 식의 배치가 가능합니다. 두 문장은 똑같지만 마치 왼쪽에 있는 문장이 먼저 말을 거는 것처럼 보이지 않나요? 왼쪽에 있는 사람이 먼저 말을 거는 것처럼 보인다.이번엔 응용해볼까요? 이미지에 대입하면 이런 형태로 제작할 수 있습니다. 독자도 별도의 설명 없이 순서대로 읽을 수 있고요.시선의 이동에 경우의 수를 두지 맙시다!등장하는 인물이 누구인지 나타내고 싶다면 왼쪽보다 오른쪽처럼 표현하는 게 더 좋을 겁니다. 독자가 자연스럽게 시선을 옮길 수 있기 때문에 콘텐츠를 편하게 볼 수 있습니다. 이처럼 크리에이터는 독자의 시선 이동에 경우의 수를 두지 말아야 합니다. 그렇지 않으면 콘텐츠에 몰입할 수 없습니다. 한 명이 반말만 해도 관계가 정의된다.상하의 관계를 표현하고 싶다면 한 명이 반말을 사용하는 것이 좋습니다. 굳이 설명하지 않아도 독자가 인물들의 관계를 알 수 있는 시각적 힌트입니다.2.불필요한 요소를 걷어내자!“맛있는 거 같아요.” “재밌는 거 같아요.” 뉴스에서 시민 인터뷰를 볼 때면 “~같아요”라는 표현을 자주 봅니다. 하지만 유추는 남의 감정이나, 확실하지 않은 현상을 말할 때나 사용하는 것입니다. 자기 자신의 감정을 유추하는 건 분명 잘못된 표현이죠. “그녀의 마음이 진짜 아플 거 같아요.” (O) “그 태풍은 굉장히 위험할 거 같아요.” (O) “영화가 재미있었던 거 같아요.” (X) -> “영화가 재미있었어요.” 문장에서 없어도 되는 것들은 과감하게 지웁시다. 정확한 표현을 써야 전하고 싶은 내용을 충분히 전달할 수 있으니까요. 불필요한 요소를 없애면 독자가 읽기도 쉬울 겁니다. 콘텐츠 크리에이터는 반드시 독자의 시선을 배려해야 한다는 사실을 잊어선 안 됩니다. 3.강조하자!‘이것만큼은 독자에게 꼭 전달하겠다!’하는 것이 있다면 우주가 나서서 도와주길 기다리지 마세요. 색, 서체, 크기, 굵기 등을 활용하는 방법이 있습니다. 이 광고의 기획자는 어떤 걸 전하고 싶었을까?여러분은 위의 광고에서 어떤 것부터 보이시나요? (조정석 말고요.) 위의 광고를 만든 기획자는 죽었다 깨어나도 ‘종신보험’과 ‘생활자금’이란 단어를 전달하고 싶었을 겁니다. ‘종신보험에 가입하면 생활자금이 나온다’는 것이 광고의 핵심이었으니까요. 같은 문장이어도 표현 방식에 따라 다르게 읽힌다.맞습니다. “안녕”이란 간단한 문장도 어떻게 강조했는지에 따라 독자는 글을 다르게 읽습니다. 글씨가 작으면 작은 소리, 글씨가 크면 큰 소리로 읽힙니다. 만약 더 큰 소리를 표현하고 싶다면 느낌표를 왕창 늘려보는 것도 좋습니다. 이 가족이 행복해 보일까?하지만 강조하기는 꼭 필요한 경우에만 써야 효과가 있습니다. 가족과 놀이공원에 놀러가서 행복했던 이야기를 위의 문장처럼 표현한다면 사람들은 공포영화의 오프닝 멘트를 보는 기분이 들 겁니다. 눈이 아파요.색이 예쁘다는 이유만으로 여기저기에 남발하는 것도 마찬가지! 집중도 안 되고, 눈도 아픕니다. 저라면 아래의 이미처럼 표현했을 거예요.강조는 필요한 곳에만!Conclusion글, 이미지, 사진, 영상 등 콘텐츠를 표현하는 방법은 많지만 가장 기본인 글을 다루지 못하면 무용지물입니다. 크리에이터는 독자에게 재미를 선물해야 하는 사람입니다. 독자는 그들의 소중한 시간을 투자해 콘텐츠를 본다는 걸 잊지 마세요. 저는 오늘, 엄마에게 다시 한 번 제 콘텐츠를 보여드릴 겁니다.참고장근우, 「콘텐츠의 정석」, 예문아카이브(2017) 글장근우 대리 | People&Relations [email protected]#브랜디 #기업문화 #조직문화 #업무환경 #인사이트 #경험공유 #콘텐츠