UX 리서치 실무 가이드: 개인 포트폴리오 리브랜딩 프로젝트의 완전한 연구 과정

서론: UX 리서치가 없는 디자인은 추측에 불과하다

많은 디자이너들이 ‘감’으로 디자인을 한다. 하지만 진짜 UX 전문가는 데이터와 사용자 인사이트 없이는 어떤 결정도 내리지 않는다. 앞서 UX 리서치 및 리브랜딩이 어떻게 이뤄졌는지 그 과정을 [[ _posts/2025/Q3/2025-08-02-antiperfectclub.github.io-rebranding-uxwriting-kr|2025-08-02-antiperfectclub.github.io-rebranding-uxwriting-kr ]]에서 다뤘었다. 이 글은 Antiperfect.Club 리브랜딩 프로젝트에서 실제로 진행한 UX 리서치 과정을 상세히 다룬 실무 명세서 가이드다.

Phase 1: 프로젝트 정의 및 리서치 계획 수립

1.1 프로젝트 개요 및 목표 설정

프로젝트 명: Antiperfect.Club 개인 포트폴리오 리브랜딩
기간: 4주
역할: UX 리서처, 정보 아키텍처 설계자, UX 라이터
목표: 단순 포트폴리오에서 고부가가치 컨설팅 리드를 확보하는 전략적 비즈니스 자산으로 전환

1.2 리서치 질문 정의

Phase 2: 사용자 리서치 (User Research)

2.1 사용자 인터뷰 설계 및 실행 (가설)

인터뷰 대상: 총 6명

• 디지털 에이전시 PM 3명
• 스타트업 CTO 3명

인터뷰 가이드:

## 인터뷰 세션 가이드 (60분)

### 1. 웜업 (10분)
- 현재 회사에서 외부 컨설턴트/프리랜서를 고용하는 빈도
- 최근에 진행한 프로젝트 중 외부 인력이 참여한 사례

### 2. 포트폴리오 평가 과정 (20분)
- 외부 인력을 선정할 때 어떤 기준을 사용하는가?
- 포트폴리오 웹사이트에서 가장 먼저 확인하는 정보는?
- 어떤 정보가 신뢰를 주는가?
- 어떤 정보가 의심을 불러일으키는가?

### 3. 의사결정 과정 (20분)
- 최종 선정까지의 단계별 과정
- 각 단계에서 중요한 고려사항
- 예산과 품질의 균형점

### 4. 마무리 (10분)
- 이상적인 포트폴리오 웹사이트의 특징
- 추가로 궁금한 점이나 제안사항

주요 발견사항:

2.2 사용자 여정 맵핑

journey
    title 외부 컨설턴트 선정 여정
    section 발견
      소셜미디어/검색으로 발견: 5: 사용자
      추천으로 발견: 4: 사용자
    section 탐색
      포트폴리오 첫인상: 3: 사용자
      서비스 영역 확인: 4: 사용자
      케이스 스터디 검토: 5: 사용자
    section 평가
      기술 스택 확인: 2: 사용자
      문제 해결 능력 평가: 5: 사용자
      커뮤니케이션 스타일 확인: 4: 사용자
    section 결정
      견적 요청: 3: 사용자
      최종 선정: 5: 사용자

Phase 3: 경쟁사 분석 (Competitive Analysis)

3.1 경쟁사 선정 기준

1차 필터링: Creative Technologist, UX 컨설턴트, 독립 디자이너
2차 필터링: 개인 브랜드 웹사이트 보유, 서비스 명시
최종 선정: 10개 사이트

3.2 분석 프레임워크

3.3 경쟁사 분석 결과

강점 패턴 발견:

1. 서비스 중심 구조: 성공한 사이트들은 모두 Services 섹션을 전면에 배치
2. 케이스 스터디 활용: 개인 프로젝트를 비즈니스 문제 해결 사례로 재구성
3. 구체적 가치 제안: “멋진 디자인” 대신 “전환율 30% 향상” 같은 구체적 성과

약점 패턴 발견:

1. 개성 부족: 대부분 비슷한 템플릿 사용
2. 모호한 메시징: 추상적인 표현으로 가치 전달 실패
3. 개발자 중심 용어: 고객이 이해하기 어려운 내부 용어 사용

Phase 4: 정보 아키텍처 설계

4.1 카드 소팅 실험

실험 설계:

• 참가자: 타겟 사용자 5명
• 카드: 기존 Toolbox 페이지의 기술 스택 20개
• 작업: 의미 있는 그룹으로 분류하고 이름 짓기

결과:

4.2 사용자 플로우 설계

시나리오: 정부 기관 입찰 담당자가 VPAT 관련 서비스를 찾기 위해 방문

