📅 2026.06.15(월) - 41일차
- 인간의 패턴 인식 본능인 게슈탈트 이론의 UI/UX 적용
- Figma 레드라인 기능 + annotation 활용 효과적인 Design Handoff 산출물 만들기.
- 한경 유레카 담당자 특강: 한국경제 투자 플랫폼 '한경 유레카'의 버전별(1.0 vs 2.0) 홈 화면 개편 히스토리, 비즈니스 규제 리스크, 트래픽 유입 채널 등 내용 안내
- 프로젝트 2 단계별 프레임워크 및 AI 활용 계획 논의.
1. 게슈탈트 이론 & 패턴 인지 - UX/UI
- 뇌의 패턴 인식: 인간의 뇌는 개별 요소를 따로 보는 것이 아니라 전체적인 패턴을 먼저 인식하고 그 안에서 스토리를 찾아내는 본능(게슈탈트 법칙)이 존재.
- AI 학습과의 비교: 인공지능에게 얼굴을 얼굴로 인식시키는 초기 단계는 매우 어려웠으나, 세상의 모든 얼굴 데이터를 주입하고 학습시킨 결과 현재의 고도화된 인식 성능 달성.
- UI/UX 시사점: 사용자는 화면의 개별 컴포넌트보다 시각적 덩어리와 패턴을 먼저 인지하므로 무질서한 요소 배치를 지양하고 일관된 레이아웃 설계 필수.
2. Design Handoff / Redline
기획자, 디자이너, 개발자 간의 최종 소통 수단이자 결과물 검수의 기준이 되는 문서화 프로세스.
① Redline의 개념 발전
- 정의: 개발자가 레이아웃의 간격, 크기, 폰트 스펙을 질문 없이 확인할 수 있도록 시각적으로 치수를 표시한 참고서(건축설계서와 동일한 역할).
- 발전 흐름: 과거 UX/UI Redlining 방식에서 시작하여 전사적 '디자인 시스템' 구축으로 발전하였고, 최근에는 문서 기반의 'Design.md' 형태로 정착하는 추세.
- 실무 팁: 피그마 내에서 Redlines 플러그인이나 Annotation 기능을 활용하여 수작업 공수를 단축하며, 텍스트 상하 정렬 시 Vertical Trim (Cap height to baseline) 설정을 리마인드하여 디테일 확보.
② 핸드오프 페이지 구조
과도한 핸드오프 문서는 업데이트 공수를 가중시키므로 디자인·개발 팀 간의 사전 협의 하에 적정 수준을 유지하며, 일부 조직은 개발자의 PR(Pull Request) 완료 건수를 KPI로 산정하기도 함.
- 00 Cover / How to use (표지 및 가이드)
- 01 Flow / IA (정보 구조도 및 유저 플로우)
- 02 Wireframe (와이어프레임)
- 03 UI Screens (최종 UI 화면)
- 04 Components (공통 컴포넌트)
- 05 Variables / Styles (디자인 토큰 및 스타일)
- 06 Export Assets (에셋 추출 영역)
- 99 Archive (이전 작업 아카이브)
③ 피그마 공유 및 외부 연동 주의사항
- 공유 설정 최적화: 프로젝트 전달 시 권한 관리가 매우 중요하므로 공유 링크 설정을 철저히 확인해야함.
- 고급 설정 제어: 팀원과 복제하여 협업할 때를 제외하고는 기본적으로 Advanced 영역의 특정 옵션을 언체크(Uncheck)하여 보안 리스크 방지. (매우매우 중요!)
- 커넥터 활용: Claude 커넥터에 Figma를 연동하여 프롬프트 기반으로 디자인 자산을 파이프라인에 연결하는 환경 구축 가능.
 Advanced 있는 부분 uncheck 해야함!!!! |
 복제해서 팀원과 협업해야할 때만 이 기능 활용 |
