사이트맵이란 사용자가 특정 웹사이트에서 원하는 서비스를 한눈에 찾을 수 있도록 링크를 정리한 화면을 의미합니다. 검색에서도 중요한 역할을 하지만, 기획과 디자인 과정에서의 사이트맵은 우리 서비스의 전체 메뉴를 한눈에 볼 수 있도록 도와주는 역할을 합니다. 오늘 소개하는 ‘flowmapp’은 사이트맵을 쉽게 생성하고 관리할 수 있도록 도와주며, 업무 진행 상태 입력은 물론 간략한 와이어프레임 제작 기능도 지원합니다.

iOS 디바이스별 정보는 앱을 만들 때 꼭 필요한 정보임에도, 제대로 정리된 곳이 없어서 늘 아쉬움이 있었는데요. 이번 글에서는 iOS 디바이스를 기준으로 모델별 기본 스펙은 물론, 아이콘과 위젯 등의 사이즈를 쉽게 확인할 수 있도록 도와주는 ‘Screensizes’에 대해 소개하고자 합니다.

오늘은 플러그인은 아니지만 피그마와 밀접하게 연관된 ‘figr.design’에 대해 소개하고자 합니다. ‘figr.design’은 실제 사용되는 서비스의 화면을 유형에 따라 탐색할 수 있으며, 이를 복사해 피그마에서 그대로 편집할 수 있도록 도와주는 곳입니다.

로티(Lottie)는 JSON 기반의 애니메이션 파일을 실시간으로 렌더링 하는 방법을 활용하고 있으며, 벡터 방식으로 구성되어 있어 아무리 확대해도 깨지지 않는 장점을 갖고 있습니다. 또한 용량이 작고 해상도 저하가 없으며 개발 시 상대적으로 쉬운 적용이 가능합니다. 오늘 소개하는 ‘Lottielab’은 이러한 로티 기반의 파일을 편집하거나, 새로운 애니메이션을 손쉽게 만들 수 있도록 도와주는 서비스입니다.

일러스트는 단순 이미지 보다 더 구체적인 상황과 정체성을 담아 표현할 수 있어, 많은 서비스와 제품, 문서 등에 활용되고 있습니다. 다만 다른 이미지와 달리 상대적으로 개인이 만들기엔 난이도가 높은 편이라, 이미 완성된 일러스트를 활용하는 경우가 많았는데요. 오늘 소개할 ‘Illustration Kit Editor’는 입맛에 따라 여러 일러스트를 조합, 구성할 수 있는 곳입니다. 이미 만들어진 사람, 사물 등의 일러스트를 컬러, 대상, 구성 요소에 따라 편집할 수 있습니다.

최근에 웹상에서 다양한 아이콘을 제공하고, 이를 편집해 코드나 파일 등으로 내려받아 활용할 수 있는 곳을 찾았습니다. 오늘 소개할 ‘Iconbuddy’인데요. 18만 개가 넘는 아이콘과 150여 개의 세트를 제공하는 곳으로 필요한 아이콘을 검색해, 컬러와 스타일 등을 변경하여 활용할 수 있습니다.

디자이너라면 개발 전 와이어프레임을 만들어 보셨을 텐데요. 쉽게 말해 아이디어 출발점이라고도 할 수 있는데, 이 내용을 다시 디자인이라는 작업을 거쳐 서비스에서 볼 수 있는 화면으로 만드는 과정입니다. 다만 디자인 툴을 통해 아이디어를 구체화하거나 화면을 만들 수 있고, 하나의 화면을 설계하더라도 여러 구성요소를 고려하기 때문에 더 어렵게 느껴질 수 있습니다. 이러한 어려움을 해결하고자 시작된 서비스가 오늘 소개할 ‘Uizard’입니다. ‘Uizard’는 손으로 그린 와이어프레임을 디자인 파일, 코드로 변환시켜 주는 역할을 합니다.

그라데이션은 하나의 색이 아닌 두 개 이상의 컬러가 점진적으로 변화되는 모습을 의미합니다. 그라데이션의 경우 역동적이고 자유로운 모습을 표현하고, 속도감 있는 움직임을 보여줄 수 있다는 점에서 여러 서비스는 물론 그래픽 작업에도 자주 사용되고 있습니다. 오늘 소개할 ‘CSS HD Gradients’는 2개 이상의 컬러를 조합, 원하는 스타일과 각도 등을 활용해 그라데이션을 웹상에서 쉽게 생성할 수 있는 서비스입니다. 특히 그라데이션을 빠르게 적용하고 싶지만, 별도의 툴을 학습해야 한다는 어려움이 있을 때 좋은 선택지가 될 것입니다.

2022년 10월, 마이크로소프트는 ‘디자이너’라는 서비스를 공개했습니다. 서비스명부터 디자이너가 포함된 이 서비스는 프레젠테이션, 엽서, 포스터, 초대장 등 다양한 그래픽을 위한 디자인 생성해 주며, 국내에도 많은 사용자를 보유하고 있는 캔바(Canva)와 유사한 웹 앱입니다. 주목할 만한 점이 있다면 서비스가 모두 인공지능(AI)으로 구동된다는 점으로, 사용자가 만든 콘텐츠와 OpenAI의 텍스트/이미지 생성 AI인 ‘DALL-E 2’를 활용하여 디자인 작업이 가능합니다.

다섯 가지 구성요소를 활용해, 유저 인터페이스(UI) 구성과 그에 따른 코드를 생성할 수 있는 ‘Shaper’를 소개합니다. ‘Shaper’에서 제공하는 핵심 기능은 1) 타입, 컬러, 여백, 테두리 등에 포함되는 세부 값을 입력 또는 원하는 조건을 선택해 일정 기준의 인터페이스 구성 가능 2) 기본 제공되는 인터페이스를 테마에 따라 변경한 뒤 상세 조건을 추가하거나 설정해, 원하는 모습의 인터페이스 제작 가능 3) 컬러, 여백, 테두리 등 다섯 가지 구성요소 중 하나를  선택해 인터페이스 랜덤 생성 가능 4) 생성한 인터페이스를 웹상에서 빠르게 확인할 수 있는 코드 제공 등이 있는데요. 지금부터 자세히 살펴보겠습니다.