스타트업을 위한 웹 & 브랜드 로고 UI스타일 가이드

아웃소싱 플랫폼 프리모아의 스타트업 가이더 Will 입니다. 

스타트업 경영자는 비지니스를 진행하며 가장 먼저 '회사명'과 '로고' 결정에 대한 난관에 부딪힙니다. 

스타트업 서비스 대부분이 생소한 틈새시장(Nich market)을 대상으로 하기 때문에 다음과 같은 고민을 합니다.

스타트업 서비스에 대한 고민 " 어떻게 하면 우리의 서비스를 함축적으로 알릴 수 있을까 "

서비스 각인에 대한 고민 " 어떻게 하면 부르기 쉽고, 기억하기 쉬워 고객에게 각인 할 수 있을까? "  

기업 메세지에 대한 고민 " 우리가 말하고 싶은 메세지를 한글자에 하나의 이미지에 전부 담을 수 있을까? " 

스타트업의 이러한 고민은 매우 당연합니다. 사업은 시장에서 새로운 브랜드를 만드는 것부터 시작합니다.

브랜드에는 기업의 가치, 목표, 전략과 함께 스타트업의 서비스 내용, 컨셉, 캐릭터를 각인 시켜야 합니다. 

이를 위해서 로고제작에는 '형태','색상','은유' 를 다양하게 활용하는데요. 

색상을 이용하면 파란색 = 삼성 , 초록색 = 네이버 , 노란색 = 카카오톡 처럼 단색의 '메인컬러'를 부각하고

은유를 이용하면 로켓트 = 스타트업, 새의 지저귐 = 채팅, 셔츠 = 세탁 서비스처럼 심볼로 서비스를 표현하고

글자의 형태를 이용하면 은 핀 = 핀터레스트, 구름 = 스카이프 처럼 글자를 변형하여 서비스를 함축합니다. 

브랜드는 회사의 핵심가치를 시각적으로 표현하기 때문에 매우 중요합니다. 웹사이트 제작, 플랫폼 제작, 앱 제작

스타트업의 외주 어느것 하나 중요하지 않은 것은 없지만 스타트업의 웹사이트, 모바일 앱이 브랜드의 전체적인

정체성과 일치하도록 하는 것은 매우 중요하며 그렇기 때문에 디자인 외주시 웹 UI 스타일가이드가 있습니다. 

웹 UI 스타일 가이드는 디자인 외주를 진행할 때 웹사이트, 앱 등의 디자인이 일관성을 주기 위해 제공합니다.

스타트업들 대부분은 외주를 진행할 때 이러한 UI 스타일 가이드가 있다는 것을 잘 모르며, 사용하지 않습니다.

스타트업의 특성상 시간이 없고, 금액은 한정되고, 인력은 항상 부족해서 가이드를 챙길 여력이 부족합니다.

때문에, 프리모아에서 이러한 웹 UI 스타일가이드를 쉽게 벤치마킹 할 수 있도록 자료를 준비해 보았습니다. 

성공적인 스타트업 또는 대기업들의 사례를 통해 그들의 오랜 디자인적 고찰을 살짝 엿보러 가볼까요? 

트위터는 우리 모두가 사랑하는 마이크로 블로긍 및 소셜 네트워크 사이트입니다. 

사용자들은 140자 이내로 함축된 메세지들을 공유하며 @, #를 활용해 자신의 이야기를 공유합니다. 

트위터의 UI 스타일 및 웹 가이드라인을 확인하면 디자인 외주를 맡길 때 로고 및 그래픽에 도움줄 수 있습니다. 

모질라는 실제로 넷스케이프 커뮤니케이션의 네비게이터(Navigator)라는 별명이 있는걸 알고 있습니까? 

모질라는 회사에서 많이 쓰는 첫번째 웹 브라우저 였으며 네비게이터는 공동 작업자의 이름이기도 하였습니다. 

모질라 스타일 가이드는모질라, 파이어폭스 패밀리, 파이어 폭스 브라우저, 파이어 폭스 OS, 마켓 플레이스, 

웹 메이커 및 썬더 버드에 대한 고유한 디자인 정체성과 브랜딩을 가지고 있습니다. 

모질라의 스타일 가이드 지침에는 웹사이트, 텍스트 콘텐츠, 비디오, 인쇄술, 프리젠테이션 스타일이 포함됩니다.

이들은 파이어 폭스 OS를 위한 완벽한 스타일 가이드를 가지고 있으며, 최고의 스타일 가이드 중 하나입니다. 

론리 플래닛(Lonely planet)은 잘 못들어 본 분들도 있겠지만 세계 최대의 여행 가이드북 출판사 입니다. 

NCS 미디어의 미국 억만장자 브래드 켈리가 7,700만 달러에 인수하여 BBC Worldwide에서 2억 5천만 달러의

