Files

김보곤 ba68e138e6 docs: [plans] UI/UX 디자인 인사이트 연구 메뉴 기획서 작성

- 기획디자인 모티브의 UI/UX 연구 도구 기획
- 4종 인사이트 카드 (레퍼런스/분석/패턴/Before-After)
- CRAP 디자인 원칙 체크리스트
- 4 Phase 개발 로드맵

2026-03-08 09:43:17 +09:00

24 KiB

Raw Blame History

UI/UX 디자인 인사이트 연구 메뉴 기획서

작성일: 2026-03-08 상태: 기획 중 라우트: /rd/design-insight 모티브: 기획디자인 스토리보드 에디터 (/rd/planning-design)

1. 개요

1.1 배경

기획디자인 메뉴는 ERP 화면을 **설계(Output)**하는 도구다. 그런데 좋은 설계를 하려면 **연구(Input)**가 먼저 필요하다.

연구 (이 메뉴)              설계 (기획디자인)
┌─────────────────┐        ┌─────────────────┐
│ 레퍼런스 수집    │        │ 스토리보드 작성   │
│ 패턴 분석       │ ──→    │ 와이어프레임 설계  │
│ 인사이트 정리    │        │ HTML 내보내기     │
│ 디자인 원칙 학습  │        │ 인쇄             │
└─────────────────┘        └─────────────────┘

현재 SAM ERP 화면을 만들 때 참고할 디자인 패턴이나 인사이트를 체계적으로 관리하는 도구가 없다. 외부 서비스(Dribbble, Mobbin 등)를 참고하지만 우리 ERP에 맞는 패턴을 축적하는 곳이 없다.

1.2 목적

SAM ERP 화면 개발에 필요한 UI/UX 디자인 인사이트를 수집·분석·축적하는 연구 도구

1.3 핵심 가치

가치	설명
패턴 축적	"이 화면은 왜 좋은가?" — 반복 사용할 패턴을 라이브러리화
Before/After	개선 전후를 비교하여 디자인 결정의 근거를 기록
팀 학습	디자인 인사이트를 팀원과 공유, 일관된 UI 품질 유지
빠른 참조	새 화면 설계 시 기존 패턴을 즉시 찾아 재사용

2. 기술 아키텍처

2.1 기획디자인과 동일한 패턴

기획디자인 메뉴의 성공 패턴을 그대로 적용한다.

항목	선택	이유
프레임워크	Alpine.js 단일 파일 SPA	서버 API 없이 즉시 사용, MNG 기존 스택
저장	localStorage	서버 의존성 제거, 즉시 사용 가능
뷰 파일	`resources/views/rd/design-insight/index.blade.php`	단일 파일 구조
컨트롤러	`RdController@designInsight()`	기존 R&D 컨트롤러 확장
이미지	Base64 Data URL (localStorage)	서버 업로드 불필요

2.2 라우트

// routes/web.php — R&D 그룹 내 추가
Route::get('/rd/design-insight', [RdController::class, 'designInsight'])
    ->name('rd.design-insight');

2.3 localStorage 키

키	용도
`di_projects`	연구 프로젝트 목록 (메인 저장소)
`di_current`	현재 프로젝트 ID
`di_patterns`	디자인 패턴 라이브러리 (프로젝트 간 공유)

3. 화면 구조

3.1 전체 레이아웃

┌──────────────────────────────────────────────────────────────┐
│  툴바: [프로젝트명] [저장] [내보내기]     [뷰: 보드│리스트│갤러리] │
├──────────────────────────────────────────────────────────────┤
│  카테고리 탭: 전체 │ 레퍼런스 │ 분석 │ 패턴 │ Before/After      │
├────────┬─────────────────────────────────────────────────────┤
│        │                                                     │
│ 사이드  │  메인 콘텐츠 영역                                    │
│ 바     │                                                     │
│        │  ┌─────────┐ ┌─────────┐ ┌─────────┐              │
│ ◆ 프로  │  │ 인사이트  │ │ 인사이트  │ │ 인사이트  │              │
│   젝트  │  │ 카드 1   │ │ 카드 2   │ │ 카드 3   │              │
│   목록  │  │         │ │         │ │         │              │
│        │  │ 🏷️태그   │ │ 🏷️태그   │ │ 🏷️태그   │              │
│ ◆ 태그  │  └─────────┘ └─────────┘ └─────────┘              │
│   필터  │                                                     │
│        │  ┌─────────┐ ┌─────────┐                           │
│ ◆ 검색  │  │ 인사이트  │ │ + 새 카드 │                           │
│        │  │ 카드 4   │ │ 추가     │                           │
│        │  └─────────┘ └─────────┘                           │
│        │                                                     │
├────────┴─────────────────────────────────────────────────────┤
│  상태바: 카드 12개 │ 패턴 5개 │ 태그 8개                        │
└──────────────────────────────────────────────────────────────┘