3. 증권금융 도메인 분석: 한경 유레카 비즈니스 케이스 - 담당자 특강
- 15개의 종목 추천 알고리즘을 한데 모은 플랫폼으로, 유료 구독 시 문자로 추천 종목을 발송하는 서비스 모델 구조 설명.
- 유레카 1.0 한계점 및 2.0 개편 관련 설명
- 우리가 제출했던 대시보드 피드백 받음
4. 프로젝트 2 단계별 학습 내용 및 Tool 활용 로드맵 (Draft)
80시간의 애자일 스쿼드 프로젝트와 208시간의 심화 프로젝트를 관통하는 시기별 프레임워크 및 도구 배치 계획.
| 프로젝트 단계 | 활용 방법론 및 프레임워크 | 활용 도구 (Tool) |
| 1. 문제 정의 및 기획 | • 거시 전략: Ansoff / BCG Matrix / ERRC Grid • 요구사항 정의: PRD 작성 및 사용자 스토리 템플릿 |
• 텍스트/데이터: Claude 생성형 AI • 회의록: 에이닷, tiro |
| 2. 우선순위 산정 | • 정량/정성 스펙 결정: RICE 스코어, WSJF, MoSCoW, KANO 모델 | • 백로그 관리: Jira Software 보드 |
| 3. UI/UX 디자인 | • 구조 설계: IA, User Flow, Wireframe • 시스템 구축: 디자인 시스템, Redline, Vertical Trim |
• 디자인: Figma / Stitch • 프롬프트: claude.md 내 룰북 자산화 |
| 4. 개발 및 배포 | • 형상 관리: Git Branch 전략 및 Commit 히스토리 기록 • 퀵 디플로이: 모바일 웹앱 환경 최적화 배포 |
• 소스 제어: GitHub • 호스팅: Netlify |
| 5. 검수 및 회고 | • 품질 검증: 기능별 테스트 시나리오 기반 Audit 수행 • 팀 성장 프로세스: SSC(Continue, Stop, Start) 방법론 |
• 데이터 추적: Google Sheets / Jira • 시각화: Looker Studio |
5. Group Act 프로젝트 계획서
과정명: 프로젝트 기반 UXUI 디자인 실전 캠프 5기
팀명: Com4nent
1. 프로젝트 개요
- 수행 기간: 2026.07.03(금) ~ 2026.07.30(목) [2주 단위 스프린트 운영, 총 2개 스프린트]
- 팀 주제: 사용자 리서치와 과업 플로우 설계를 기반으로 한 금융 서비스 분야의 한국경제 도메인 신규 랜딩페이지 UX/UI 개선 및 인터랙티브 프로토타입 제작
- 프로젝트 가제: 한국경제 뉴스 랜딩페이지 AI 인터랙티비티 개선
- 프로젝트 세부내용:
- 한국경제 뉴스 서비스 플랫폼 분석 및 데이터 로그 설계서 이해를 통한 문제점 및 개선 필요 사항 정의
- 사용자 리서치 및 과업 플로우 설계를 기반으로 한 신규 뉴스 페이지의 앱 UI 설계서 작성
- 앱 UI 설계서를 바탕으로 Figma를 활용하여 신규 뉴스 페이지의 인터랙티브 프로토타입 제작
- 그룹 단위의 프로토타이핑 작업 이해를 통해 최종 인터랙티브 프로토타입 결과물 완성
- 팀 구성: 그룹 액트 (Group Act) 형태로 전원 수평적 참여 (추후 세부 역할 분담 진행 예정)
- 습득 직무 역량: 비즈니스 분석, 가설 설계 능력, UX 방법론, 팀 커뮤니케이션, 그룹 워크 친숙도
2. 프로젝트 일정 및 마일스톤 계획 (총 2개 스프린트)
전체 프로젝트 일정을 2주 단위의 2개 스프린트로 배분하여 운영(추후 변경 가능)
Sprint 1 (1~2주차): 7월 3일(금) ~ 7월 16일(목)
목표: 한국경제 도메인 현황분석과 메인 타겟 설정 및 사용자 조사를 통한 플로우 설계
[Epic 1] 경쟁사 분석 및 한국경제 뉴스 서비스 플랫폼 분석
- SWOT 분석, TAM.SAM.SOM 분석, PEST 분석(트렌드), 5-Force 분석(시장 경쟁 구조), stakeholder 분석
- 현재 한국경제 랜딩 페이지 IA 분석
[Epic 2] 데이터 로그 분석 인사이트 도출
- GA4 (Google Analytics 4) & Looker Studio: 기존 뉴스 페이지의 트래픽 데이터 분석하여 사용자의 이탈 지점이나 인기 콘텐츠 파악 -> 차트나 그래프로 시각화 AARRR & HEART 활용하여 문제구간 탐색
- kano 모델 설정(사용자 관점)하여 기능 우선순위 도출
[Epic 3] 데이터 기반 가설 설정
- 정량/정성적 리서치, RICE 스코어링 모델
- 페르소나 설정(엔비디아 Nemotron-Personas-Korea 데이터베이스 활용 AI), SQL 활용
- 역기획 Hygiene / Performance / Differentiator (HMW(How Might We))
- 사용자 리서치 및 VOC 분석을 통한 페인포인츠 도출
[Epic 4] 신규 뉴스 페이지 경험 사용자 여정 (user flow)설계
- Mermaid Code to Diagram 플로그인 활용, 와이어프레임 제작
- UI 설계서 제작
Sprint 2 (3~4주차): 7월 17일(금) ~ 7월 30일(목)
목표: 멘토링 피드백 반영, 개인화 경험을 고려한 과업 플로우 설계, 피그마 단일 파일 기반 HIFI 랜딩페이지 프로토타입 제작 및 테스트
[Epic 1] 신규 뉴스 페이지의 인터랙티브 프로토타입 제작
- PRD 작성
- Google AI Studio, Stitch, Figma design agents 등 활용하여 초안 제작
- PoC(Proof of Concept) 컨셉 검수 진행
- Github과 Claude, Antigravity, figma make 연동
- Google Cloud Computing 설정 (GCP의 VM 인스턴스 생성, Nginx 통해 포트 연결 등)
- skill.md 등 활용하여 반복 작업 체계화
[Epic 2] 그룹 단위의 프로토타이핑 작업 이해를 통해 최종 인터랙티브 프로토타입 제작
- design.md 등 통합 문서 작성을 통한 일관성 확보
- 테스트 시나리오에 따른 테스트 진행
[Epic 3] Prototype 유저 피드백 청취 및 반영
- A/B테스트
- Maze 등의 툴 활용 태스크 기반 사용성 테스트
- MoSCoW 기법을 통해 기능을 최종 MVP 범위로 재확정
- product trailer 영상 제작 고려 (미정)
[Epic 4] 프로젝트 파일 정리 및 발표 준비
- 프로젝트 파일 정리 및 발표 준비
3. 애자일 협업 환경 세팅 및 도구 운영 계획
- Jira: 정리된 업무 항목을 바탕으로 백로그를 생성한 후, 타임라인 내 태스크 매핑 관리. 스프린트 중간 점검을 위한 회고 프로세스 적용.
- GitHub: 새로운 레포 개설 및 팀원 연동 셋업 완료. 계획서, 회의록 등 과정 정리.
- Figma: 여러 파일로 분산하지 않고 하나의 파일 내에서 실시간 공동 작업을 수행. (figjam, figma design, figma slide 등)
- Claude: 바이브코딩 활용하여 실제로 작동하는 working prototype(MVP) 제작
> 업무 과정 자체를 포트폴리오에 활용할 예정
* TAM/SAM/SOM의 한계: 해당 시장 규모 추정 방법론은 주로 시장 개척이 필요한 스타트업의 투자 유치용으로 적합. 이번 프로젝트에는 부적합할 듯 / 레거시 비즈니스 적용 불가: 이미 시장 기반이 단단히 닦여 있거나, 사업 규모를 확장하더라도 전체 마켓 캡(Market Cap) 자체가 드라마틱하게 커질 가능성이 낮은 성숙기 사업군에는 불필요하거나 부적절한 프레임워크로 판명.
Figma - Handoff 문서를 참고해, 실제로 만들어보기
 |
 |
 |
 |
Figma - Grid
