brunch

You can make anything
by writing

C.S.Lewis

by 박찬호 Feb 22. 2022

'디자인 시스템' 찾고 계시나요?

디자인할 때 참고할만한 디자인 시스템 레퍼런스 추천

작년 7월, 디자인 에이전시에 대한 글을 썼었는데 이어서 오늘은 디자인 시스템에 대한 레퍼런스를 공유하고자 한다.



디자인 시스템(Design System)이란 웹이나 서비스에 적용된 디자인 스타일의 규칙과 가이드라인을 의미한다. 크고 작은 디자인 의사결정의 기준이 되며, 효율적으로 빠르게 디자인할 수 있도록 돕고, 제품들의 일관성을 확보할 수 있도록 하는 장점이 있다.


옛날엔 디자인 가이드를 보통 회사 내부적으로만 가지고 있었지만, 요즘은 극도로 높인 접근성을 기반으로 내부 그룹에서의 활용도도 높이며, Product 자체의 신뢰도를 높인다는 점에서 사이트를 제작해 대외적으로 오픈하는 경우가 많아졌다.


디자인 시스템은 패턴 및 원칙들을 모아두어 Product를 훨씬 효율적이고 빠르게 디자인할 수 있도록 돕는 역할을 한다.



지금부터 디자인 가이드 작업 시 참고할만한 레퍼런스를 몇 가지 소개할 테니 북마크 표시 준비하시길!





1. VOLVO Design System (볼보)

https://design.volvocars.com


볼보는 개인적으로 옛날부터 좋아한 자동차 브랜드 중 하나이다. 마치 상자곽을 보는 듯한 자동차의 형태는 유려한 아름다움과는 거리가 있었지만 견고하고 단정한 브랜드 이미지를 심어주기 매우 좋았다. 그런데 웬걸, 2010년대에 들어서면서 볼보의 디자인은 누가 봐도 정교해지고 독창적으로 진화해갔다.

시대마다 각자의 매력이 있다.


볼보의 디자인 시스템은 차가 주는 이미지를 탄탄하게 잘 뒷받침해주고 있다.








2. STARBUCKS Creative Expression (스타벅스)

https://creative.starbucks.com


단순한 카페를 넘어 하나의 문화공간으로 떠오른 스타벅스는 온오프라인의 경계를 허물고 강력한 영향력을 행사하는 브랜드 중 하나다. 스타벅스가 출시하는 제품, 상품, 패키지 등 모든 시각적 자산은 디자인 시스템에 기반한다고 볼 수 있다.


계절별 캠페인을 통해 브랜드 표현을 극대화한다. (위 사진은 Spring Season)


스타벅스의 디자인 시스템은 "우리의 제품은 아름답고 믿을 만하다."라는 콘셉트 아래 전개되고 있는데  트렌드에 따라 진화하고 일관성 있는 모습을 만드는 동시에 조명, 그림자, 각도 및 구성과 같은 미묘한 디테일도 놓치지 않고 있다.


예술가의 손길이 닿은 일러스트는 수십 년 동안 스타벅스의 커피에 생명을 불어넣었다.

브랜드 스토리에 뿌리를 두고 있는 일러스트레이션에 대한 접근 방식은 트렌드에 따라 진화하고 있다. 콘텐츠는 어떤 식으로든 커피나 스타벅스와 관련이 있어야 하며, 질감, 사진 콜라주, 구성 및 그래픽 디테일을 사용하여 독창성과 통일성을 주고 있다.







3. LINE Design System

https://designsystem.line.me


한국, 일본, 대만, 태국, 인도네시아 등 다국적의 사용자가 있는 LINE은 각 나라마다 사용자의 패턴과 기대 수준들이 다르기 때문에 더 정확하고 믿을만한 디자인 시스템이 필요했을 것이다.

그래서 그런가 사이트에는 LINE Product의 A to Z가 명시되어 있는 느낌이다. 공통적인 Design Principle은 물론이고 Voice, Foundation, Components, Guidelines 뿐만 아니라 자세한 적용사례까지 보여주고 있다.








4. RIDI (리디북스)

https://ridi.design


리디도 다른 스타트업과 마찬가지로 프로젝트가 있을 때마다 새로운 디자인과 개발을 했을 것이다. 그럴 때마다 일관된 디자인을 유지하기 어렵고 종종 불필요한 커뮤니케이션이 생긴다는 문제의식이 생기며, 자연스럽게 디자인 시스템에 대한 니즈로 이어졌을 것이다.


사이트 디자인은 전반적으로 콘텐츠 내용 전달에 중요한 가독성을 우선으로 하였고, 명확한 아이덴티티 표현을 중점으로 다른 디자인 요소는 최소화하여 작업되었다.



리디의 디자인 공통 원칙







5. UBER (우버)

https://brand.uber.com/kr/ko/


우버는 브랜드 시스템을 발표하며 본인들의 시스템을 이렇게 정의했다.


전 세계 사용자와 함께 만들고, Creative 팀과의 현장 테스트 거친 우리의 브랜드 시스템은 간결하고, 유연하며, 누구나 쉽게 인지 가능합니다.


어찌 보면 당연한듯한 이 말엔 디자인 시스템을 향한 그들의 자부심이 담겨있는 듯하다.

전 세계 어느 사용자라도 쉽게 우버를 인지하고, 사용하고, 사랑할 수 있다는 듯이 말하고 있기 때문이다. 2018년 리브랜딩을 발표한 후 진정한 우버만의 색깔을 만들어가는 그들이 부럽기도 하면서 스스로 자극이 되는 시스템이었다.



브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari