brunch

You can make anything
by writing

C.S.Lewis

by 기며나 Feb 07. 2024

AI를 활용하는 UX프로젝트, SaaS제작기(4)

프로토타입 제작하기



지난주부터 디자인 시스템을 잡고 Hi-fi 디자인 구현을 진행하고 있습니다.

이번 주는 프로토타입을 제작해볼건데요.


프로토타입 제작을 위해, 가상의 데이터를 꾸며야합니다.

가상의 데이터라고 해서 관련 없는 내용을 적어 넣을 경우에는

테스터의 집중도가 깨지고 흐름이 끊겨 테스트에 본질이 흐려질 수 있기 때문에 최대한 사실과 비슷한(그럴싸한) 데이터를 적어 넣어야 합니다.


이 가상의 데이터 또한,

챗 GPT에게 얻어보도록 하겠습니다.



표로 정리되어 잘 나온 것 같지만,

ID가 단순한 넘버링으로 되어있고 주문 상품의 카테고리가 중구난방인 것 같아서 조금 더 보완을 위해 질문을 덧붙여 보겠습니다.



여전히 ID가 썩 마음에 들지는 않지만 이정도면 테스트 하기에는 무리가 없다고 판단하여 이 데이터들로 제작해보겠습니다.


사실 혼자 가상의 데이터를 만드는 것 자체가 꽤 많은 시간을 잡아먹고 쓸데 없는 고민을 하게 만들곤 하죠.

챗GPT의 이런 부분은 정말 유용한 것 같습니다.



작업중인 디자인 파일에 가상 데이터를 입력하여 프로토타입을 만듭니다.



그리고 디테일한 타겟팅이 가능하도록 "필터"기능을 추가했습니다.

필터를 라디오로 할지, 아코디언으로 할지 고민을 많이 했는데요.


사용자 아이디를 검색할 경우, 또는 특정 유입 경로, 특정 상품명 등을 검색할 경우를 고려해보면 간단한 필터 기능으로는 검색에 어려움이 있을 것으로 보여, 텍스트 필드 형태를 적용했습니다.



유저가 직접 단어 또는 숫자를 타이핑하여 원하는 데이터만 걸러 볼 수 있으며 다중 필터 적용으로 보다 정밀한 타겟팅이 가능합니다.


이렇게 Toast로 뜰 고객 상세 데이터 디자인 완료!







나머지 Toast도 디자인을 완성해주면 !!

이제 프로토타입을 만들 수 있습니다.






지난주에 회색 대비 차이가 너무 적은 것 같아 모니터에서 잘 안보이던 글씨 컬러들을 전부 수정했구요, 간단한 프로토타입을 완성했습니다.


완성된 프로토타입 링크와 영상을 공개합니다.




여기까지 -

프로토타입 제작을 해보았는데요.


프로토타입 제작까지 오다 보니 유저가 헷갈려할 수 있는 부분이 있을 것 같아, 다음주에는 유저테스트와 그에 따른 보완 작업을 진행해보도록 하겠습니다.

이전 03화 AI를 활용하는 UX프로젝트, SaaS제작기(3)
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari