화면 캡처는 스마트폰은 물론 노트북이나 PC로 업무를 할 때 생각보다 자주 사용하는 기능입니다. 그래서 캡처를 더 편리하게 도와주는 서비스, 캡처 후 태그 등을 붙여 관리하는 서비스, 캡처된 이미지를 편집할 수 있는 서비스 등을 다양하게 만나볼 수 있습니다. 그중에서도 오늘은 캡처와 동시에 이미지를 편집할 수 있는 서비스를 소개하고자 합니다. 캡처한 이미지를 바로 꾸며야 하거나, 다른 디자인 툴을 사용하는 것보다 빠른 작업이 필요하다면 유용하게 사용할 수 있는 ‘Xnapper’입니다.

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

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

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

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

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

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

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

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

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