패스트캠퍼스 환급챌린지 12일차: AI 시대, UX/UI부터 프로덕트 디자인까지 한 번에 끝내는 초격차 패키지 강의 후기

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다.

AI 시대, UX/UI부터 프로덕트 디자인까지 한 번에 끝내는 초격차 패키지

이번 강의에서는 애자일 프로세스에서 왜 유저 스토리가 중요한지, 그리고 실제로 디자인, 개발, QA가 어떤 방식으로 이 언어를 공유하는지 깊게 다뤄줬다. 가장 인상적이었던 건 유저 스토리는 단순한 문장 형식이 아니라, 고객의 시선으로 사고하게 만드는 프레임이다.
디자이너 입장에서는 화면을 그리는 작업을 하고 있지만, 그 뒤에서 움직이는 모든 팀이 같은 ‘스토리’를 중심으로 협업을 한다는 사실이 새삼 크게 다가왔다.

특히 피그마 디자인 화면에 유저 스토리를 그대로 라벨로 붙여두는 방식이 아주 실무적이고 좋았다. 개발자가 화면을 열었을 때 이게 어떤 유저 행동을 위한 화면인지 바로 이해할 수 있다는 점은 팀 전체의 커뮤니케이션 비용을 획기적으로 줄여주는 것 같았다. 

그리고 유저 스토리를 잘게 나눌수록 스프린트 내에서 작은 성공들을 빠르게 경험할 수 있다는 말이 공감됐다. 스타트업이나 SaaS 환경에서는 빠르게 달려야 하고, 그 과정에서 팀 전체가 기민하게 움직여야 하는데, 이 방식은 흐름을 끊지 않고 자연스럽게 모멘텀을 만들어준다.

결국 유저 스토리 기반의 협업은 공통된 언어를 갖는 과정일 수 있겠다. 서로 다른 직군이 각자의 방식으로 해석하던 작업들이 하나의 기준 안에서 만나기 시작하면, 디자인과 개발의 오해도 줄고, 사용자 중심 사고도 더 자연스럽게 자리 잡는 것 같다.
그리고 Zeroheight을 이용한 디자인시스템은 내가 최근에 관심 있었던 부분인데, 한번 소개해줘서 정말 유용했다. 프리 버젼이라도 직접 만들어봐야겠다고 느꼈다. 

 

Full 프로세스로 끝내는 UX/UI 디자인
디자인 전 몸풀기

디자인 시스템 Live site - feat. Zeroheight

1. 디자인 시스템이란

• 디자인을 구성하는 요소들을 하나의 일관된 규칙으로 묶는 체계
• 팀이 공유하는 약속
• 피그마 컴포넌트 키트, 프론트엔드 라이브러리, 브랜드 가이드, 이메일 템플릿 등 전부 포함 가능
• 목적: 고객에게 일관된 경험 제공
• 디자이너가 혼자 작업해도 필요함(브랜드와 경험의 통일을 위해)

2. 문서화가 중요한 이유

• 시스템은 규칙이므로 문서 형태로 남아야 함
• 노션, 컨플루언스도 가능하지만 웹사이트 형태의 라이브 사이트가 가장 효율적
• 모든 이해관계자가 접근하기 쉬움
• 팀 규모가 커질수록 필요성 증가

3. 라이브 사이트를 만들기 어려운 이유

• 웹 사이트 형태로 직접 빌드하려면 리소스가 매우 큼
• 대기업(애플, 구글 등)은 자체적으로 구축하지만 대부분의 회사는 힘듦

4. 제로하잇(Zeroheight) 소개

• 디자인 시스템 라이브 사이트를 쉽게 퍼블리시해주는 SaaS
• 태그라인: 디자인 시스템의 adoption을 높이는 도구
• 디자이너, 개발자, 마케팅 모두를 위한 중앙 허브 역할
• 코드, 토큰, 문서, 컴포넌트 모두 통합 관리 가능

