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

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

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

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

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

저는 업무를 할 때 아직도 화이트보드를 즐겨 활용하고 있습니다. 선이 그어진 노트보다 자유도가 높고, 팀원들과 함께 의견을 나누며 실시간으로 시각화하거나, 유사한 내용끼리 그룹화하는 작업이 쉽기 때문입니다. 이런 장점으로 인해 미로, 피그잼 등 화이트보드를 콘셉트로 한 다양한 서비스가 등장했고, 실제로 많은 사람들이 사용하고 있습니다. 오늘은 피그잼과 미로에 비하면 기능은 부족할 수 있지만, 기획 또는 디자인 프로젝트를 준비할 때 가볍고 자유롭게 사용할 수 있는 캔버스 ‘Easel’ 서비스를 소개합니다.

사용자 리서치에서 가장 해결하기 어려운 난제는 무엇일까? 그것은 바로 리서치에 대한 잘못된 이해다. 대표적인 잘못된 이해는 다음과 같다. 인터뷰에서 참여자들은 진실을 말한다. 참여자들이 말한 내용이 곧 우리가 추출한 인사이트다. 이러한 인식은 실제 인터뷰 환경에서 두 종류의 심리 현상을 일으킨다. 하나는 프로덕트 디자이너에게, 다른 하나는 인터뷰 참여자에게 발생하는 데 이는 인터뷰에서 얻게 되는 데이터의 신뢰도를 떨어뜨리기 때문에 치명적이다. 이 두 현상이 바로 오늘 이야기할 ‘더닝-크루거 효과’와 ‘호손 효과’다.

5초 테스트는 참가자들에게 웹페이지나 모바일 화면 이미지를 5초간 보여준 후, 방금 본 내용에 대해 질문하는 테스트입니다. 이러한 5초 테스트의 목표는 사용자가 기억하는 내용을 평가하여, 해당 디자인이 의도한 메시지를 제대로 전달하고 있는지 파악하는 것입니다.

버튼은 합의된 디자인 문법을 통해 사용자의 상호작용을 효과적으로 유도하고, 페이지와 페이지를 연결하도록 돕는 아주 중요한 컴포넌트입니다. 그런데 사실 버튼은 ‘눌러라!’라는 메시지 말고도, 더 많은 것들을 사용자에게 이야기해줍니다. 이번에는 버튼이 사용자에게 목소리를 내는 사례에 대해서 정리해봤습니다.

이미지 속 특정 위치에 대한 피드백이나, 여러 팀원이 다양한 이미지 후보 등을 놓고 적합한 것을 선정하는 등의 과정을 한 곳에서 진행, 확인하며 관리하는 데에는 어려움이 따를 수밖에 없습니다. 그래서 오늘은 프로젝트를 생성한 뒤 이미지를 중심으로 다양한 피드백을 주고받으며, 쉽게 내역을 확인하고 관리할 수 있는 ‘Picflow’ 서비스를 소개하고자 합니다.