이번 편에서는 실제 디자인 작업을 할 때, 불필요한 시간을 줄이고 사용성과 디자인에 더욱 신경을 쓸 수 있도록 도와주는 디자인 툴과 플러그인을 소개합니다. 다양한 디자인 툴은 저마다의 장단점이 있기 때문에 개인 상황과 환경을 고려해 선택하시면 됩니다.

오늘 소개할 서비스는 전 세계 다양한 디자인 시스템을 기반으로 활용 가능한 컴포넌트를 종류에 따라 확인할 수 있는 ‘The Component Gallery’입니다. 원하는 컴포넌트 중 특정 케이스를 선택하면 해당 디자인 시스템으로 이동, 예제를 확인하고 적용할 수 있습니다.

날마다 다양한 애플리케이션(이하 앱)이 출시되고 있습니다. 각자가 다른 개성과 스타일의 디자인을 가져서, 디자인 작업을 위한 레퍼런스 확보를 위해 많은 앱 서비스를 둘러볼 때마다 막막하게 느껴집니다. 그래서 앱 디자인을 위한 준비부터 실제 디자인을 위한 준비 팁을 정리해 보았습니다.

현재 IT 업계에서는 서비스를 만드는 데 중요한 역할을 하는 프로덕트·브랜드 전반을 두루 다룰 수 있는 프로덕트 디자이너와 브랜드 디자이너가 주로 필요합니다. 여기에 서비스의 성격과 성장 단계에 따라 디자이너의 역할이 세분화되고 있습니다. 그럼 지금부터 2022년, 올해에는 어떤 디자인 직무가 있는지 정리해 보겠습니다.

디자인한 내용을 퍼블리싱 했을 때 발생하는 문제를 우리는 자주 접하게 됩니다. 오늘은 이런 불편을 상대적으로 덜 겪을 수 있는, 퍼블리싱 전 화면 구성 내용을 미리 확인하고 살펴볼 수 있는 서비스 ‘셰이퍼(Shaper)’를 소개하고자 합니다.

웹 접근성은 다양한 사용자를 고려, 웹사이트에서 제공하는 정보를 차별과 제한 없이 동등하게 이용할 수 있도록 보장하는 것을 의미합니다. 국내에서는 한국형 웹 콘텐츠 접근성 지침을 제공하고 있으며, (웹 접근성 연구소) 국제적으로 W3C의 WCAG라 불리는 접근성 가이드를 표준으로 활용하기도 합니다. 다만 가이드에서 제공하는 모든 내용을 다 숙지하고 하나씩 반영하기는 쉽지 않은데요. 그래서 오늘은 체크리스트 형태로 접근성에 해당하는 항목을 보다 쉽게 확인하고 적용할 수 있도록 도와주는 웹서비스 'The A11Y Project를' 소개하고자 합니다.

최근 웹 기획으로 넘어오면서 인터페이스 요소들을 살펴볼 일이 많아졌고, 헷갈리는 용어들이 눈에 밟히기 시작했다. 이미 알고 있는 용어가 어떤 회사에서는 다른 단어로 대체되어 쓰이거나, 줄여서 편하게 부르는 등 기획안이나 정책서를 보고 있으면 눈앞이 빙글빙글 돌아갈 때가 많다. 같은 이유로 고민하는 주니어들이 쉽게 따라갈 수 있도록, 기획자들이 알아야 할 기본적인 UI 용어들을 정리해 보았다.

오늘 소개할 'Shape'은 매번 다른 곳에서 비슷한 맥락의 아이콘을 찾기 어려운 상황, 취향에 맞게 수정하기 위해 많은 시간을 투자하는 것을 개선하고자 만든 서비스입니다. 현재는 애플은 물론 페이스북, 에어비앤비, 구글 등에서도 사용하는 웹서비스입니다. 'Shape'에서는 상황 별 아이콘과 일러스트(GIF 포함)를 원하는 컬러 조합, 크기, 움직임 등에 따라 편집해, 동일한 스타일의 여러 결과물을 동시에 내려받을 수 있습니다. 지금부터 관련 기능을 하나씩 살펴보겠습니다.

컴포넌트(component)란 무엇일까? 상호작용하는 기본적인 형태로 기능을 수행할 수 있는 최소 단위를 말한다. 이번 글에서는 기업(라인, 구글, 애플)의 디자인 시스템 문서를 살펴보며, 서비스에서 자주 사용되는 컴포넌트에 대해 알아볼 것이다. 먼저 구글의 머티리얼 디자인과 애플의 휴먼 인터페이스 가이드라인에서 용어가 달라 헷갈릴 수 있는 내비게이션 바와 탭 바를 살펴본 후, 대부분의 앱에서 사용되고 있는 툴팁과 칩에 대해 알아보자.

디자인 전에 작성 완료된 기획안과 스토리보드를 모두 검토하는데 버튼의 위치가 내가 해왔던 패턴과 다르게 정의되어 있었다. 기획자에게 미팅을 요청해 그 부분에 대해 설명을 듣고 싶었다. 그렇게 기획자의 자리로 찾아가 가볍게 리뷰하는 시간이 시작됐다. "버튼의 위치가 이게 맞는 건가요?"라는 내 질문에 기획자는 그 위치가 맞다는 답변을 했다. 하지만 내가 보기에는 생소한 위치였다. 그럼 왜 그 위치가 맞는지 설명을 해달라고 했고 기획자는 그에 대한 이유를 설명하기 시작했다.