안녕하세요. 뉴니커, 아직은 해가 뜨겁지만 하늘이 높아지는 걸 보니 가을이 오긴 했나봐요. 컴퓨터 앞에 있는 것도 좋지만, 한번씩 산책을 나가보면 어떨까요?

오늘 뉴니커를 위해 준비한 소재는 'UI/UX 분석 도구'입니다. 이 도구를 사용해서 strange.im 페이지의 UI/UX를 피드백 받아보려고 해요 :)

1. Intro

LinkedIn을 보다보니 Junhoe Kim님의 포스팅을 볼 수 있었습니다. ChatGPT를 이용하여 UI/UX를 분석하는 도구를 만들었고, 이를 소개해 주었는데요. 

직접 사용해보고 싶으신 분은 아래 링크를 방문해주시면 되며, 사용법 또한 간단해요. 분석하고 싶은 페이지(화면)을 Drag & Drop 으로 업로드를 해두고 분석 요청을 하면 끝이에요. 

ChatGPT - UI/UX 분석 도구: 분석하고 싶은 화면을 드래그앤드랍 하세요!

추가로, 제작자의 Comment를 빌리자면  디자인 의도를 구체적으로 설명하면 더 정확한 피드백을 받을 수 있다고 합니다. 이 외에 제작자가 말한 이 도구의 주요 기능과 사용 팁은 아래와 같으니 참고해주세요.

주요기능

• 페르소나 맞춤형 피드백

• 디자인 의도 반영

• 시선 흐름과 정보 위계 분석

사용 팁

• 디자인 의도를 구체적으로 설명할 수록 정확한 피드백을 받을 수 있음

• 페르소나 설정도 꼼꼼히 하면 좋음

• 피드백은 천천히, 단계적으로 적용하는게 좋음

2. 사용해보기

오래 전 포스팅에서 말씀드리긴 했지만, stranger.im 사이트는 Claude AI를 사용하여 Front End를 개발했습니다. 이 사이트는 다양한 해외 Article을 한글로 요약하여 카드뉴스 형태로 제공중인 사이트이며, 뉴스레터 구독하기 전의 랜딩 페이지라고 보시면 됩니다.

이 사이트의 페이지와 함께 'UI/UX 분석기'에 피드백을 달라고 요청을 해보았어요. 더불어서 3why 기법을 토대로 피드백을 달라고 했어요.

아래 결과를 보면 알다시피, GPT 답게 자세한한 피드백을 줘요. 특히나 UI/UX 분석이 전문이다보니 사용자의 시선 흐름에 관한 피드백도 놓치지 않았네요. 또한 놀라운 점은 현재 페이지의 문제점을 정확히 파악하고 개선 방향도 답변해주네요.

위 답변과 더불어서 3why방식으로 제시해준 개선 방안을 볼게요. 몇 가지 문제점이 있고 그 게 왜 문제인지 스스로 why를 던지며 질답하는 것을 볼 수 있습니다. 역시나 뉴스 카드 사이의 문제가 지적 되었으며, 세로로 긴 모달이 가독성이 좁다는 추가적인 의견을 주었어요.

위의 개선안을 또 분석해보고 현재 사이트에 반영한다면, 또 새로운 웹페이지가 만들어지지 않을까 싶네요. :D

3. 결론

Juneho님이 만들어 준 UI/UX 분석 도구를 활용하여 stranger.im 페이지의 피드백을 받아본 내용을 정리해보았어요. 이 도구를 사용하면서 느낀 장점 중 하나는 매우 직관적인 피드백 시스템이라는 점입니다.

간단한 드래그앤드롭으로 분석을 요청할 수 있으며, 결과 또한 상세하게 제공된다는 점이 인상 깊었습니다. 특히, 3why 기법을 적용해 문제를 깊이 파악하고 개선 방향을 제시하는 방식은 매우 유용했어요.

오늘 다룬 도구는 이런 부분을 개선하고자 하는 디자이너나 개발자에게 큰 도움이 될 수 있을 거라 생각들어요.

뉴니커도 혹시 웹페이지나 프로젝트의 UI/UX에 대해 고민이 있으시다면, 이 도구를 한번 사용해보는 것을 추천드립니다!

앞으로도 흥미로운 도구와 팁을 소개해드릴테니, 기대해주세요! 😊

감사합니다.

 SNS

Threads | Instagram | X(Twitter) | Linkedin