3.2 뷰 모드 (3종)

뷰	설명	용도
보드 (Board)	칸반 스타일 카드 격자 배열	전체 현황 파악, 기본 뷰
리스트 (List)	테이블형 목록 (정렬/필터)	대량 데이터 관리, 검색
갤러리 (Gallery)	이미지 중심 큰 썸네일 격자	시각적 비교, 레퍼런스 브라우징

4. 인사이트 카드 (핵심 데이터 단위)

4.1 카드 유형 (4종)

A. 레퍼런스 카드 (Reference)

외부/내부 화면 스크린샷을 수집하고 메모를 남긴다.

┌──────────────────────────────┐
│ 📷 [스크린샷 이미지]          │
│                              │
├──────────────────────────────┤
│ 📌 Notion 대시보드           │
│ "카드형 레이아웃이 정보 밀도를  │
│  유지하면서도 시각적으로 깔끔"  │
├──────────────────────────────┤
│ 출처: notion.so              │
│ 🏷️ 대시보드  카드  레이아웃    │
│ ⭐⭐⭐⭐☆                     │
└──────────────────────────────┘

필드	타입	설명
`image`	string (Base64)	스크린샷 이미지
`title`	string	제목
`memo`	string	인사이트 메모 (왜 좋은가/나쁜가)
`source`	string	출처 (URL, 앱 이름 등)
`tags`	string[]	태그 배열
`rating`	number (1-5)	평점
`category`	string	화면 카테고리

B. 분석 카드 (Analysis)

화면을 분석하고 디자인 원칙을 체크한다.

┌──────────────────────────────┐
│ 🔍 SAM 수주 목록 화면 분석    │
├──────────────────────────────┤
│ [스크린샷 + 어노테이션 오버레이]│
│   ①→ 검색 영역 너무 넓음      │
│   ②→ 버튼 정렬 불일치        │
│   ③→ 여백 불균형             │
├──────────────────────────────┤
│ ✅ 정렬 (Alignment)          │
│ ❌ 대비 (Contrast)           │
│ ✅ 반복 (Repetition)         │
│ ⚠️ 근접성 (Proximity)        │
├──────────────────────────────┤
│ 개선 제안:                    │
│ "검색 영역을 접을 수 있게 하고  │
│  버튼 그룹을 우측 정렬"        │
│ 🏷️ 목록화면  개선필요         │
└──────────────────────────────┘

필드	타입	설명
`image`	string (Base64)	분석 대상 스크린샷
`annotations`	Annotation[]	어노테이션 배열 (마커 번호, 좌표, 텍스트)
`principles`	object	CRAP 원칙 체크 (contrast, repetition, alignment, proximity)
`suggestion`	string	개선 제안
`severity`	string	심각도 (info, warning, critical)

C. 패턴 카드 (Pattern)

반복 사용할 UI 패턴을 템플릿으로 등록한다.

┌──────────────────────────────┐
│ 📐 검색 + 필터 + 목록 패턴    │
├──────────────────────────────┤
│ [패턴 와이어프레임 이미지]      │
├──────────────────────────────┤
│ 사용처:                       │
│  • 수주 목록                  │
│  • 거래처 목록                 │
│  • 품목 목록                  │
├──────────────────────────────┤
│ 구성 요소:                    │
│  ☑ 검색바 (상단 고정)         │
│  ☑ 필터 칩 (접기/펼치기)      │
│  ☑ 테이블 (정렬 가능)         │
│  ☑ 페이지네이션 (하단)        │
│  ☑ 액션 버튼 (우상단)         │
├──────────────────────────────┤
│ 🏷️ 목록  CRUD  테이블        │
│ 📊 사용빈도: ★★★★★ (12회)    │
└──────────────────────────────┘

필드	타입	설명
`image`	string (Base64)	패턴 와이어프레임
`usedIn`	string[]	사용처 목록
`components`	Component[]	구성 요소 체크리스트
`guidelines`	string	사용 가이드라인
`frequency`	number	사용 빈도

D. Before/After 카드 (Comparison)

디자인 개선 전후를 비교한다.

