POSTYPE Product

포스타입 브랜드 리뉴얼하기 #2

#2편. 심볼 스타일과 메인 컬러의 개선, 새로운 컬러 시스템 도입 과정

안녕하세요! 여러분들이 기다려주시던 포스타입 앱이 드디어 출시 됐습니다~ 짝짝! 👏👏

그동안 제품팀 디자이너들은 포스타입 브랜드 리뉴얼을 진행했습니다. 포스타입 디자인이 어떤 고민을 거쳐 개선되었고 앱에는 어떻게 적용이 되었는지 그 과정에 대해 소개해드리고자 합니다! 궁금하시죠?

포스타입 앱 화면



브랜드 리뉴얼 배경

팀이 구성된 지 얼마 되지 않은 상태에서 신규 앱 구축이라는 미션이 주어졌는데요, 먼저 포스타입 브랜드 정체성과 방향성에 대해 처음부터 다시 고민했습니다.

미션과 비전을 파악하여 앞으로 포스타입이 보여주어야 할 방향성을 정한 뒤 브랜딩 아이데이션을 진행했습니다. 브랜딩 아이데이션을 통해 브랜드 디자인 원칙을 정의하고, 전체적인 디자인을 리뉴얼했습니다. (포스타입 브랜드 리뉴얼하기 #1)

이러한 과정을 통해 포스타입은 심볼 스타일과 메인 컬러의 개선, 새로운 컬러 시스템을 도입하게 되었습니다.



심볼 스타일 개선

포스타입 제품 UI 디자인은 이미 단정하고 심플한 스타일을 유지하고 있었습니다. 다만, 포스타입의 심볼 이미지는 다소 볼드한 느낌을 전달하고 있어 개선이 필요했습니다.

포스타입의 이전 브랜드 심볼

포스타입의 심볼은 단락 기호 Pilcrow에서 모티브를 가져와 특유의 볼드한 느낌이 있었습니다. "단순하고 심플해서 사용하기 편한 포스타입" 이라는 이미지를 전달하기 위해 Fill 된 부분을 제거하고 라인만 남겨 라이트하고 심플한 이미지를 전달할 수 있도록 개선했습니다.

포스타입의 리브랜딩 된 브랜드 심볼
  • 굵고 견고한 서체는 신뢰를 상징합니다.
  • 보기 쉽고 심플하게 디자인하여 심볼의 주목성을 높였습니다.
  • 선명하고 명료한 이미지를 전달하기 위해 원색을 (#000000, #ffffff)을 사용했습니다.



메인 컬러의 개선

포스타입은 작가에게 합리적으로 수익을 배분하고, 작가가 마음껏 창작 활동을 펼칠 수 있도록 국내 서비스로는 드물게 커뮤니티 가이드라인을 갖췄고, 작가의 권리 보호를 위해 권리침해 신고센터를 열어두고 있습니다.

이러한 포스타입의 서비스는 이미 업계를 선도하고 있는 만큼 포스타입 브랜드가 좀 더 진중하고 신뢰감 있는 이미지를 전달할 수 있도록 메인 컬러 변경이 필요했습니다.

포스타입 이전 컬러, 로고
포스타입 리브랜딩 된 메인 컬러
  • 진중하고 신뢰감을 줄 수 있도록 블루계열의 컬러로 변경했습니다.
  • 다양한 환경에 적용할 수 있도록 확장 가능성이 있는 컬러로 변경했습니다.
  • 또한 메인 컬러 사용의 절제로 제품의 중립적인 성격을 나타내려고 했습니다. (실제 메인 컬러의 비중은 2%)



새로운 컬러 시스템 도입

기존에 사용하던 디자인 컴포넌트들과 앱 출시를 준비하며 추가된 컴포넌트들을 통일성 있게 정리하는 것도 크나큰 과제였습니다. 그중에서도 시급했던 것은 바로 컬러🎨효율적으로 일하기 위해서는 기존에 사용하던 컬러들과 추가될 컬러들의 정리가 필수였습니다.

또한 많은 컬러들을 두고 구성원들이 얼마나 잘 소통할 수 있느냐도 중요한 과제였습니다.

디자이너가 아무리 "#3478FF 컬러를 적용해달라!" 말해도 개발자가 Hex값을 하나하나 찾아가며 일할 수는 없으니까요. 그래서 포스타입은 컬러 시스템을 도입하기로 결정했습니다.

먼저 사용하는 컬러를 모두 모아 컬러 팔레트를 만들었습니다. 그 후 컬러를 체계적으로 관리, 공유할 수 있도록 컬러 네임을 정의했습니다. 특히 포스타입 UI는 한 컬러 안에서 다양한 중간 단계의 컬러를 많이 사용하는데 많은 단계의 컬러를 불편함 없이 사용할 수 있도록 관리해야 했습니다.

Material Design은 컬러 네임과 세 자리 숫자로 컬러 값을 나타냅니다. 100~900으로 9단계를 확보하고 10~50단위 컬러를 추가하여 유연하고 확장성 있는 구조입니다.

포스타입은 Material Design과 비슷한 방식으로 컬러를 관리하기로 했습니다. 주요 컬러를 정한 뒤 단계별로 숫자를 붙여 컬러 체계를 만들었습니다. 이후 디자인을 진행하며 필요한 중간 단계의 색상을 추가했습니다.

포스타입 컬러 체계

여기서 한 가지 더! 이렇게 체계적으로 컬러 시스템을 만들었는데 실제 업무에 적용하지 못한다면....?😱 (포스타입은 Sketch와 Zeplin을 사용합니다.)

포스타입은 Zeplin에서 자동으로 컬러네임을 정해주는 json 파일을 찾았습니다. 흥미롭게도 디자이너가 json 파일에서 컬러 네임을 등록, 수정하면 Zeplin에서는 디자이너가 등록한 컬러 네임이 출력됩니다. 모든 구성원들이 같은 컬러 네임을 보게 되는거죠! 이러한 방식으로 편리하게 컬러값을 확인할 수 있습니다.

여기서 🍯꿀팁🍯  json 파일을 업데이트하고 Zeplin의 Style guide 문서에 모든 컬러를 등록해두면 새 프로젝트를 만들 때도 이 컬러 값을 한 번에 가져올 수 있답니다 : )

json Originaljson Edited

컬러 시스템 도입으로 디자이너와 개발자와의 소통 문제도 해결하고 컬러 단계별 정리도 용이해졌습니다.



마치며

이번 편에서는 포스타입의 디자인이 어떠한 고민을 고쳐 개선되었는지 과정을 구체적으로 소개해드렸는데요, 궁금증이 조금은 풀리셨나요?

다음 편에서는 그래픽과 일러스트레이션 제작 과정에 대해 소개해드릴 예정입니다. 그럼 모두 다음 편에서 만나요! 안녕~


국내 최초 개인 콘텐츠 판매 블로그 플랫폼, 포스타입입니다.

POSTYPE 님의 창작활동을 응원하고 싶으세요?

포스타입 팀
포스타입 팀
구독자 33

0개의 댓글

이 포스타입은 댓글을 사용하지 않습니다.

새로운 알림이 없습니다.