자산가치 평가를 받기도 하였습니다. 

Lonely Planet 's Style Guide에는 색상, 활판 인쇄, UI 색상, 디자인 팔레트, 대상 색상 및 아이콘이 매우 특별한데 

스타일 가이드에는 이러한 기준과 철학이 포함되어 있습니다.

페이스북은 가장 인기있는 소셜 네트워킹 사이트입니다. 

사람들의 연결 고리를 넓히고 세계를 개방하려는 사명을 완수했습니다. 

페이스북 사용자는 전세계에 있는 친구, 가족들의 최신 정보와 소식을 접할 기회를 얻었으며 

다른 사회에서 일어난 최신 이슈에 대해서도 알게 되었으며 중요한 문제에 대한 의견을 표현할 수 있습니다. 

특히 페이스북은 브랜드에 대한 로고, 블록, 이미지 에셋 등 많은 것에 대해서 지침 가이드가 뚜렸한데요. 

광고시스템에 있어서도 페이스북은 하지 말아야 할 것과 해야할 것들의 기준들을 명화갛게 가이드 하였습니다. 

Android는 Google의 모바일 운영체제 (OS)입니다. 

Linux 커널을 기반으로 스마트 폰 및 태블릿과 같은 터치 스크린 모바일 장치 용으로 설계되었습니다. 

안드로이드 앱을 만드는 경우 Android 로봇, Android 로고 및 구글플레이에서 스타일 가이드를 확인헤애 힙니다.

핸드폰 요금폭탄이 두려운 분들이라면, 또는 해외 사업을 하는 스타트업이라면 스카이프는 필수입니다.

스카이프 사용자는 인스턴트 메시징, 음성통화, 화상통화를 통해 전 세계 어느 곳에서나 무료 통화가 가능합니다.

스카이프의 브랜드 가이드라인을 확인하면 로고 활자체, 색상, 스트랩 라인, 구름, 일러스트레이션, 무지개, 사진

등의 사진 사용법에 대한 방법을 알게 됩니다. 

Salesforce.com 은 캘리포니아 주 샌프란시스코에 위치한 클라우드 컴퓨팅 회사입니다. 

세일즈포스는 고객관리 (CRM)제품을 통해 수익을 얻고 있으며, 소셜 네트워킹에 응용을 하려고 하고 있습니다.

미국 클라우드 컴퓨팅 회사중에서 가장 존경받는 회사중에 하나로 꼽히는 세일즈포스는 2015년 기준으로

회사 자산가치만 시가 총액 500억 달러에 달합니다. 브랜드 지침에는 색상, 아이콘 및 인쇄술이 포함됩니다. 

전세계의 비지니스 관계와 전문가와 연결하는 가장 좋은 방법은 링크드인이다. 라는 말이 있습니다.

링크드인을 사용하면 온라인에서 자신만의 전문적인 프로필을 만들고, 신뢰할 수 있는 연락처를 연결하여 

전문적인 네트워크를 확장하고 정보와 아이디어를 교환 할 수 있습니다. 

링크드인의 웹 및 UI 스타일가이드에는 시각적인 ID, 색상, 다운로드 및 제품 스크린 샷이 포함됩니다.

Shopify는 주로 중소기업을 대상으로하는 클라우드 기반 다중 채널 상거래 플랫폼입니다. 

국내에서는 잘 알려져 있지만 프리모아에서도 쇼핑몰외주로 쇼피 플랫폼을 이용하는 외주가 있었는데요.

저는 생소한 이름이었는데 의외로 해외쪽은 활성화가 잘되어 경험이 있는 작업자가 많이 있었습니다. 

비지니스 소유자는 이 소프트웨어를 사용하여 Pinterest 및 Facebook과 같은 웹, 모바일, 소셜 미디어 사이트를

비롯한 여러 판매 채널에서 자사의 매장을 디자인, 설정 및 관리 할 수 ​​있습니다. 

로고, 색상, 글리프, 간격 규칙은 브랜드 지침에 포함되어 있습니다.

WordPress는 세계 최대의 자가 호스팅 블로그 도구로 수백만 사이트에서 사용되며 수천만명이 방문을 합니다. 

워드프레스 외주로 프리모아에도 매월 수십개씩 등록이 되고 있는데요. 

워드프레스 장점으로는 유지관리가 쉽고 외주비용이 저렴하며 다양한 템플릿을 활용할 수 있습니다.

워드프레스는 오픈소스 프로젝트이기 때문에 전 세계에 수백만명의 사람들이 참여하고 있습니다.

프로젝트에 워드프레스 로고와 색상을 통합하려면 브랜드 지침을 확인하고 워드프레스 관리법을 배워야 합니다.