┌──────────────────────────────────────────┐
│ 🔄 거래처 상세 화면 리뉴얼               │
├───────────────────┬──────────────────────┤
│ ❌ Before         │ ✅ After             │
│ [이전 스크린샷]    │ [개선 스크린샷]       │
│                   │                      │
├───────────────────┴──────────────────────┤
│ 변경 포인트:                              │
│  1. 탭 구조 → 섹션 접기/펼치기 변경        │
│  2. 좌우 2컬럼 → 단일 컬럼 (모바일 대응)   │
│  3. 저장 버튼 하단 고정 → 상단 sticky      │
├──────────────────────────────────────────┤
│ 효과: 스크롤 40% 감소, 작업 완료 시간 단축  │
│ 🏷️ 상세화면  폼  리뉴얼                   │
└──────────────────────────────────────────┘

필드	타입	설명
`beforeImage`	string (Base64)	개선 전 스크린샷
`afterImage`	string (Base64)	개선 후 스크린샷
`changes`	string[]	변경 포인트 목록
`effect`	string	개선 효과

4.2 공통 필드

모든 카드 유형이 공유하는 기본 필드:

{
  "id": "di_1709856000000_abc",
  "type": "reference",
  "title": "카드 제목",
  "createdAt": "2026-03-08T10:00:00",
  "updatedAt": "2026-03-08T15:30:00",
  "tags": ["대시보드", "카드", "레이아웃"],
  "category": "dashboard",
  "pinned": false,
  "archived": false
}

4.3 카테고리 (화면 유형별)

카테고리	코드	설명
대시보드	`dashboard`	통계, KPI, 차트 화면
목록	`list`	테이블, 검색, 필터 화면
상세/폼	`form`	입력, 편집, 상세 보기
모달/팝업	`modal`	모달 다이얼로그, 확인창
네비게이션	`navigation`	사이드바, 탭, 메뉴
로그인/온보딩	`auth`	인증, 초기 설정
보고서/인쇄	`report`	인쇄용, PDF 출력 화면
기타	`etc`	분류 불가

5. 기능 상세

5.1 이미지 수집

기능	설명
파일 업로드	이미지 파일 선택 (PNG, JPG, GIF)
클립보드 붙여넣기	`Ctrl+V`로 스크린샷 즉시 붙여넣기
드래그 앤 드롭	이미지 파일을 카드 영역에 드롭

Ctrl+V 붙여넣기가 핵심 — 스크린샷 캡처 후 즉시 카드 생성이 워크플로우의 핵심

5.2 어노테이션 (분석 카드)

분석 카드에서 이미지 위에 마커를 추가하여 문제점이나 인사이트를 표시한다.

어노테이션 유형	설명
번호 마커 (①②③)	이미지 위 클릭 → 번호 자동 증가, 하단 설명과 연동
영역 하이라이트	드래그로 사각형 영역 표시 (반투명 컬러 오버레이)
텍스트 메모	이미지 위 임의 위치에 짧은 메모

기획디자인의 번호 마커(marker 블록) + Description 패널 패턴을 재활용

5.3 태그 시스템

기능	설명
자유 태그	카드에 자유 태그 추가 (콤마 구분 입력)
태그 자동 완성	기존 태그 목록에서 자동 완성
태그 필터	사이드바에서 태그 클릭 → 해당 태그 카드만 표시
태그 색상	카테고리별 자동 색상 배정

5.4 CRAP 디자인 원칙 체크리스트

분석 카드에서 사용하는 디자인 원칙 평가:

원칙	체크 항목
Contrast (대비)	중요 요소가 시각적으로 구분되는가?
Repetition (반복)	일관된 스타일이 반복 적용되는가?
Alignment (정렬)	요소들이 논리적으로 정렬되어 있는가?
Proximity (근접성)	관련 요소가 가까이 그룹핑되어 있는가?

추가 체크:

원칙	체크 항목
여백 (Whitespace)	적절한 여백이 확보되어 있는가?
계층 (Hierarchy)	정보의 우선순위가 시각적으로 드러나는가?
일관성 (Consistency)	다른 화면과 일관된 패턴을 따르는가?
접근성 (Accessibility)	색상 대비, 폰트 크기가 충분한가?

5.5 검색 & 필터

기능	설명
텍스트 검색	제목, 메모, 태그에서 전문 검색
카테고리 필터	화면 유형별 필터 (탭)
카드 유형 필터	레퍼런스 / 분석 / 패턴 / Before/After
평점 필터	⭐ 3점 이상만 표시 등
정렬	최신순, 평점순, 이름순

5.6 내보내기

형식	설명
JSON	전체 프로젝트 데이터 백업/복원
HTML	인사이트 카드를 HTML 보고서로 출력 (인쇄 가능)
패턴 → 기획디자인	패턴 카드의 와이어프레임을 기획디자인 템플릿으로 전송

5.7 키보드 단축키