5. 제로하잇 활용 사례

• 다양한 글로벌 기업들이 활용
• 브랜드 가이드, UX 컨텐츠 가이드, 프로덕트 가이드 모두 시스템화
• 로고, 컬러, 서브 브랜드, 이메일 가이드, 이미지 사용 규칙 등 폭넓게 포함
• 일부 기업은 브로슈어나 편집 디자인까지 시스템화
• 비디오, 광고용 에셋 등 회사 특성에 따라 스코프도 다양

6. 실제 제로하잇 UI 특징

• 웹사이트 안에서 바로 문서 작성 가능
• 페이지 추가 가능
• 피그마와 자동 연동
• 피그마의 프레임을 그대로 가져옴
• 디자인 토큰(JSON) 불러오기 가능
• 컴포넌트 관리, 스토리북 연동 가능
• 스크린샷을 붙이는 방식이 아닌 자동 패치 방식이라 작업량 대폭 감소

7. 디자인 시스템을 라이브 사이트로 퍼블리시하는 이유

• 일관된 경험 제공
• 협업 효율 극대화
• 디자이너뿐 아니라 마케팅, 개발 모두 동일한 기준을 사용
• 시스템화된 조직 문화 형성 가능

스토리로 소통하기 (애자일 & 유저 스토리)

애자일이 유저 스토리를 사용하는 이유

• 변화하는 고객 니즈에 민첩하게 대응하기 위해
• 중심축은 항상 “고객”
• 고객의 행동·욕구·맥락을 기반으로 개발 프로세스를 만들기 때문

유저 스토리 구성요소

• Persona(누가): 어떤 고객을 위한 기능인지
• Action(무엇을 하고 싶은가)
• Outcome(왜? 무엇을 얻기 위해?)
• = 고객 입장에서 욕구 → 행동 → 목적을 서술
• 맥스(페르소나)
  • “나는 친구들을 초대하고 싶다(행동)”
  • “서비스를 함께 즐기기 위해서(목적)”
• 매니저(페르소나)
  • “팀원의 진행 상황을 이해하고 싶다(행동)”
  • “성공/실패를 파악하기 위해(목적)”

유저 스토리의 장점

• 고객 중심 사고 자동화
• 공통된 언어로 소통 가능 → 협업 비용 감소
• 작은 단위(스토리)로 나누기 때문에 빠른 모멘텀 생성

실무에서의 활용

(1) PM

• 요구사항 문서를 유저 스토리 기반으로 정리
• 문서/포스트잇 단위로 쪼개며 스펙을 정의

(2) 각 직군(Task 분리)

• 하나의 유저 스토리에
  • 디자인 task
  • 개발 task
  • QA task
    를 분리해 매핑
• JIRA / Linear 등의 티켓 제목도 유저 스토리 형태로 구성

(3) 디자인에서도 활용

• 피그마 화면 상단에 유저 스토리 라벨을 달아 정리
• 개발자가 “내가 맡은 유저 스토리의 스코프가 무엇인지” 한눈에 이해
• 어떤 화면이 어떤 스토리에 속하는지 명확하게 구분

결과: 커뮤니케이션 비용 감소

• 디자인/개발/QA가 “하나의 기준 언어”로 소통
• 유저 스토리 기반이 아닐 경우
  • 매번 기준이 달라져 혼선 증가
  • 업무 속도 저하

---

 

https://zeroheight.com/

zeroheight - The Design System Platform for Teams Who Scale

 

https://base.uber.com/6d2425e9f/p/93825b-welcome-to-base

Base Design System

---

학습 시작과 종료 시간

학습 진도 및 통계

학습 인증샷

---

패스트캠퍼스, 환급챌린지, 습관챌린지, 패스트캠퍼스후기, 습관형성, 직장인자기계발

https://fastcampus.info/4oKQD6b

커리어 성장을 위한 최고의 실무교육 아카데미 | 패스트캠퍼스