🔥 업무 생산성이 높아지는 생성형 AI 그래픽/UI 편

지난 뉴스레터를 아직 보지 못하셨다면, 아래 링크를 통해 확인해주세요!

👀 오늘 소개할 서비스 4

1. Khroma

첫 번째로 소개할 서비스는 AI 알고리즘을 통해 색상 팔레트를 생성해주는 ‘Khroma’ 입니다.

팔레트를 만들어주는 서비스는 기존에도 많았기에, AI로 추천해주는 팔레트는 어떤 차별점이 있는지 궁금했는데요! 크로마의 가장 큰 장점은 내가 선택한 색상을 기반으로 최적화된 색상 조합을 무한정으로 추천해준다는 점이었어요.

서비스 첫 화면에서 'Get started' 버튼을 누르면 학습시킬 컬러를 선택하는 화면이 나오는데, 최대 50가지의 색상을 선택할 수 있어요. 다양한 색상, 명도 및 채도를 선택할 수록 더 많은 조합을 얻을 수 있다고 해요. 실제로 너무 적은 수의 컬러를 선택하면 학습이 잘 안되더라구요!

알고리즘 기반으로 크로마가 추천해 준 컬러 조합 중 일부를 가져와봤어요. 조합별로 색상 이름, 16진수, RGB 값, CSS 코드 및 WCAG 접근성 등급도 확인할 수 있습니다. 기본적으로 텍스트와 배경의 조합으로 컬러 매치를 보여주고 있는데, 이외에도 Poster, Gradient 등으로도 확인할 수 있어요.

추천해준 컬러가 마음에 들어 고양이 헌정 그래픽을 만글어봤어요. (나만 고양이 없죠? 🐱)

고양이 그래픽은 아래에 소개할 Recraft로 생성했어요. 직접 써보니 2가지 컬러 이상이 섞인 팔레트는 정확도는 높지만 컬러의 조화로움이 약간 부족하다는 느낌을 받았는데요, 아무래도 4가지 색상의 팔레트를 구성할 때는 사람의 안목이 포함되어야 할 듯해요. 그렇지만 아직 베타 버전이기 때문에 앞으로 더 취향에 기반한 완성도 높은 컬러 조합을 기대해 봐도 좋을 것 같습니다. 아, 선택값은 로컬 저장소에만 저장되고 json 파일로 다운로드할 수 있어요. 참고해 주세요!

Khroma 자세히 보기

2. Recraft

두 번째로 소개할 서비스는, 벡터 일러스트 생성을 도와주는 Recraft 입니다.

앞선 편에서 다양한 이미지를 생성할 수 있는 AI 서비스를 여럿 소개했는데요, Recraft가 가진 장점은 이미지를 생성하는 것에 그치지 않고, 편집 도구를 활용해 캔버스 내 이미지를 다듬고 추가로 디자인할 수 있다는 점이에요. 여타 생성형 AI들처럼 이미지 해상도를 높이고, 일부를 수정하는 것도 당연히 가능해요. 게다가 결과물을 벡터화하는 기능까지 지원하고 있어요.

리크래프트는 사용해보니 디지털 일러스트레이션, 3D 그래픽, 아이콘까지 다양한 그래픽 작업에 유리한 툴이었어요. 바로 확인해볼까요?

프롬프트를 통해 피카소풍의 초상화를 만들어보았어요. 생성된 이미지를 선택하고 Recraft 하면, 기존 이미지를 자동으로 학습해 다음 결과물을 만들어주고, 아예 새로운 프롬프트로 캔버스 내에 여러 개의 이미지를 만들 수도 있어요.

생성한 이미지의 컬러를 바꾸고 텍스트를 추가해보았어요. 마음에 드는 결과물은 SVG로 바로 다운받아 다른툴에서 편집이 가능하다는 점도 매력적이었어요. (lottie 파일도 지원하고 있어요)

팔레트 컬러를 지정하면 일관되고 정확한 색상의 이미지를 얻을 수 있어요. 아직 디테일한 표현까지는 미흡하지만, 실제 작업물에 활용해도 될만큼 일관적인 톤앤매너의 결과물을 생성해주고 있네요! 물론 생성된 이미지는 자유롭게 상업적으로 사용이 가능해요.

리크래프트 자세히 보기

3. Visily

세 번째로 소개할 서비스는 스크린샷, 스케치 등을 활용해 화면을 쉽게 제작할 수 있도록 도와주는 ‘Visily’입니다.

기존의 와이어프레임, 프로토타입 제작 툴은 원하는 내용을 하나씩 채워 넣어 작업하는 경우가 많았는데요. 우리에게 익숙한 방법이지만, 그만큼 시간을 많이 투자해야 한다는 단점도 있었어요. 이런 문제를 해결해 주는 방법으로 AI를 활용하는 와이어프레임 제작 툴이 하나, 둘 나오게 되었고 ‘Visily’는 특정 서비스나 화면의 스크린샷이나 직접 그린 페이퍼 프로토타입에 해당하는 스케치를 업로드하면 바로 편집할 수 있는 환경을 제공하고 있어요.

