Develiper
Develiper
🌿 뉴비 파트너
📚 학습반장

[Figma baby의 기어다니기 1탄] 머리털나고 난생 처음 해 보는 UI/UX 기획 및 벤치마킹 (UI/UX 전문가는 허접함에 깜짝 놀랄 수 있으니 심장 부여잡고 보셔야...🥲 )

UI/UX 바다에서 허우적거리는 왕초보의 물 먹는 소리가 들리는 (어푸...어푸...) 사례글입니다.

허접함의 극치이니 심신미약자, 노약자, UI/UX 전문가는 주의하시고 보시길 바랍니다. 😅

시간 투자도 좀 하고, 이리저리 뒤져도 보고, 머리도 싸매면서 궁리도 해보았으나
결국은 이룬 것은 없어서 1주일 동안 한 것들이라도 끄적이며 정리해 봅니다.

크게 3가지를 한 것 같아서 3가지를 정리 해 보려고 합니다.

1️⃣ Figma Study

스터디장님께서 추천해주신 Youtube 영상 보면서 Figma에 대해서 그리고 UI/UX 작업에 대해서 감을 좀 잡았습니다.

https://www.youtube.com/@designbase

피그마 2025의 1~11까지 정주행했고,
피튜브의 피그마 관련 영상 몇 가지 시청했습니다.

한국 TV 쇼의 스크린 샷

Figma에 대해서 감을 좀 잡았고, 작업 방식이나 기능들은
Canva, Bubble, PowerPoint, 일러스트 작업할 때의 방식들과 유사한 부분들이 많아서
적응은 어느 정도 쉽게 할 것 같다는 생각이 들었습니다.

2️⃣ UI/UX Study

스터디장님이 제공해 주신 GPT를 이용해서 노닥거리다 보니 UI/UX에 대해서 감을 좀 잡았습니다.

몇 가지 질문 던지고 대화하다보니 저의 깨달음은 (맞는지 틀리는지 정확하게는 모르겠지만...스터디장님께서 맞다고 confirm 해 주셨으니...ㅎㅎ)

UI/UX 작업은 간략하게 정리하면

1. 내가 만들고자 하는 서비스가 이루고자 하는바를 명확하게 하고
(이게 아마도 스터디장님 말씀하신 visioning인 것 같음) ➡️
2. 이를 구현하기 위해 UX 측면에서 어떤 흐름을 설계해야 고객/사용자가 서비스가 제공하고자 하는 visioning을 경험할 수 있게 되는지를 구현하고 ➡️
3. 이렇게 설계된 UX를 각 흐름의 단계마다 어떠한 UI로 실현시킬지를 만드는 것

따라서 UX 흐름의 골격을 명확하게 잡고 그에 맞추어서 흐름의 각 단계마다 UI를 효과적으로 구현해 주면 된다라는 생각입니다.

그리고 UI/UX 작업이 완료되면 이를 개발자에게 넘겨서 개발을 시키고 실제로 UI/UX 디자인 구현이 잘 되었는지를 평가하고 수정 보완하는 작업 순서를 가져간다는 점도
배울 수 있었습니다.

RAG AI Agent 웹앱 서비스를 개발해서 제공하고 싶다라는 목표와 비전을 가지고 그에 맞는 UI/UX 기획 작업을 GPT와 대화하면서 만들어 봤습니다.

나온 잠정적인 UX 흐름과 그에 따른 단계별 UI 기획안은 다음과 같습니다.
(GPT가 만들어 준 것입니다. 물론 저도 어느 정도는 동의가 되는 내용이고요)

1. 사용자 가입 및 로그인

UX 목표

  • 사용자가 간편하게 계정을 생성하고 로그인할 수 있어야 한다.

UI 설계

  • 로그인/회원가입 페이지: 간결한 입력 폼 (이메일, 비밀번호)

  • 소셜 로그인 옵션 (Google, Facebook)

  • 비밀번호 찾기/재설정 기능

2. 지식 베이스 설정

UX 목표

  • 사용자가 쉽게 지식 베이스를 설정하고 관리할 수 있어야 한다.

UI 설계

  • 파일 업로드 UI: CSV, PDF, 텍스트 파일 지원 (지식 파일 추가)

  • Q&A 직접 입력 UI: 질문과 답변을 손쉽게 추가할 수 있는 텍스트 입력 폼

  • 자동 분석 UI: 업로드된 지식 파일을 AI가 자동 분석하고 미리보기로 확인

  • 카테고리 설정 UI: 지식 베이스를 카테고리별로 관리할 수 있도록 드롭다운 메뉴