flowchart TD
    A[검색으로 발견] --> B[홈페이지 방문]
    B --> C{서비스 확인}
    C --> D[Services 페이지]
    D --> E[UX Compliance 섹션]
    E --> F[케이스 스터디 확인]
    F --> G[About 페이지]
    G --> H[Contact 페이지]
    H --> I[견적 요청]
    
    style D fill:#f9f,stroke:#333,stroke-width:2px
    style E fill:#f9f,stroke:#333,stroke-width:2px
    style F fill:#f9f,stroke:#333,stroke-width:2px

4.3 사이트맵 재설계

Before vs After:

Phase 5: 시각적 디자인 리서치

5.1 무드보드 구성

키워드 기반 이미지 수집:

• 글리치 아트
• 사이버펑크 UI
• 해체주의 타이포그래피
• 레트로 픽셀 아트
• 네온 사인

색상 팔레트 테스트:

• 모노톤 기반 (블랙/화이트)
• 포인트 컬러: 네온 마젠타(#FF00FF), 사이언(#00FFFF)
• 글리치 효과: 네온 그린(#00FF00)

5.2 타이포그래피 선택

본문 폰트: Inter (가독성 우선)
헤드라인 폰트: VT323 (개성과 가독성 균형)
선택 근거:

• 본문은 정보 전달이 우선
• 헤드라인은 브랜드 개성 표현
• 웹폰트 로딩 속도 고려

Phase 6: 사용성 테스트

6.1 테스트 설계

참가자: 타겟 사용자 5명
방법: 원격 사용성 테스트
도구: Figma 프로토타입, Zoom 녹화

테스트 태스크:

1. “제공하는 서비스 중 가장 비싼 것을 찾고 그 이유를 설명해보세요”
2. “이 사람의 전문성이 무엇인지 30초 안에 파악해보세요”
3. “만약 VPAT 관련 프로젝트를 의뾰한다면 어떤 정보를 더 보고 싶은가요?”

6.2 테스트 결과

Phase 7: 디자인 시스템 구축

7.1 컴포넌트 아키텍처

graph TD
    A[Design System] --> B[Atoms]
    A --> C[Molecules]
    A --> D[Organisms]
    A --> E[Templates]
    A --> F[Pages]
    
    B --> B1[Button]
    B --> B2[Input]
    B --> B3[Typography]
    
    C --> C1[ServiceCard]
    C --> C2[CaseStudyCard]
    C --> C3[Navigation]
    
    D --> D1[Header]
    D --> D2[ServiceSection]
    D --> D3[Footer]
    
    E --> E1[ServicePage]
    E --> E2[AboutPage]
    
    F --> F1[Services]
    F --> F2[CaseStudies]
    F --> F3[About]

7.2 인터랙션 가이드라인

Phase 8: 성과 측정 계획

8.1 KPI 정의

8.2 A/B 테스트 계획

테스트 1: CTA 버튼 텍스트

• A안: “프로젝트 문의하기”
• B안: “무료 진단 받기”

테스트 2: 서비스 카드 레이아웃

• A안: 2x2 그리드
• B안: 1열 리스트

결론: 데이터 기반 디자인의 힘

이 프로젝트를 통해 다시 한번 확인한 것은, 좋은 디자인은 데이터에서 시작한다는 사실이다. 사용자 인터뷰, 경쟁사 분석, 사용성 테스트를 통해 얻은 인사이트는 단순한 추측을 넘어서, 실제로 사용자에게 가치를 전달하는 솔루션을 만들어냈다.

특히 개인 포트폴리오 리브랜딩에서 가장 중요한 것은 “당신이 누구인가”가 아니라 “당신이 고객에게 무엇을 해줄 수 있는가” 를 명확히 보여주는 것이라는 점을 깨닫게 되었다. 이는 단순한 웹사이트 개선을 넘어서, 비즈니스 전략의 핵심이다.

자 이제 플래닝이 끝났으니 실제 개발과 시각화 디자인 단계로 넘어간다. 이 단계에 쓰일 hard spec 명세서에 대해 다음 포스팅에서 다룰 것이다.

2025-08-02-technical-ux-specation-kr

부록: 리서치 도구 및 템플릿

A. 사용자 인터뷰 템플릿

# 사용자 인터뷰 템플릿 1

## 기본 정보
- 이름: 
- 직책: 
- 회사: 
- 인터뷰 날짜: 
- 인터뷰 시간: 

## 주요 발견사항
1. 
2. 
3. 

## 인용구
""

## 다음 액션 아이템
- [ ] 
- [ ] 

# 사용자 인터뷰 템플릿 2

B. 경쟁사 분석 템플릿

# 경쟁사 분석 템플릿

## 기본 정보
- 사이트명: 
- URL: 
- 분석 날짜: 

## 분석 항목별 점수 (1-5점)
- 정보 구조: 
- 가치 제안: 
- 신뢰도 구축: 
- 차별화: 

## 강점
1. 
2. 
3. 

## 약점
1. 
2. 
3. 

## 학습 포인트
- 
- 
- 

이러한 체계적인 리서치 과정을 통해, 단순한 디자인 개선을 넘어서 실제 비즈니스 성과를 창출할 수 있는 UX 솔루션을 만들어낼 수 있었다.

위의 서베이 폼을 응용해 내 홈페이지 리브랜딩에 사용된 서베이 폼 예시를 작성하였다.

** 질문 서베이 폼**

• A. 프로젝트 정의

  • 웹사이트의 주요 목적은 무엇인가? 포트폴리오를 넘어, 전문 서비스를 판매하고 컨설팅 리드를 확보하는 플랫폼.
  • 타겟 사용자는 누구인가? 기술/비즈니스 의사결정권자 (PM, CTO, 마케팅 팀장), 정부 기관 담당자, 독창적인 웹 경험을 찾는 크리에이티브 에이전시.
  • 핵심 메시지나 가치제안은 무엇인가? “당신의 비즈니스 문제를 해결하기 위해 데이터, 코드, 서브컬처 인사이트를 융합하는 대체 불가능한 크리에이티브 기술 파트너.”

• B. 시각적 방향성

  • 선호하는 컬러 팔레트는? 모노톤(블랙/화이트)을 기반으로, 글리치 효과를 표현하는 네온 그린, 마젠타, 사이언을 포인트 컬러로 사용.
  • 타이포그래피 스타일은? 가독성이 중요한 본문은 깔끔한 산세리프, 헤드라인이나 강조 문구는 도트 매트릭스나 글리치 효과가 적용된 모노스페이스 폰트 혼합.
  • 전체적인 분위기는? 테크니컬(Technical)과 아트스틱(Artistic)의 융합.

• C. 레이아웃 구조

  • 주요 섹션들은? Services, Case Studies, About, Journal.
  • 네비게이션 방식은? 헤더 고정 방식.
  • 콘텐츠 표시 방식은? 서비스와 케이스 스터디는 ‘카드’ 방식, About 페이지의 F.A.Q는 ‘아코디언’ 방식, 스킬셋은 ‘태그 클라우드’ 방식을 혼용.

부록 2: Antiperfect.Club 리브랜딩 요구사항 명세서

아래는 내가 구현하고자 하는 목표와 브랜딩 테마를 Ego: Client의 페르소나 입장에서 재해석해서 작성한 요구사항 명세서이다의 예시이다.

[CONTEXT] 프로젝트의 배경 및 목적:

• 기존 웹사이트는 독창적인 시각적 정체성을 가졌으나, ‘프론트엔드 개발자’라는 일반적 직함과 개발자 중심의 정보 구조로 인해 잠재 고객에게 핵심 가치를 명확히 전달하지 못하는 문제를 안고 있었습니다.
• 본 프로젝트의 목적은 웹사이트를 단순 포트폴리오에서, **“데이터, 기술, 문화를 융합하여 비즈니스 문제를 해결하는 Creative Technologist이자 컨설턴트”**라는 정체성을 명확히 하여, 고부가가치 컨설팅 프로젝트 수주로 이어질 수 있는 전략적 비즈니스 자산으로 재탄생시키는 것입니다.
• 이를 위해 고객 중심의 정보 아키텍처(Services, Case Studies 도입)를 설계하고, 모든 콘텐츠와 카피를 ‘가치 제안’ 중심으로 재작성하며, 개인의 독창적인 흥미가 어떻게 전문성으로 연결되는지를 증명하는 것을 목표로 합니다.

[AESTHETIC] 시각적 스타일과 분위기:

• 핵심 키워드: 글리치코어(Glitchcore), 레트로 사이버펑크, 디스토피안, 해체주의적 콜라주.
• 분위기: 의도적으로 깨지고 왜곡된 ‘Anti-perfect’ 미학을 핵심으로 하되, 정보 전달 영역에서는 명확하고 구조적인 레이아웃을 결합하여 **‘혼돈 속의 질서(Order in Chaos)’**를 표현합니다. 이는 예술적 독창성과 기술적 전문성의 공존을 상징합니다.
• 컬러 팔레트: 모노톤(블랙/화이트)을 기반으로, 글리치 효과를 표현하는 네온 그린, 마젠타, 사이언을 포인트 컬러로 사용합니다. 다크 모드를 기본으로 합니다.
• 타이포그래피: 가독성이 중요한 본문은 깔끔한 산세리프(예: Inter)를 사용하고, 헤드라인이나 강조 문구는 도트 매트릭스나 글리치 효과가 적용된 모노스페이스 폰트(예: VT323)를 혼합하여 사용합니다.

[LAYOUT] 그리드 시스템과 페이지 구조:

• 기본 그리드: 12컬럼 그리드 시스템을 기반으로 구조적 안정성을 확보합니다.
• 파괴적 레이아웃: Hero 섹션이나 특정 비주얼 쇼케이스에서는 의도적으로 그리드를 파괴하는 비대칭, 중첩 레이아웃을 사용하여 시각적 긴장감과 역동성을 부여합니다.
• 페이지 구조: 사용자의 논리적 사고 흐름을 따라 Home(관문) → Services(가치 제안) → Case Studies(역량 증명) → About(철학 공유) → Journal(지속적 인사이트) → Contact(행동 유도) 순으로 구성됩니다.
• 콘텐츠 표시 방식: 서비스와 케이스 스터디는 ‘카드’ 방식, F.A.Q는 ‘아코디언’ 방식, 스킬셋은 ‘태그 클라우드’ 방식을 혼용하여 정보의 성격에 맞는 최적의 UI를 제공합니다.

[COMPONENTS] 필요한 UI 컴포넌트 리스트:

• 네비게이션 (Header.tsx): 상단에 고정되며, [Services] | [Case Studies] | [About] | [Journal] 링크를 포함.
• 서비스 블록 (ServiceBlock.tsx): 4개의 핵심 서비스를 담는 카드형 컴포넌트. 호버 시 인터랙션 포함.
• 케이스 스터디 카드 (CaseStudyCard.tsx): 썸네일 이미지, 제목, 한 줄 요약, 핵심 역량 태그를 포함하는 카드.
• 아코디언 (Accordion.tsx): About 페이지의 F.A.Q 섹션을 위한 확장/축소형 컴포넌트.
• 태그 클라우드 (TagCloud.tsx): About 페이지의 ‘The Roles I Embody’ 섹션을 위한 동적 태그 목록.
• 글리치 효과 컴포넌트 (GlitchEffect.tsx): 텍스트나 이미지에 글리치 효과를 적용하는 재사용 가능한 래퍼(Wrapper) 컴포넌트.
• 모달 (Modal.tsx): 갤러리나 케이스 스터디의 상세 이미지를 보여주기 위한 오버레이 컴포넌트.

[INTERACTIONS] 사용자 인터랙션과 애니메이션:

• 호버 효과: 마우스 오버 시 미세한 글리치, 픽셀 깨짐, 색상 분리(Chromatic Aberration) 효과를 버튼 및 카드에 적용.
• 스크롤 트리거 애니메이션: GSAP 등을 활용하여 스크롤에 따라 텍스트나 이미지가 나타나거나 해체되는 효과를 구현.
• 페이지 전환 효과: 페이지 이동 시, 데이터 로딩을 연상시키는 터미널 스타일의 애니메이션이나 글리치 스크린 효과를 적용하여 일관된 경험 제공.
• 미세한 배경 애니메이션: 배경에 미세하게 움직이는 ASCII 패턴이나 노이즈 텍스처를 깔아 정적인 느낌을 줄이고 깊이감을 더함.

[CONTENT] 페이지에 들어갈 실제 콘텐츠 구조와 계층:

• H1 (페이지 제목): Services & Capabilities, Case Studies, About Me 등 각 페이지의 목적을 명확히 하는 최상위 제목.
• H2 (섹션 제목): The Synthesis Lab, The Philosophy: F.A.Q., Full-Stack CRO 등 각 섹션의 컨셉과 내용을 담은 중간 제목.
• Body (본문): ‘VPAT’, ‘CRO’, ‘ISO 27001’과 같은 전문 용어와 ‘문화 번역가’, ‘프로듀서 마인드셋’과 같은 스토리텔링을 결합하여, 전문적 신뢰와 감성적 흥미를 동시에 유발.
• CTA (Call to Action): Explore the Lab's Output →, View Case Study → 등 사용자의 다음 행동을 명확하게 유도하는 구체적인 문구를 사용.

[CONSTRAINTS] 제약 조건 및 피해야 할 사항:

• 개성 억제 금지: 비즈니스적인 측면을 강조하더라도, ‘Antiperfect’의 핵심 미학인 글리치, 레트로, 실험적인 분위기를 억누르거나 제거해서는 안 됩니다.
• 모호한 가치 제안 회피: “멋진 인터페이스”, “효율적인 솔루션”과 같은 추상적이고 일반적인 표현 대신, “VPAT 문서 제공”, “A/B 테스트로 전환율 증명” 등 구체적이고 측정 가능한 가치를 제시해야 합니다.
• 개발자 중심 용어 지양: 내비게이션이나 서비스명에 고객이 이해하기 어려운 내부 용어(예: Toolbox) 사용을 피하고, 고객이 얻는 가치 중심의 언어를 사용해야 합니다.