UX기획자가 나만 알고 싶은 AI 서비스

Readdy ai

핵심 요약

- 여러 번 활용해보고, 가장 쉽게 활용할 수 있는 방법을 정리한 Readdy ai 사용법입니다.

- 텍스트만으로 Hi-fi 와이어프레임을 그리고, 원하는 부분만 선택해 수정할 수 있다는 점에서 강력한 툴입니다.

- 기획자의 작업 과정을 단축시킬 수 있지만, 기획자의 핵심 역량인 '사람에 대한 이해'와 '소통 능력'이 중요함을 다시 한 번 느꼈습니다.

---

Readdy ai라는 서비스가 있습니다.

갈릴레오 AI, UIzard, Figma AI 등 다양한 서비스를 사용해 보았지만 이 서비스만큼 강력하지 않았습니다.

텍스트 입력만으로 홈페이지 화면이 뚝딱 만들어집니다. 디자인 컨셉을 넣으면 반영해주고, 심지어 원하는 부분만 선택해 텍스트로 수정을 요청할 수도 있기에 저희 팀에서는 이 툴을 통해 와이어프레임 그리는 작업에 드는 시간을 80% 가량 단축시켰습니다.

이번에는 '스포츠 낚시 월드컵'이라는 홈페이지를 개선하기 위한 기획 단계에서 활용해 보았습니다. 이번 프로젝트는 클라이언트의 동의 하에 AI를 활용해서 최대한 초안 와이어프레임을 잡은 후 기획적으로 다듬고, 이후 디자인 작업에 들어갔습니다.

여러 번 활용해보고, 가장 쉽게 활용할 수 있는 방법을 정리해보았습니다. 따라해보셔도 좋을 것 같습니다.

1. 챗GPT에 지침 넣기

유료로 챗GPT를 사용하고 계실 경우 '프로젝트'를 만들고 해당 프로젝트 안에서 하는 채팅은 모두 프로젝트 내의 규칙을 따르도록 지침을 추가할 수 있습니다. 저는 아래와 같은 지침을 추가했습니다.(무료로 활용할 경우 채팅창에 그냥 입력하셔도 됩니다.)

#목표:

당신은 최고의 IT기획자 입니다. 제가 드리는 정보를 바탕으로 웹 UI를 디자인하기 위한 정보를 추출해주세요.

모든 화면은 반응형으로, 앱 화면으로 만들어질 것까지 고려해주세요.

#필요한 정보

- 화면 레이아웃

- 필요 컴포넌트 정보

- 안에 들어갈 예시 컨텐츠

2. 챗GPT에 만드려는 웹사이트 관련 정보 넣기

리디자인 프로젝트의 경우 기존 화면이 있기 때문에, 해당 화면을 캡쳐한 이미지나 링크를 넣어 화면을 분석하도록 합니다.

이미지를 넣었을 경우(좌), 링크를 넣었을 경우(우)

3. 해당 내용을 복사해서 readdy ai 서비스에 붙여넣기

readdy ai 서비스에서 'Desktop'선택 후 챗GPT에서 얻은 내용을 붙여넣습니다. 그러면 제가 준 정보를 다시 깔끔하게 정리해서 화면을 그려줍니다.

4. 채팅으로 바로 수정하기

readdy ai의 가장 강력한 점 중 하나입니다. 우측의 채팅창에서 바로 수정을 요청할 수 있습니다.

텍스트로 요청할 수도 있고, 채팅창 하단의 'select from page'를 누를 경우 원하는 영역을 선택하면 파란 색으로 변화하는데, 이 상태에서 해당 영역에 관한 변화를 요청할 수도 있습니다.

UI의 명칭을 잘 몰라도 구체적인 지침을 내릴 수 있다는 점에서 매우 직관적이고 편리합니다.

위의 요청사항에 따라 로그인 섹션은 헤더에 버튼으로 처리하고, 배치를 다시 한 모습입니다.

또한 언어 변경 부분에서 현재 언어 뿐 아니라 바꿀 수 있는 모든 언어를 보여달라고 요청했는데 해당 부분 또한 잘 반영된 것을 볼 수 있습니다.

5. 피그마로 export하기

해당 툴이 강력한 두 번째 이유입니다. 피그마로 바로 export해서 사용할 수 있습니다.

레이어가 살아있는 채로 피그마에 import 되었습니다. 피그마에서 컨텐츠의 배치를 바꾸거나 문구를 수정하는 등 와이어프레임을 고도화합니다.

7. 같은 느낌의 페이지 제작

첫 페이지를 만들었다면, 다음 페이지 제작은 훨씬 수월하게 만들 수 있습니다. 방금 만든 사이트를 캡처해 레퍼런스 이미지로 주고 레이아웃과 컬러를 참고하라고 할 수 있기 때문입니다. 이미지를 업로드하면 1)레이아웃 2)컬러 3)카피라이팅 중에서 어떤 것을 참고할 것이냐고 묻습니다.

이때 아무것도 클릭하지 않는 것을 추천합니다. 레이아웃을 클릭할 경우 레퍼런스의 레이아웃을 그대로 따라가느라 내용과 맞지 않는 내용으로 작성될 수 있습니다.

대신 프롬프트에 아래와 같은 가이드를 추가해 주는 것으로 충분합니다.

"당신은 최고의 디자이너입니다. 첨부한 이미지의 전반적인 느낌을 고려해 깔끔하고 모던한 웹사이트의 '창립 취지 페이지'를 디자인하려고 합니다."

이렇게 필요한 정보가 담긴 다양한 레이아웃을 빠르게 만들어볼 수 있습니다. 사실 이대로 바로 개발로 넘겨 진행하는 것 또한 가능하지만 괜찮은 퀄리티의 디자인을 원할 경우 피그마로 export해서 최종 수정이 필요합니다.

Readdy ai는 Hi-fi 와이어프레임 초안을 짜는데 도움을 주는데요. 따라서 기획자가 구상하고 있는 화면을 빠르게 보고자 할 때 유용하게 활용할 수 있습니다.

인사이트

Readdy ai는 언뜻 보기에 기획자가 하는 와이어프레임 작업을 대체할 수 있는 것처럼 보이는데요. 역설적이게도 해당 툴을 활용하고 이번 프로젝트에서 기획을 하는 과정에서 느낀 점은, 노련한 기획자야말로 AI로 대체되기 힘들겠다는 점입니다.

이번에는 2000년대에 만들어진 후 한 번도 개선한 적이 없던 홈페이지를 개선하는 작업에 기획자 겸 디자이너로 참여했는데요. 메뉴 구조부터 홈페이지의 우선순위와 목적까지 새로 바뀌어야 하는 상황이었습니다. 이런 경우 클라이언트가 오히려 더 어디서부터 손을 대야 할지, 어떻게 고쳐나가야 할지 모르시는 경우가 많습니다.

또한 예산과 다양한 내부 사정이 얽혀있는 경우가 많기에, 기획자가 클라이언트와 유기적으로 소통하며 맥락을 잡고 중요한 것부터 시작해 틀을 잡아 나가는 것이 필요합니다. 사람이 할 수밖에 없는 소통이지요.

클라이언트와 미팅을 하며 그 자리에서 결정해야 하는 사항들에 대해서는, 쌓아온 경험을 바탕으로 직관적으로 제안하거나 기획하는 것이 더 빠른 경우도 있다고 느꼈습니다.

AI를 잘 활용하여 생산성을 높이면서도, 기획자가 할 수 있는 영역은 역시 기본인 '사람에 대한 이해'를 바탕으로 한 인사이트와 소통 능력인 것 같습니다.