올해는 브랜드 디자이너로서 운이 좋았다. 다니던 디자인 회사를 그만두고, 브랜딩을 전문으로 하는 회사에 합류했다. 혼자 일하던 방식을 깨고 좋은 동료들과 함께 성장할 수 있었다. 또한 안경 브랜드부터 반려동물, 테라피, 코스메틱 브랜드 그리고 가수 브랜딩까지 다양한 프로젝트를 경험했다. 더불어 브랜딩이라는 세계에 스스로를 던져 치열하게 발버둥 쳤던 한 해였다. 열심히 일한 만큼 많은 것을 배울 수 있었다. 브랜드 디자이너로서 올해 어떤 것들을 배웠는지, 한 해를 회고하며 인사이트를 정리해보고자 한다.

디자인 시스템은 디자인 원칙과 규격, 재사용할 수 있는 UI 패턴과 컴포넌트, 코드를 포괄하는 시스템을 말한다. 디지털 제품 개발 환경에서 이러한 디자인 시스템은 점점 더 중요해지고 있다. 오늘은 필자가 2020년 2월부터 약 2년간 고군분투하며 디자인 시스템을 설계하고, 구축해온 과정에 대해 적어보려 한다. 지난 1편에 이어, 오늘은 디자인 시스템의 목표와 원칙 수립, 모듈 시스템 등을 살펴보자.

패턴은 웹사이트 주요 화면 배경으로 활용하는 것도 가능하며, 문서의 표지나 레이아웃 제작 등에 쓸 수 있어, 활용도가 상당히 높습니다. 다만 직접 제작하려면 번거로운 과정을 거쳐야 하며, 별도의 툴을 학습하거나 사용해야 한다는 문제가 있습니다. 오늘 소개할 ‘more.graphics’는 몇 번의 클릭으로 조건에 맞는 디자인 패턴을 생성할 수 있는 서비스로, 하나의 패턴이 아니라 여러 종류의 다채로운 패턴 생성이 가능해, 상황에 따라 유용하게 쓸 수 있는 곳입니다.

디자인 시스템은 디자인 원칙과 규격, 재사용할 수 있는 UI 패턴과 컴포넌트, 코드를 포괄하는 시스템을 말한다. 디지털 제품 개발 환경에서 이러한 디자인 시스템은 점점 더 중요해지고 있다. 그래서 2020년 2월부터 필자가 약 2년간 고군분투하며 디자인 시스템을 설계하고, 구축해온 과정에 대해 정리해 보고자 한다. 이번 1편에서는 디자인 시스템을 만들기로 결심한 배경과 디자인 시스템이 필요한 이유 등을 알아보고, 이어지는 2, 3편에서는 디자인 시스템의 목표와 원칙, 정기 미팅, 타이포그래피와 프로젝트 관리 등에 대해 살펴볼 예정이다.

카피라이팅으로 유명한 많은 브랜드가 있지만, 빼놓을 수 없는 카피라이팅의 강자는 애플이 아닐까 싶습니다. 그런데, 이런 애플의 카피라이팅 텍스트를 보고 있으면 한가지 특별한 점이 눈에 띕니다. 바로 모든 문장에 ‘마침표’가 찍혀 있다는 것인데요. 심지어는 문장이 아닌 어절 단위에도 마침표가 찍히기도 합니다. 텍스트의 형태를 가리지 않고 등장하는 애플의 마침표, 대체 애플은 왜 마침표를 사랑하는 걸까요?

간혹 직관적으로 이해된 시각화가 부정확한 정보를 전달하기도 하고, 시각적으로 오해를 불러일으키기도 합니다. 그 때문에 우리는 이러한 문제점이 왜 일어나는지 이해하고, 데이터 시각화를 정확하게 판단하며 볼 수 있는 눈을 길러야 합니다. 이번 글에서는 실생활에서 쉽게 접할 수 있는 사례들을 이용하여, 데이터 시각화를 이용한 거짓말을 어떻게 발견할 수 있는지 살펴보겠습니다.

오늘은 자바스크립트 라이브러리 중 가장 인기 있는 리액트(React)에 대해 자세히 살펴보겠습니다. 이 글을 통해 여러분이 디자이너로서 리액트에 대해 더 알아가길 바랍니다. 또한 리액트를 이해함으로써 더 나은 디자인 능력을 함양하고, 엔지니어와 원활하게 소통하는 데 도움이 될 수 있습니다. 굳이 코드 작성법까지 배우는 것이 아니라, 코드에 더 익숙해지기만 해도 충분합니다.

처음 Coolors를 알게 된 건 2017년으로 당시 ‘색 조합, 구성에 도움을 주는 서비스 7’ 중 하나로 개인 블로그에 소개했던 기억이 납니다. 그땐 서비스의 기능이 다섯 개의 컬러를 바탕으로 나만의 색 구성을 찾는데 초점이 맞춰져 있었는데요. 모바일 웹에도 최적화된 서비스를 제공해 사용성을 높인 것이 가장 큰 매력이었습니다. 그로부터 5년이라는 시간이 흘렀고, 얼마 전 2.0 버전으로 업데이트되며 컬러와 연관된 더 많은 기능을 제공하기 시작했습니다. 오늘 소개할 ‘Coolors’에서 컬러 조합이라는 핵심 기능을 비롯해, 어떤 추가 기능을 활용할 수 있을지 살펴보고자 합니다.

저는 사이드 프로젝트나 문서 작성을 위해 아이콘 제공 서비스, 플러그인 등을 즐겨찾기 하거나 미리 설치해놓고 자주 활용하는 편입니다. 아이콘을 직접 제작할 여유가 없는 상황에서 원하는 아이콘을 빠르게 찾아 적용하기 좋은 방법이기 때문입니다. 얼마 전, 웹상에서 기본 아이콘을 바탕으로 배경 컬러나 다양한 효과를 적용해 아이콘을 제작할 수 있는 ‘Iconray’ 서비스를 발견해, 오늘 소개하고자 합니다.

데이터를 시각화하여 전달하면 우리의 뇌는 빠른 속도로 많은 양의 정보를 처리할 수 있고, 데이터 테이블에 비해 트렌드나 패턴, 아웃라이어 등을 쉽게 파악할 수 있습니다. 때문에 데이터를 쉽게 이해하고 데이터를 기반으로 한 의사결정에 도움을 줍니다. 하지만 모든 데이터 시각화가 쉽고 직관적으로 이해되지는 않습니다. 그 이유는 무엇일까요? 바로 데이터에서 발견한 정보가 시각 요소로 적절하게 디자인되지 않았기 때문입니다. 이번 글에서는 우리의 뇌가 시각 정보를 처리하는 과정을 이해하고, 직관적인 데이터 시각화를 만드는 방법에 대해 살펴보겠습니다.