3. RAG AI Agent 설정

UX 목표

  • 사용자가 AI 응답 스타일을 자유롭게 설정할 수 있어야 한다.

UI 설계

  • 응답 스타일 설정 UI: 정중, 간결, 맞춤형 등 선택 가능한 드롭다운

  • 맞춤형 응대 활성화 UI: 고객 정보 기반 응대 설정 옵션 (On/Off)

  • 자동화 정도 설정 UI: 완전 자동화, 부분 자동화, 수동 전환 옵션

4. 실시간 고객 응대

UX 목표

  • 사용자가 고객 질문에 빠르게 자동 응대할 수 있어야 한다.

UI 설계

  • 실시간 채팅 UI: 고객 질문이 실시간으로 표시되고, AI 응답이 바로 표시

  • AI 응답 모니터링 UI: AI가 자동으로 답변한 내용 확인

  • 수동 응대 전환 버튼: AI가 이해하지 못한 질문을 사용자가 직접 응대 가능

  • 고객 만족도 평가 UI: 고객이 응답에 만족했는지 피드백 제공

5. 응대 기록 분석

UX 목표

  • 사용자가 고객 응대 성과를 명확히 파악할 수 있어야 한다.

UI 설계

  • 통계 대시보드 UI: 응대 수, 평균 응답 시간, 고객 만족도 등 그래프 표시

  • FAQ 자동 생성 UI: 자주 묻는 질문을 자동으로 감지하여 제안

  • 고객 맞춤 응대 성과 UI: Up-selling, Cross-selling 발생 내역 표시

이렇게 결과가 나온 GPT와의 대화 내용도 공유합니다.

https://chatgpt.com/share/682b22a5-e218-8004-8984-20c39b772741

UI/UX 작업을 하면서 들었던 생각은 단순히 UI/UX 작업이 아니라 내가 하고자 하는 사업에 대해서 다시 한 번 더 고민하고 생각하고, 구체화하게 되는 작업이라는 생각이 들었습니다.
내가 막연하게 생각하고 있던 부분은 UI/UX로 구현을 할 수 없었고, 내가 생각이 뚜렷해져야 UI/UX 작업도 진행시킬 수가 있었습니다.
계속 고민하면서 UI/UX 작업도 병행해야 할 것 같습니다.

3️⃣ Benchmarking

실제 기획한 UI/UX를 잘하고 있는 업체의 UI/UX와 비교해보고 배울 것은 배워야겠다고 생각했습니다.

머릿속에 떠오르는 아는 업체가 별로 없지만 Veluga라는 업체를 떠올리고 바로 벤치마킹하러 갑니다.

https://veluga.app/

UX 관점에서 Flow만 따라가보면

대문 ➡️ Home(Simple itself!) ➡️ 벨루가 AI 채팅 ➡️ RAG AI Agent 구축 ➡️ Test ➡️ 임베딩 ➡️ 실행 ➡️ Performance 측정 및 평가 ➡️ 개선 및 수정 보완 ➡️ 실행 반복

이라고 판단이 됩니다.

UX 측면에서 논리적이고 간결하면서도 끄덕여지는 흐름인 것 같습니다.
별로 개선 여지는 없어보이지만 앞으로 좀 더 고민해 보겠습니다. 개선할 부분이 있을지에 대해서...

그리고 UI 측면에서는 각 UX의 단계마다 되도록 simple하게 사용자가 직관적으로 이해할 수 있고 사용하기 편하도록 인터페이스도 구성하고 기능과 요소들을 집어넣은 것 같다는 생각이 들었습니다. 물론 대부분의 개발 프로덕트가 그렇듯이 예쁘거나 미적으로 고객 경험을 향상시킨다는 생각은 들지는 않았고요.

그래도 UI 측면에서 simple, 직관, 편의성 이런 부분에 신경을 많이 쓴 것 같다는 느낌이었고 이 부분은 참고할 만한 것 같다는 생각이 들었습니다.

이상입니다.
좀 더 고민하고 연구해서 Figma 작업으로도 연결시켜 보겠습니다.

6
7개의 답글

👉 이 게시글도 읽어보세요