단축키	기능
`Ctrl+V`	클립보드 이미지로 새 카드 생성
`Ctrl+S`	프로젝트 저장
`Ctrl+F`	검색 포커스
`Ctrl+N`	새 카드 추가
`Delete`	선택 카드 삭제
`Ctrl+Z`	실행 취소
`Ctrl+Y`	다시 실행

6. 데이터 구조

6.1 프로젝트 (localStorage: `di_projects`)

[
  {
    "id": "diproj_1709856000000",
    "title": "SAM ERP v2 디자인 연구",
    "description": "SAM ERP 화면 개선을 위한 UI/UX 인사이트 수집",
    "cards": [],
    "createdAt": "2026-03-08T10:00:00",
    "updatedAt": "2026-03-08T15:30:00"
  }
]

6.2 인사이트 카드 (cards 배열 내)

{
  "id": "di_1709856000000_abc",
  "type": "reference",
  "title": "Notion 대시보드 카드 레이아웃",
  "image": "data:image/png;base64,...",
  "memo": "카드형 레이아웃이 정보 밀도를 유지하면서도 시각적으로 깔끔",
  "source": "notion.so",
  "tags": ["대시보드", "카드", "레이아웃"],
  "category": "dashboard",
  "rating": 4,
  "pinned": false,
  "archived": false,
  "createdAt": "2026-03-08T10:00:00",
  "updatedAt": "2026-03-08T15:30:00"
}

6.3 분석 어노테이션

{
  "annotations": [
    {
      "id": "ann_001",
      "type": "marker",
      "num": 1,
      "x": 150,
      "y": 80,
      "text": "검색 영역 너무 넓음 — 접기 기능 필요"
    },
    {
      "id": "ann_002",
      "type": "highlight",
      "x": 200,
      "y": 300,
      "w": 150,
      "h": 40,
      "color": "rgba(239,68,68,0.3)",
      "text": "버튼 정렬 불일치"
    }
  ]
}

6.4 디자인 패턴 라이브러리 (localStorage: `di_patterns`)

프로젝트 간 공유되는 패턴 라이브러리:

[
  {
    "id": "pat_001",
    "name": "검색 + 필터 + 목록",
    "image": "data:image/png;base64,...",
    "components": [
      { "name": "검색바", "required": true },
      { "name": "필터 칩", "required": false },
      { "name": "데이터 테이블", "required": true },
      { "name": "페이지네이션", "required": true },
      { "name": "액션 버튼", "required": true }
    ],
    "guidelines": "검색바는 상단 고정, 필터는 접기/펼치기 지원",
    "usedIn": ["수주 목록", "거래처 목록", "품목 목록"],
    "tags": ["목록", "CRUD", "테이블"],
    "frequency": 12,
    "createdAt": "2026-03-08T10:00:00"
  }
]

7. 프리셋 데이터

7.1 기본 카테고리 (하드코딩)

categories: [
  { code: 'dashboard', label: '대시보드', icon: '📊', color: '#6366f1' },
  { code: 'list',      label: '목록',     icon: '📋', color: '#3b82f6' },
  { code: 'form',      label: '상세/폼',  icon: '📝', color: '#10b981' },
  { code: 'modal',     label: '모달/팝업', icon: '💬', color: '#f59e0b' },
  { code: 'navigation',label: '네비게이션',icon: '🧭', color: '#8b5cf6' },
  { code: 'auth',      label: '로그인',   icon: '🔐', color: '#ec4899' },
  { code: 'report',    label: '보고서',   icon: '📄', color: '#0ea5e9' },
  { code: 'etc',       label: '기타',     icon: '📎', color: '#64748b' },
]

7.2 CRAP 원칙 체크리스트 (하드코딩)

designPrinciples: [
  { key: 'contrast',    label: '대비 (Contrast)',    icon: '🔲', desc: '중요 요소가 시각적으로 구분' },
  { key: 'repetition',  label: '반복 (Repetition)',  icon: '🔁', desc: '일관된 스타일 반복 적용' },
  { key: 'alignment',   label: '정렬 (Alignment)',   icon: '📏', desc: '논리적 정렬' },
  { key: 'proximity',   label: '근접성 (Proximity)', icon: '🧲', desc: '관련 요소 그룹핑' },
  { key: 'whitespace',  label: '여백 (Whitespace)',  icon: '⬜', desc: '적절한 여백 확보' },
  { key: 'hierarchy',   label: '계층 (Hierarchy)',   icon: '🔺', desc: '정보 우선순위 시각화' },
  { key: 'consistency', label: '일관성 (Consistency)',icon: '🔗', desc: '다른 화면과의 일관성' },
  { key: 'a11y',        label: '접근성 (A11y)',      icon: '♿', desc: '색상 대비, 폰트 크기' },
]

