본 가이드는 피그마(Figma)의 토큰(Figma Tokens) 플러그인을 통해 쉽게 확장하고 깃허브(GitHub)와 동기화할 수 있는 디자인 시스템을 구축하는 방법을 안내합니다. 하나 이상의 브랜드나 테마 디자인 시스템을 작업할 때 테마의 모든 요소를 몇 가지 선택지로 압축할 수 있다는 것은 축복에 가깝습니다. 색상 참조를 업데이트하는 것이 믿을 수 없이 쉬워지며, 커넥터를 변경하는 것만으로 새로운 테마와 브랜드를 생성할 수 있습니다.

애플리케이션(이하 앱)을 기획할 때 바로 화면을 그리려 하다가 잠시 멈췄던 적, 한 번 정도는 있으실 거라고 생각합니다. 저도 서비스 이용 흐름에 필요한 콘텐츠를 어떻게 논리적으로 엮어야 하는지 고민했던 적이 있는데요. 지금 비슷한 어려움을 겪는 중이시라면 이 ‘정보구조’에 대한 글이 도움될 것 같습니다. 이번 글에서는 정보구조가 무엇이며 대표적인 구조에는 어떤 것들이 있는지 알아보겠습니다.

스케치(Sketch)와 피그마(Figma)[1]에서 큰 고민 없이 픽셀(Pixel, 줄여서 px)을 사용하고 있나요? 저 역시 한때 그랬습니다. 제가 팀에 처음 합류했을 때 모두가 당연한 듯 픽셀을 사용하고 있었습니다. 문제가 있었다면 진작에 바꿨을 텐데 계속 사용하는 이유가 있지 않을까요? 게다가 아직도 우리 곁에는 픽셀 단위까지 자로 잰 듯한 디자인을 뽑아내는 완벽주의자들이 있습니다. 과연 이들이 맞는 걸까요? 지금부터 한 번 알아보도록 하겠습니다.

프로토타입은 실제 ‘개발'을 시작하기 전, 프로젝트에 직∙간적접으로 참여하는 사람들이 모여 각 화면 단위 내용을 합의하기 위한 과정에 주로 사용됩니다. 오늘은 프로토타입 중 페이퍼 프로토타이핑에 해당하는 핸드 스케치 단계에서 도움이 되는 서비스 ‘Printables’와 ‘Sneakpeekit’ 2곳을 소개하고자 합니다.

이번에 설명할 내용은 바로 손이 움직이는 구체적인 내용이다. 내 아이디어를 상대방에게 쉽게 전달하기 위해서 다듬는 시간을 지난 것이다. 이제는 그 사람의 머릿속에 구체적으로 디자인을 집어넣을 수 있어야 한다.

다양한 웹 레퍼런스를 찾아 디자인 컨셉을 잡았다면 이제 실제 디자인 작업을 할 때입니다. 모바일 디자인 팁에서 설명했던 디자인 툴을 참고해서 작업 환경과 취향에 맞는 툴로 디자인 작업을 할 때, 시각적인 아름다움 외에도 쉽게 깜빡할 수 있는 점을 살펴보겠습니다.

컬러는 디자인을 구성하는 가장 중요한 요소 중 하나입니다. 사용한 컬러에 따라 서비스 분위기가 전혀 달라질 수 있기 때문입니다. 중요한 건, 메인 컬러로 사용될 색과 어울리는 조합을 찾는 것입니다. 이 과정은 몇 번의 경험이 쌓여도 여전히 어렵게 느껴집니다. 오늘은 메인으로 사용되는 컬러를 중심으로 상황에 따라 6가지 조합을 쉽게 생성할 수 있는 서비스 ‘Atmos’를 소개하고자 합니다.

어도비의 인기 소프트웨어는 보통 포토샵을 떠올린다. 그렇지만 디자이너가 아니더라도 디자인 일을 해야 하는 실무자들 사이에서는 포토샵 못지않게 많이 쓰이는 제품이 있으니 바로 ‘일러스트레이터’이다. 자칭 타칭 일러스트레이터 애호가(?)로서 왜 이 제품을 써야 하는지 그 장점들을 설명해 보고자 한다.

게슈탈트 이론이란 20세기 초 막스 베르트하이머, 볼프강 퀼러 그리고 크리스찬 폰 에렌펠스가 인간의 행동을 자극-반응의 연합으로 환원하려는 행동주의적 접근에 반발하며 창시한 이론으로써, 형태심리학(또는 형태주의)이라고도 합니다. 이 이론은 원래 시지각을 설명하려는 목적에서 만들어졌지만 '전경과 배경의 원리'와 같은 법칙들은 청각이나 후각과 같은 다른 감각들에도 똑같이 적용될 수 있습니다. 그럼 이제부터 게슈탈트 심리학의 대표 원리들을 하나하나 살펴보겠습니다.

웹 페이지를 기획, 디자인할 때 많은 시간 고민해야 하는 건 ‘구성(레이아웃)’입니다. 각 화면 단위 어떤 내용을, 어떻게 배치하고 구성해야 방문한 사람들을 서비스가 원하는 행동으로 이끌 수 있는지 결정되기 때문입니다. 그래서 오늘은 랜딩, 소개, 가격 정책 등 화면 단위에 따라 다양한 레이아웃을 미리 확인, 필요한 구성을 빠르게 찾을 수 있도록 도와주는 서비스 ‘Shuffle’을 소개하고자 합니다.