AI를 활용하는 UX프로젝트, SaaS제작기(3)
디자인 시스템 잡기
지난주까지, 총 2주에 걸쳐 서비스 기획 부분을 진행했습니다.
PRD작성부터, 페르소나, 정보구조, 가치제안, 플로차트, 와이어 프레임 등
AI의 도움을 받아 서비스 구현을 위한 빌드업을 했는데요!
이번주는 지난주 그렸던 와이어 프레임에 옷을 입혀줄,
"디자인 시스템"을 잡아보도록 하겠습니다.
Step 01. 디자인 원칙 정의
Step 02. 디자인 가이드라인 구성
Step 03. Hi-fi 디자인
Step 01. 디자인 원칙 정의
서비스의 시각적 아이덴티티를 정의할 디자인 원칙을 설정합니다.
해당 서비스에 항상 같은 인상을 주고 일관성을 유지하도록 합니다.
디자인 원칙은 일반적으로 단어, 짧은 문장의 형태로 3~6개 내외로 정의하며
서비스의 핵심 목표를 달성하는 데 도움이 되도록 사업성, 브랜드 가치 등을 고려하여 정해야 합니다.
저는 먼저, 챗GPT에게 물어보도록 하겠습니다.
서비스 디자인의 중요 요소를 알려주면서 디자인 원칙을 정의해달라고 했는데요.
총 8가지의 디자인 원칙을 정의해주었습니다.
이 답변을 참고하여 최종적으로 도출한 디자인 원칙은
1. 명확한 시각화와 일관성
프로덕트 특성상 한 화면에 숫자와 정보가 많아 어렵게 느껴질 수 있습니다. 작업의 난이도가 어려운 문제들을 해결해주고 복잡한 정보들을 쉽게 풀어나가는 것이 필수적인 항목입니다. 이러한 프로덕트 환경에 맞추어 명확한, 그리고 일관성 있는 정보 시각화가 필요합니다.
2. 신뢰성
고객 데이터를 다루고 그에 따른 마케팅 전략을 실행하는 만큼, 데이터에 대한 신뢰성이 중요합니다. 이러한 신뢰를 바탕으로 사용자가 효율적인 결과를 도출해 낼 수 있도록 전략 제안, 조언, 추천을 통해 공동의 목표를 향해 나아가고 있음을 느끼게 해주어야 합니다.
3. 효율성
플로우를 간소화하고 효율적으로 만들어 사용자들이 더 빠르고, 똑똑하게 일할 수 있도록 도와주어야 합니다.
4. 매일사용
사용자는 항상 서비스의 필요성을 느끼며 비즈니스적 가치를 얻어야 합니다. 사용 패턴을 분석해 제품을 개인화하여 필요에 맞게 조정하고 사용자에게 성취감을 주어 자신의 작업이 자랑스러울 수 있도록 도와주어야 합니다.
이제 UI디자인 컨셉을 정해야 하는데요.
이것 또한 챗 GPT를 활용해 보겠습니다.
제가 질문을 명확하게 하지 못했는지 원하는 답변이 잘 안나왔습니다.
챗GPT와의 계속된 말씨름으로,,
마침내 얻어낸 디자인 컨셉! 퓨처프루프가 그나마 마음에 듭니다.
이 답변을 베이스로 삼아, 조금 더 명확하게 디벨롭하여 디자인 컨셉을 확립하겠습니다.
챗GPT가 잡아준 디자인 컨셉인 퓨처프루프에서 조금 더 명확하게 디자인 컨셉 키워드를 도출했습니다.
바로, "우주" 인데요.
제품의 이름이 나침반인 만큼, 광활한 우주(이커머스 시장)에서 길을 잃지 않도록 길잡이의 역할이 되어주자는 의미로 디자인 컨셉을 우주로 정했습니다.
BI도 간단하게 제작을 해보았는데요.
제품명 : COMPASS(나침반)
컨셉 : 우주
이 두가지를 조합하여 로고를 디자인 했습니다.
이 프로젝트의 중요한 부분은 아니기 때문에 10분만에 호다닥 만들었기에..
나중에 변경될 가능성을 염두해두고 있습니다.
Step 02. 디자인 가이드라인 구성
폰트, 컬러, 여백, 그리드 등을 지정하여 디자인 원칙에 접근하는 방법을 제시합니다.
포인트 색상은 주로 중립적인 톤을 사용하여 무게감을주고,
그라데이션 효과를 활용하여 컬러간의 부드러운 전환을 만들어 미래 지향적인 느낌을 강조합니다.
또한 현대적이고 깔끔한 서체를 사용하고, 굵은 글꼴을 활용하여 명확성을 극대화 합니다.
Step 03. Hi-fi 디자인
저는 한 번에 완성도 높은 전체 화면 와이어 프레임을 그리는 것이 너무 어렵게 느껴집니다.
(예상은 했지만 실제 디자인을 하다 보니 레이아웃이 와이어 프레임에서 살짝 벗어나게 되네요)
역시 컨텐츠, 부분별로 나누어서 와이어 프레임을 그리는 것이 더 저에게 맞는 것 같아요...!
그래서 추가로 디벨롭할 파트는 다 따로 와이어프레임을 그려서 디자인을 진행했습니다.
와장창 대지
와랄라 디자인 과정을 거쳐서
1차적으로 완성한 시안을 아래 첨부합니다.
어두운 회색으로 처리된 텍스트들도 맥 모니터로는 잘 보였는데
윈도우로 보니 너무 안보이는 것 같기도 합니다.
디테일한 수정은 다음 주차 때 수정하도록 하겠습니다.
여기까지 -
디자인을 입히는 과정을 작성해보았습니다.
다음 주에는 Toast로 보는 상세 데이터 디자인을 완성하고
프로토타입을 만들어 테스트를 해보도록 하겠습니다.