7.3 샘플 패턴 템플릿 (프리셋)

패턴명	구성 요소	SAM 내 사용처
검색 + 목록	검색바, 필터, 테이블, 페이지네이션, 액션버튼	수주/거래처/품목 목록
상세 폼	섹션 헤더, 라벨+입력, 저장/취소 버튼	수주 상세, 거래처 상세
대시보드	통계 카드 4개, 차트 2개, 요약 테이블	메인 대시보드
탭 레이아웃	탭 메뉴, 탭 콘텐츠, 액션 버튼	설정, 품목기준관리
트리 + 상세	좌측 트리, 우측 상세 패널	메뉴 관리, 조직도
모달 폼	모달 헤더, 입력 필드, 확인/취소	등록/수정 팝업
칸반 보드	컬럼 헤더, 드래그 카드, 필터	업무 관리
캘린더	월/주/일 뷰, 이벤트 카드, 필터	일정 관리, 근태

8. 워크플로우

8.1 일반 사용 흐름

1. 새 연구 프로젝트 생성 ("SAM ERP v2 디자인 연구")
     ↓
2. 레퍼런스 수집
   • 외부 서비스 스크린샷 → Ctrl+V 붙여넣기
   • SAM 기존 화면 스크린샷 → 파일 업로드
   • 태그 + 카테고리 분류
     ↓
3. 화면 분석
   • 분석 카드 생성 → 어노테이션 추가
   • CRAP 원칙 체크
   • 개선 제안 작성
     ↓
4. 패턴 추출
   • 반복되는 좋은 패턴 → 패턴 카드로 등록
   • 구성 요소 정리, 사용 가이드라인 작성
     ↓
5. Before/After 기록
   • 개선 전후 비교 카드 생성
   • 변경 포인트 + 효과 기록
     ↓
6. 기획디자인 연계
   • 패턴 라이브러리에서 참고하며 스토리보드 작성

8.2 기획디자인 연계

디자인 인사이트           기획디자인
┌──────────────┐        ┌──────────────┐
│ 패턴 카드:    │        │ 스토리보드:    │
│ "검색+목록"   │──참조──→│ 새 페이지에   │
│ 구성요소 체크  │        │ 패턴 적용     │
│ 가이드라인    │        │              │
└──────────────┘        └──────────────┘

향후 패턴 카드의 구성 요소를 기획디자인 블록 템플릿으로 자동 변환하는 연계 기능을 검토한다.

9. 개발 로드맵

Phase 1 — 기본 구조 (MVP)

항목	내용
라우트 + 컨트롤러	`GET /rd/design-insight` → 뷰 반환
프로젝트 CRUD	생성/저장/로드/삭제 (localStorage)
레퍼런스 카드	이미지 업로드 + 메모 + 태그 + 카테고리
보드 뷰	카드 격자 배열 기본 화면
검색/필터	텍스트 검색, 카테고리 탭 필터
Ctrl+V 붙여넣기	클립보드 이미지 → 새 카드 자동 생성

Phase 2 — 분석 도구

항목	내용
분석 카드	어노테이션 시스템 (마커, 하이라이트)
CRAP 체크리스트	디자인 원칙 체크 UI
Before/After 카드	전후 비교 카드 유형
갤러리 뷰	이미지 중심 큰 썸네일
리스트 뷰	테이블형 정렬/필터

Phase 3 — 패턴 라이브러리

항목	내용
패턴 카드	구성 요소 체크리스트, 가이드라인
패턴 프리셋	SAM ERP 기본 패턴 8종
패턴 공유	프로젝트 간 패턴 공유 (di_patterns)
내보내기	JSON 백업, HTML 보고서

Phase 4 — 연계 & 고도화

항목	내용
기획디자인 연계	패턴 → 블록 템플릿 변환
DB 저장 전환	localStorage → DB (협업 지원)
팀 공유	다른 사용자와 인사이트 공유

10. 파일 구조 (예상)

mng/
├── app/Http/Controllers/
│   └── RdController.php                      ← designInsight() 메서드 추가
├── resources/views/rd/design-insight/
│   └── index.blade.php                       ← 전체 CSS + HTML + Alpine.js
└── routes/web.php                            ← Route 추가

11. 관련 문서

기획디자인 기술 스펙 — 모티브가 된 스토리보드 에디터
기획디자인 프로젝트 — 프로젝트 이력
R&D 메뉴 개요 — R&D 전체 메뉴 구조

최종 업데이트: 2026-03-08

24 KiB Raw Blame History