스크린샷과 스케치 이미지를 업로드하면, 두 개의 화면이 생성되는데요. 하나는 스크린샷을 그대로 화면으로 구현한 모습이며, 또 하나의 이미지는 약간의 차이를 두고 변형해 구현해 줘요. 있는 그대로와 약간 다른 화면을 구현해 바로 편집할 수 있는 환경을 제공하는데 초점이 맞춰져 있어요. 이렇게 스크린샷을 화면으로 제작하면, 화면 속 컴포넌트를 다른 화면에서 활용할 수 있기 때문에 저는 작업 전 참고할만한 스크린샷을 일괄 등록해 활용하고 있어요.

와이어프레임과 프로토타입을 제작하는데 최적화된 툴이기에 AI를 활용한 화면 제작과 별개로 편의를 더해주는 기능도 다양하게 제공하는데요. 1,500여개가 넘는 템플릿이 등록되어 있어 특정 카테고리의 화면을 불러와 바로 작업을 시작할 수 있으며, 다양한 구성요소와 아이콘을 제공해 별도의 플러그인 등을 활용하지 않고도 편집을 쉽게 할 수 있도록 도와줘요. 

그 외, 주요 기능을 살펴보면 아래와 같아요.

곧, 텍스트(명령어)를 바탕으로 화면을 제작할 수 있는 기능과 화면 등에 입력된 텍스트를 보정해주는 기능이 추가될 예정이라고 해요. ’Visily는 현재 누구나 무료로 사용할 수 있으며, 기능 제한이 없어 더 자유롭게 활용이 가능해요.

Visily 자세히 보기

4. uizard

네 번째로 소개할 서비스는 텍스트로 프로토타입, 화면을 생성할 수 있는 ‘uizard’입니다.

전반적인 기능은 세 번째로 소개한 서비스 ‘Visily’와 닮았는데, 여기선 준비 중인 텍스트로 화면 만들기 기능을 이미 ‘uizard에서는 작년 여름부터 업데이트해 베타 버전으로 적용했어요. 놀라운 건, 하나의 화면을 만들어주는 게 아니라 여러 화면을 생성해 준다는 점이에요.

디바이스를 선택하고, 영문 기준 프로젝트와 디자인 스타일 등에 대한 두 가지 내용을 입력할 수 있어요. 저는 일단 어떤 결과를 보여줄까 궁금해서 샘플로 제공되는 내용을 활용했어요.

내용을 입력 후, 생성 버튼을 누르면 1-2분 내 위와 같은 화면을 편집 모드로 살펴볼 수 있어요. (일부 화면은 결제 후, 계정 업그레이드 필요) 완성도보다는 필요한 화면과 대략적인 초기 구성에 대한 기대가 더 컸는데, 어떤가요? 개인적으로 텍스트 입력부터 결과 확인까지 60초 이내에 이 정도 결과물이라면 초기 기획 때 반드시 활용할 것 같아요.

앞서 살펴본 기능은 원하는 스타일과 컨셉에 맞는 화면 전체를 생성하는 방법이고, 생성 후 아직 포함되지 않은 새로운 화면을 개별적으로 생성하는 것도 가능해요. 이 때 역시 텍스트를 입력해(호텔을 예약할 수 있는 화면 등) 특정 화면 5개를 생성할 수 있으며 하나를 선택해 편집 화면에 넣을 수 있어요. ‘uizard’를 잘 쓴다면, 텍스트 입력마으로 필요한 모든 화면의 초기 버전을 빠른 시간 내 만들 수 있겠죠? (다만, 무료 버전은 프로젝트 개수 2개, 프로젝트별 작업 가능한 화면이 5개로 제한)

‘uizard’ 역시 스크린샷, 스케치 등으로 화면 제작 등 다양한 기능을 제공하지만, 제 마음을 사로잡은 기능은 바로 시선 추적 예상 데이터에요. 텍스트로 만든 화면은 물론, 편집 화면에서 작업 중인 모든 화면 단위로 시선이 어떻게 머무르고 움직이게 되는지에 대한 예상 데이터를 확인할 수 있어요. 동일한 목적의 여러 화면을 텍스트로 만들고 예상 데이터를 활용해 최종 시안을 추리는 것도 가능하겠네요.

uizard 자세히 보기

디자인 업무 효율을 높여주는 툴을 만들고 있으신가요? 

📮 광고 및 제휴 문의: https://tally.so/r/wa5WKE

💬 이번 뉴스레터는 어땠나요?

링크를 통해 뉴스레터에 대한 의견을 남겨주세요. 꼭 소개 되었으면 하는 툴도 좋고, 다음에 꼭 다뤘으면 하는 주제도 좋아요! 

팁스터 뉴스레터에서는 프로덕트와 관련된 다양한 주제의 콘텐츠를 발행하고 있어요!

멤버십 콘텐츠 중 '캠핑'편은 무료로 체험하실 수 있어요!

팁스터 에디터와 함께 하는 클럽도 확인해보세요!