기본 아이콘을 직접 제작해 활용할 수 있으면 좋지만, 스타트업이나 사이드 프로젝트에서는 이런 환경을 갖추지 못할 때가 종종 발생합니다. 그렇다고 이곳저곳에 올라온 기본 아이콘을 쓰기에는 일관성 있는 스타일이 아니라 마음에 들지도 않고요. 오늘은 280여 개 기본 아이콘을 3가지 스타일에 따라 확인하고 각각 SVG, JSX 포맷으로 복사해 활용할 수 있는 곳을 소개하고자 합니다. 특히 피그마 파일을 별도로 지원해 피그마에서 자유롭게 사용할 수 있는 점이 특징입니다. 바로 ‘heroicons’입니다.

디지털 디자인의 세계에서, 인터랙션 디자인과 시각 디자인 둘 다 사용자 경험을 강화하는 데 있어 중요합니다. 이들은 웹과 모바일 애플리케이션 등의 디지털 플랫폼에서 주로 사용됩니다. 또한, 이 둘은 사용자가 디지털 플랫폼에 참여할 수 있도록 기술을 사용자의 직관, 그리고 미적 요소와 함께 효과적으로 혼합합니다. 그러나 각 디자인은 서로 다른 방식으로 이를 가능하게 합니다. 우리는 이번 글에서 우선 인터랙션 디자인과 시각 디자인의 정의와 원리에 대해 설명할 것입니다.

디자이너가 새 회사나 프로젝트에 지원하기 위해 포트폴리오를 만드는 것은 정말 중요하면서도 생각보다 쉽지 않은 일입니다. 저는 운 좋게도 채용이라는 과정의 양단을 경험해봤습니다. 일을 구하는 디자이너였던 적도 있고, 작은 팀의 리더로서 실력 있는 디자이너를 채용하는 담당자였던 적도 있죠. 이런 경험을 통해 채용에 관해 두 가지 관점을 가지게 되었고, 관련한 실용적인 팁을 여러 개 모을 수 있었습니다. 그리고 이 글에서 제가 가진 팁을 아낌없이 소개하려 합니다.

사용자의 60% 정도가 처음 2개의 스크린샷을 확대하거나 자세히 살펴보지 않습니다. 바꿔 말하면 첫 번째와 두 번째 스크린샷으로 시선을 사로잡지 못하면 이후 스크린샷은 사용자에게 도달하지 못할 가능성이 높습니다. 그래서 최근 앱에서는 초반에 사용자의 시선을 사로잡기 위해 파노라마 스크린샷을 보여주거나 가로형 그래픽을 활용하는 일이 많습니다. 첫 스크린샷을 영상으로 보여주는 노력은 모두 상세페이지 진입 후 설치 전환을 높이기 위한 노력이라고 볼 수 있습니다.

오늘은 피그마의 레이아웃 툴인 Autolayout과 Constraint를 활용해 반응형 UI 디자인 방법을 설명할 예정이다. 두 기능이 의미 있는 이유는 이를 통해 개발자의 코드와 유사한 원리로 화면을 기획할 수 있기 때문이다. 디자인이 실제로 잘 구현되기 위해서는 디자이너가 어떤 체계와 의도로 화면을 구성했는지 개발자에게 명확하게 전달할 수 있어야 한다. 레이아웃의 크기나 콘텐츠의 변화에 따른 모든 케이스를 화면으로 전부 그리거나 글로 설명하지 않아도 Autolayout과 Constraint 기능으로도 충분히 할 수 있다.

과거에 비해 현재 우리가 접하고 있는 브랜딩은 어떻게 달라졌을까? 또한 시장에서 사용자들이 인지하는 브랜딩의 의미는 어떻게 달라졌을까? 이제 다음 세대의 브랜딩을 제시할 기업은 어디일까? 눈에 띄는 브랜딩을 통해 사용자들과 맞닿아 있는 한국 IT 스타트업의 2가지 서비스를 브랜드 디자이너의 눈으로 살펴보고자 한다.

오늘 인터뷰의 주인공은 IT 건축 플랫폼 ‘하우빌드’의 최성우 디자이너입니다. 하우빌드는 2003년 설립된 기업으로 건축 수요자와 공급자 간 정보 불균형이 발생하는 건축 시장에서 시장 참여자를 돕는 IT 플랫폼을 개발 및 운영하고 있습니다. 특히 각종 건축 데이터를 활용해 합리적인 건축이 될 수 있도록 돕고 있습니다.

무료 스톡 이미지 제공 사이트의 작은 문제가 있다면 워낙 많은 사람이 사용하고 있어 종종 동일한 이미지를 함께 사용하는 경우가 발생한다는 점인데요. 저 역시 헤더 이미지를 이곳에서 다운로드하여 적용했는데 유사 서비스에도 같은 이미지가 적용된 것을 보고 얼른 교체했던 경험이 있습니다. 그래서 대체할 수 있는 곳을 찾기 위해 노력했고, 드디어 음식, 사람, 스타트업 등 세 가지 특정 분야에 관한 스톡 이미지를 제공하는 각각의 사이트를 발견했습니다. 지금 바로 소개하겠습니다!

이번 편에서는 그다음 단계인 ‘컴포넌트(Component)’를 만드는 방법을 소개할 예정이다. 컴포넌트는 단어의 의미 그대로 화면의 구성 요소를 가리키며, 여러 컴포넌트를 조합해 하나의 UI를 이룬다. 이때 버튼(Button), 스위치(Switch 혹은 Toggle), 카드(Card), 텍스트필드(Text field)처럼 반복적으로 쓰이는 주요 컴포넌트를 미리 디자인 에셋으로 저장해두면 UI 제작 시 많은 시간을 단축할 수 있다.

서비스를 운영하면서 우리가 특정한 몇 개의 컬러와 잘 어울리는 색을 찾는 건 어려운 일입니다. 저는 이럴 때 주로 컬러 조합을 쉽게 생성할 수 있는 서비스를 활용하고 있는데, 오늘 살펴볼 ‘Reverb’ 서비스도 앞선 어려움을 조금이나마 줄여주는 컬러 조합 서비스입니다. 이곳이 매력적인 이유는, 컬러는 물론 그라데이션 생성에도 도움을 받을 수 있으며 이미지를 통한 컬러 추출과 특정 컬러를 검색한 뒤 어울리는 색을 찾을 수 있는 환경을 제공하기 때문입니다. 이번 글에서 자세한 기능을 알아보겠습니다.