GUIDE / 전체 구조

의도에서 검증까지

디자인 기준에서
검증과 개선까지

의도를 규칙으로 정리하고, 만든 화면을 실행해 기준과 비교합니다. 이번 화면을 고치는 일과 다음 작업의 기준을 바꾸는 일을 구분하는 것이 디자인 하네스의 핵심입니다.

01

구조와 두 가지 개선 경로

단계를 선택하면 아래에서 역할과 예시를 확인할 수 있습니다.

모든 작업이 참조하는 기준

규칙을 중심으로 연결되는 디자인 하네스 Intent에서 Rules를 정하고 Generate, Execute, Verify 순서로 화면을 만듭니다. A 화면 수정은 Verify에서 Generate로 돌아가 같은 기준으로 다시 확인합니다. B 규칙 개선은 Refine에서 후보를 검토하고 적용 범위와 효과를 확인한 뒤 Rules에 반영합니다.

A화면 수정 · 같은 기준으로 재검증

기준의 누락을 발견하면

B규칙 개선 · 후보 → 검토 → 반영

한 화면의 수정은 그 작업에 남기고,
검증한 배움은 다음 기준에 남깁니다.

A · 화면 수정Verify → Generate → Execute → Verify.
구현을 고치고 같은 기준으로 다시 확인합니다.
B · 규칙 개선Refine → 후보 검토 → Rules.
적용 범위와 효과를 확인한 뒤 기준에 반영합니다.
작업 진행 · 화면 수정 검토 후 규칙에 반영 개념 흐름도 · 자동화 수준과 검증 범위는 작업별로 정합니다.
두 경로를 구분합니다

화면이 기준을 어겼다면 구현을 수정합니다. 기준 자체에 누락이 있다면 개선 후보를 만들고, 검증한 뒤 규칙에 반영합니다.

02 / RULES

판단할 기준을 먼저 만듭니다.

선택한 방향을 토큰과 컴포넌트, 상태와 동작의 계약으로 구체화합니다. 공통 디자인 기준과 화면별 업무 규칙을 함께 참조합니다.

입력
확정한 화면 의도와 방향, 기존 디자인 시스템
산출물
토큰·컴포넌트 계약, 상태 모델, 수용 기준
확인 질문
다른 사람이 만들어도 같은 기준으로 판정할 수 있나요?
↑ 다른 단계 선택하기
02

Rules에 담기는 8가지

Rules는 기준을 묶어 부르는 이름입니다. 실제 정본은 토큰 파일, 컴포넌트 코드, 화면 명세 등에 나누어 둘 수 있습니다.

Tokens시각의 기본값
색, 서체, 간격, 반경, 모션의 공통 값
Components재사용할 부품
버튼·테이블·폼의 구조, 속성, 변형
States화면이 놓이는 상태
기본·로딩·빈 결과·오류·선택·비활성
Constraints지켜야 할 제약
정보 밀도, 입력 한계, 금지 패턴, 플랫폼 제약
Behaviors조작 이후의 변화
열기·닫기·저장·취소와 상태 복원
Accessibility접근과 조작의 기준
키보드, 포커스, 이름, 대비, 모션 절제
Responsive환경에 따른 재구성
화면 폭·입력 방식에 맞춘 위계와 배치
Business Rules업무가 성립하는 조건
권한, 승인 조건, 계산식, 상태 전이 제한

Forge Loop와의 연결

BRIEF → DIVERGE → TOKENS → COMMIT → VERIFY → LEARN

Forge의 실제 작업 절차입니다. 의도와 방향을 정하고, 토큰과 작업 계약을 구체화한 뒤 제작·검증합니다. 위 설명도는 이 절차의 역할을 풀어 쓴 모델이며, 특히 실행과 판정을 나누고 학습이 기준으로 돌아가는 조건을 보여줍니다.

검증의 범위도
분명한 기준으로 남깁니다.

프로토타입에서는 화면과 상호작용을 확인합니다. 실제 제품의 서버 저장, 권한, 동시 작업은 제품 환경에서 별도로 검증합니다. 통과 기록에는 확인한 범위와 남은 범위를 함께 적습니다.

왼쪽 목차에서 주제별로 읽어 보세요.다음 · 디자인 시스템 →

01 / DESIGN SYSTEM 무엇을 일관되게 만들 것인가

디자인 시스템은
판단을 공유하는 기준입니다.

색과 버튼에서 시작해, 반복되는 업무 구조와 조작 방식까지 정리합니다. 화면마다 새로 결정할 일을 줄이고, 달라야 하는 부분을 명확히 합니다.

이 문서의 4층 구성은 설명을 위한 모델입니다. KSH의 공식 표준을 옮긴 것이 아닙니다. 예시는 KSH 업무 화면을 참고한 가상 서비스 ‘현장 비용 검토’로 통일합니다.

디자인 시스템을 이해하는 네 가지 층
층정의하는 것현장 비용 검토 예시기준을 둘 곳
01 · 토큰기본값색, 글자, 간격, 반경 등 반복되는 표현 값주요 행동의 색, 숫자 서체, 8px 단위 간격토큰 파일 · 테마
02 · 컴포넌트부품버튼·필터·테이블·상태 배지의 속성과 상태금액 셀의 우측 정렬, 글자를 포함한 상태 배지컴포넌트 코드 · 사용 문서
03 · 업무 패턴반복되는 조합사용자가 업무를 마치는 화면 구성과 순서필터 → 목록 탐색 → 상세 검토 → 목록 복귀패턴 문서 · 대표 화면
04 · 화면 계약페이지별 적용그 페이지의 정보·상태·동작·수용 기준어떤 현장·기간을 조회하고, 상세 닫기 후 무엇을 유지할지화면 명세 · 시나리오

작은 결정도 이름을 붙이면 반복해서 쓸 수 있습니다.

아래 수치는 이 가상 예시의 설명용 값입니다. 실제 프로젝트에서는 기존 토큰과 컴포넌트 계약을 먼저 확인합니다.

주요 행동action.primary · 강조색
보조 영역surface.subtle · 낮은 강조
8 / 16 / 24간격space · 예시 간격 단계
1,280,000금액 표현우측 정렬 · 자릿수 정렬
공통 기준은 재사용하고,
메뉴의 목적과 데이터에 맞춰 패턴을 조합합니다.

공유하는 기준

같은 의미는 같은 방식으로

검토대기 배지는 글자와 색을 함께 씁니다. 금액은 같은 단위와 정렬로 표시합니다. 목록에서 상세를 여는 패턴은 복귀 시 유지할 상태까지 정의합니다.

페이지에 남기는 결정

다른 업무는 다른 구성으로

비용 검토에는 목록과 상세가 필요합니다. 월별 비용 추이에는 차트와 기간 비교가 필요합니다. 두 메뉴는 같은 토큰을 사용해도 골든 화면과 검증 시나리오가 다릅니다.

원문의 Rules 8가지는 네 층을 가로지릅니다.

토큰·컴포넌트에 더해 상태, 제약, 동작, 접근성, 반응형, 업무 규칙을 함께 기록합니다. 권한과 승인 조건 같은 업무 규칙의 정본은 그 업무의 명세에 두고, 디자인 시스템은 이를 화면에 어떻게 표현할지 연결합니다.

기준이 있어도 적용 과정이 필요합니다.다음 · 하네스 실행 →

02 / DESIGN HARNESS 기준을 실제 작업에 연결하기

하네스는 기준을 읽고,
만들고, 확인하는 작업 구조입니다.

디자인 시스템이 ‘어떤 기준을 지킬지’를 담는다면, 하네스는 그 기준을 언제 읽고 어떻게 검사하며 어디로 되돌릴지 연결합니다.

  1. Intent목적과 범위

    하는 일검토자가 현장 비용을 확인하고, 목록의 검토 맥락을 유지할 수 있도록 목표를 정합니다.

    남기는 것사용자, 핵심 업무, 이번에 다룰 상태와 화면 범위를 담은 짧은 브리프

  2. Rules기준 묶기

    하는 일디자인 토큰·업무 패턴·화면 계약과 그 페이지의 골든 셋을 선택합니다.

    남기는 것기준 버전, 기준 ID, 확인할 데이터·환경·상태를 고정한 작업 계약

  3. Generate화면 만들기

    하는 일선택한 컴포넌트와 패턴으로 목록·상세·예외 상태를 구현합니다.

    남기는 것실행할 수 있는 화면과 변경 내역. 이 단계만으로 완료를 판정하지 않습니다.

  4. Execute실제로 조작하기

    하는 일필터를 바꾸고 상세를 열어 닫습니다. 빈 결과와 오류도 재현합니다.

    남기는 것같은 조건에서 찍은 캡처, 조작 순서, 실제 상태 변화의 기록

  5. Verify기준과 대조하기

    하는 일골든 화면·상태·동작 계약에 관찰 결과를 대조합니다. 차이의 원인을 구분합니다.

    남기는 것기준별 결과, 근거, 영향, 수정 항목. 확인하지 않은 항목은 미검증으로 남깁니다.

  6. Refine수정과 학습

    하는 일구현이 어긋났다면 화면을 고칩니다. 기준이 부족하다면 개선 후보로 분리합니다.

    남기는 것재확인한 화면 또는 검토할 규칙 변경안. 적용 범위와 버전을 함께 기록합니다.

재료

프롬프트와 도구

프롬프트는 작업 의도를 전달하고, 생성 도구와 브라우저는 제작·실행을 돕습니다. 여기에 기준 선택, 반복 수정, 판정 기록이 연결되어야 전체 작업이 추적됩니다.

검증의 경계

판정 가능한 것부터

정적 시안은 표현과 정보 구조를 확인합니다. 브라우저는 상호작용을 확인합니다. 실제 저장·권한·계산·동시 작업은 제품 환경에서 검증합니다.

기준이 불명확할 때의 처리

‘보류 상태에서 수정할 수 있는가’처럼 업무 판단이 필요한 항목은 가정을 표시하고 담당자가 결정할 항목으로 남깁니다. 관련 없는 화면 작업은 진행할 수 있지만, 미정 조건을 통과한 것으로 기록하지 않습니다.

비교할 기준을 먼저 선택합니다.다음 · 골든 셋 →

03 / GOLDEN SET 무엇과 비교할 것인가

골든 셋은 화면과 조건을
함께 묶은 비교 기준입니다.

합의한 대표 화면, 상태별 예시, 조작 시나리오와 기대 결과를 묶습니다. 보기 좋은 이미지 한 장만으로는 무엇을 지켜야 하는지 충분히 설명하기 어렵습니다.

아래 골든 ID와 버전은 문서 안에서만 쓰는 가상 예시입니다. 실제 승인된 KSH 자산을 뜻하지 않습니다. 메뉴·페이지의 목적이 달라지면 맞는 골든을 다시 선택합니다.

GS-COST-REVIEW · v1.0 · 가상 기준

현장 비용 검토

여러 건을 비교하고 상세를 확인한 뒤, 보던 목록으로 돌아오는 업무입니다.

기본필터 적용상세 열림빈 결과오류
조합 패턴
검색 필터 + 금액 목록 + 상세 패널
대표 조건
검토자 · 데스크톱 1280 × 800 · 샘플 데이터 6건
시각 기준
헤더의 주요 행동, 금액 우측 정렬, 상태 글자·색상 병기
동작 기준
상세 닫기 후 필터·목록 스크롤·진입 행 포커스 유지

이 골든의 기준 화면입니다. 명세만으로는 “읽는 순서”나 “오류 메시지 위치” 같은 합의를 확인하기 어려워, 같은 1280 × 800 셸에 상태별 화면을 함께 둡니다. 실제 KSH 캡처가 아니라 설명용 가상 예시입니다.

상태
GS-COST-ENTRY v1.01280 × 800라이트 고정입력 담당자신규
현장 관리/비용/비용 입력
검색알림 22026.09.18 · 09:20

비용 내역 입력

현장에서 발생한 비용 한 건을 등록합니다. * 는 필수 항목입니다.

기본 정보

현장*
현장을 선택하세요
항목*
항목을 선택하세요
요청일*
YYYY-MM-DD
금액* · 원
0

증빙과 메모

증빙 파일*
파일을 첨부하세요
요청 메모
검토자가 판단할 배경을 적어 주세요

한 골든 셋에 무엇을 담나요?

구성담는 내용없으면 생기는 문제
식별과 이력ID, 버전, 적용 메뉴, 검토자, 검토일, 변경 이유어느 기준으로 만들었는지 추적하기 어렵습니다.
기준 화면뷰포트·테마·데이터·권한·상태가 명시된 캡처 또는 참조 화면환경 차이를 구현 결함으로 오인할 수 있습니다.
구조와 허용 차이필수 영역, 우선순위, 반응형 재배치, 달라도 되는 콘텐츠모든 메뉴를 같은 모양으로 복제하게 됩니다.
상태와 행동로딩·빈 결과·오류·비활성, 입력·복귀·재시도 시나리오기본 화면은 맞지만 실제 업무가 끊길 수 있습니다.
판정과 증거수용 기준 ID, 확인 방법, 캡처·조작 기록, 미검증 범위보기 좋은 결과를 업무 완료로 오해하기 쉽습니다.

고정할 것

비교 조건을 맞춥니다.

같은 화면 폭, 데이터, 상태, 테마, 언어, 역할을 사용합니다. 로딩과 애니메이션이 끝난 시점도 맞춥니다. 숫자·날짜처럼 바뀌는 값의 처리 방식을 미리 정합니다.

해석할 것

차이가 모두 결함은 아닙니다.

목적상 필요한 열의 추가나 모바일 재배치는 허용될 수 있습니다. 다만 허용 범위를 문서에 남깁니다. 이미지 차이 점수 하나만으로 업무 적합성·접근성·권한을 판정할 수는 없습니다.

선택한 기준으로 초안을 대조합니다.다음 · 비교와 수정 실습 →

04 / COMPARE & REPAIR 가상 KSH 업무 화면으로 따라가기

차이를 찾고,
수정할 이유와 방법을 연결합니다.

왼쪽 골든 기준을 유지한 채 오른쪽을 초안과 수정안으로 바꿔 보세요. 색과 배치의 차이가 어떤 업무 문제를 만드는지 함께 읽을 수 있습니다.

설명용 가상 화면입니다. 아래는 KSH 업무 화면을 변형한 실물 크기(1280 × 800) HTML이며, 현장명·금액·담당·규칙은 모두 예시입니다. 실제 KSH 캡처나 제품 테스트 결과가 아닙니다. 문서 폭에 맞춰 축소해 보여주며, 새 창에서는 원래 크기로 열립니다.

오른쪽 버전
상태
GS-COST-REVIEW v1.01280 × 800라이트 고정검토자샘플 6건골든 기준 ↔ 생성 초안 · 기본 목록
골든 기준 · 왼쪽 고정
골든 기준 고정 · 오른쪽과 같은 상태
생성 초안직접 조작해 보세요
현장 관리/비용/비용 검토
검색알림 22026.09.18 · 09:20

현장 비용 검토

현장에서 요청한 비용 항목을 확인하고 검토 결과를 기록합니다.

조회 6건 · 검토대기 3건 · 합계 5,151,000원단위: 원 · 2026.09.18 09:20 기준

현장 비용 목록 · 가상 데이터
현장항목요청일증빙금액상태담당
가람 현장2026-09-032건1,280,000검토대기박서준
누리 현장2026-09-051건840,000검토대기이도윤
다온 현장2026-09-081건320,000검토완료최지우
마루 현장2026-09-103건2,150,000검토대기박서준
소리 현장2026-09-122건465,000검토완료정하린
하늘 현장2026-09-150건96,000반려이도윤

조건에 맞는 비용 항목이 없습니다.

현재 조건: 2026.09. 현장이나 상태 조건을 바꾸거나 초기화하세요.

데이터가 없습니다.
CR-2609-015

누리 현장 · 장비비

상태
검토대기
현장
누리 현장
항목
장비비
금액
840,000원
요청일
2026-09-05
담당
이도윤
증빙
장비임대계약_0905.pdf
요청 메모
굴착기 3일 추가 임대입니다. 우천으로 공정이 밀려 연장했습니다.

골든: 기준이 가리키는 위치초안: 어긋난 지점수정 결과: 고친 지점허용 차이로 기록한 지점핀을 누르면 아래 기준 표의 그 행으로 이동합니다.

골든 기준 · 기본 목록비교의 기준이 되는 화면입니다. 표시된 코드는 아래 표의 기준이 가리키는 위치입니다.

관찰 기록 · 최근 조작 4건

  1. 아직 조작하지 않았습니다. 화면 안의 필터·행·버튼을 눌러 보세요.

따라 해 보기 · 골든 기준 또는 수정 결과

상세를 닫아도 검토 맥락이 남습니다.

  • 상태 필터를 검토대기로 바꿉니다. 목록이 3건이 됩니다.
  • ‘장비비’를 눌러 상세를 엽니다. 목록은 오른쪽 패널 뒤에 그대로 남습니다.
  • 닫기 또는 Esc로 돌아옵니다. 필터가 유지되고, 포커스는 열었던 행으로 돌아옵니다. 관찰 기록에 그 결과가 남습니다.

따라 해 보기 · 생성 초안

같은 조작이 검토 맥락을 잃습니다.

  • 버전을 생성 초안으로 바꾸고 같은 순서로 필터를 바꾼 뒤 상세를 엽니다.
  • 상세가 목록을 대체합니다. 어디까지 검토했는지 보이지 않습니다.
  • ‘목록으로’ 또는 Esc로 돌아오면 필터가 전체로 초기화되고 포커스는 페이지 제목으로 갑니다. 이것이 BEH-01 입니다.

‘달라 보임’을 수정할 수 있는 항목으로 바꿉니다.

화면 위의 핀과 같은 코드입니다. 지금 보고 있는 상태와 관련된 행은 왼쪽에 표시됩니다.

기준차이 · 영향수정 내용재확인 방법
VIS-01행동의 위치내보내기가 제목 아래로 밀리고 강조가 약합니다. 목록의 행동을 찾기 어렵습니다.합의한 헤더 우측 위치와 주요 행동 스타일을 적용합니다.같은 폭의 캡처 대조. 좁은 폭에서 재배치도 별도 확인합니다.
VIS-02금액 비교금액이 좌측 정렬되어 자릿수 비교가 느려집니다.금액 헤더·셀을 우측 정렬하고 자릿수 폭을 맞춥니다.큰 금액·0·음수 데이터로 단위·잘림·정렬을 확인합니다.
VIS-03상태 식별색 점만 있어 색의 의미를 알아야 상태를 읽을 수 있습니다.검토대기·검토완료·반려 글자를 색과 함께 표시합니다.글자로 상태를 구분할 수 있는지, 대비와 접근 가능한 이름을 확인합니다.
BEH-01목록 복귀상세가 목록을 대체하고, 돌아오면 필터가 초기화되며 포커스가 페이지 제목으로 갑니다. 시각 비교만으로는 알 수 없습니다.상세를 우측 패널로 열어 목록을 유지하고, 닫으면 필터와 진입 행 포커스를 되돌립니다.필터 → 상세 → 닫기·Esc를 각각 조작하고 관찰 기록을 남깁니다. 긴 목록의 스크롤 복원은 제품에서 확인합니다.
STA-01예외 상태조회 결과 없음과 요청 실패가 같은 빈 테이블로 보입니다. 사용자가 무엇을 해야 할지 알 수 없습니다.결과 없음에는 현재 조건과 필터 초기화를, 요청 실패에는 오류 설명과 다시 시도를 둡니다.0건 조건과 강제 오류를 각각 재현해 메시지·행동·상태 전이를 확인합니다.
ALW-01허용 차이수정 결과에만 담당 열이 있습니다. 골든 v1.0에는 없지만 검토 배정을 목록에서 확인해야 하는 업무 요구가 있습니다.결함으로 처리하지 않고 허용 차이로 기록합니다. 골든 v1.1 갱신 후보로 분리합니다.허용 범위(열 위치·폭·정렬)를 문서에 남기고, 다른 목록에도 같은 요구가 있는지 확인합니다.

이 문서에서 확인하는 것

세 버전과 네 상태의 시각 차이, 필터 유지와 진입 행 포커스 복귀, 빈 결과와 오류의 구분을 실물 크기 화면에서 시연합니다. 미리 작성한 버전을 전환하는 기능이며, 생성 도구가 실시간으로 만드는 화면은 아닙니다.

제품에서 추가로 확인할 것

실제 긴 목록의 스크롤 복원, 네트워크 오류·재시도, 역할별 권한, 저장 결과와 계산식, 반응형과 보조기술 사용을 별도로 검증합니다.

어디까지 고칠지 구분합니다.다음 · 화면 수정과 기준 개선 →

05 / TWO LOOPS 수정할 대상 구분하기

이번 화면을 고치는 일과
다음 기준을 바꾸는 일.

비교에서 발견한 차이를 곧바로 공통 규칙으로 만들지 않습니다. 기존 기준을 어긴 것인지, 기준 자체가 빠졌거나 업무 목적과 맞지 않는지 먼저 확인합니다.

A / 화면 수정

기준은 맞고, 구현이 어긋났다면

‘금액은 우측 정렬’이라는 기준이 있는데 초안은 좌측 정렬입니다. 그 셀과 컴포넌트 적용을 고치고 같은 골든 버전으로 다시 비교합니다.

차이 확인→화면 수정→재실행·재검증

남기는 것 · 기준 ID, 변경 파일, 전후 캡처, 조작 결과, 남은 항목

B / 기준 개선

기준이 부족하거나 맞지 않는다면

여러 목록에서 복귀 동작이 반복해 빠집니다. 공통 패턴에 복귀 기준을 추가할지 검토하고, 대표 화면에 적용해 효과와 부작용을 확인합니다.

개선 후보→범위·효과 검토→기준 버전 갱신

남기는 것 · 변경 이유, 적용 메뉴, 영향, 검토 결정, 전환 기준과 이력

발견한 차이에 따라 다음 행동을 정합니다.

관찰먼저 확인할 것처리
같은 기준, 다른 구현토큰·컴포넌트가 올바르게 적용됐나요?화면을 수정하고 기존 기준으로 재검증합니다.
다른 비교 조건뷰포트·데이터·권한·폰트·테마가 같은가요?조건을 맞춘 뒤 다시 비교합니다.
페이지 목적이 다름현재 메뉴에 맞는 업무 패턴·골든인가요?골든 선택을 재검토하고 페이지 계약을 구체화합니다.
기준의 누락·충돌누락 범위와 관련 업무 명세가 확인됐나요?판정 보류 항목과 기준 개선 후보를 분리해 검토합니다.
새 수정안을 골든으로 교체하기 전에,
왜 기준을 바꾸는지 설명할 수 있어야 합니다.

수정 요청은 이렇게 구체화합니다.

증상과 기준, 수정 범위, 확인 방법을 함께 전달하면 다음 작업의 판단이 명확해집니다.

대상: 현장 비용 검토 / 기본 목록
참조: GS-COST-REVIEW v1.0, VIS-02
비교 조건: 1280×800, 라이트, 검토자, 동일 샘플 데이터
차이: 금액 열이 좌측 정렬되어 자릿수 비교가 어렵습니다.
수정: 금액 헤더와 셀에 정렬·숫자 서체 규칙을 적용합니다.
유지: 데이터·계산식·상태 전이와 다른 열의 구성은 유지합니다.
재확인: 기본·큰 금액·0·음수 데이터로 정렬과 잘림을 확인합니다.
증거: 전후 캡처, 적용한 기준 ID, 아직 확인하지 않은 항목.
기준 변경이 필요하다면 화면 수정과 분리해 이유를 적어주세요.
기준이 실제 작업에서 어떻게 쓰이는지 봅니다.다음 · 실제 작업 흐름 →

06 / WORKFLOW 실제로는 이렇게 흘러갑니다

문서와 시안은 자동화가 만들고,
품질과 방향은 게이트와 사람이 지킵니다.

앞 장의 기준들이 실제 작업에서 어느 순서로 쓰이는지 그림 다섯 장으로 보입니다. 발견에서 개발 인계까지의 전체 흐름, 디자인이 자동으로 만들어지고 확정되는 순환, 시안을 만드는 두 경로, 시안이 조립되는 층, 검토 범위와 검증 단계 순서입니다. 그림은 실제 운영 문서에서 가져왔고, 조직·도구·저장소 이름만 익명화했습니다.

여기서 자동화 레인은 엔진과 스킬이 진행하는 구간이고, 사람 게이트는 담당자가 결정하는 지점입니다. 되돌리기 어려운 결정(등록·병합·배포)은 자동화가 준비까지만 하고 사람이 실행합니다.

전체 흐름

발견부터 이슈 계약까지 자동화 레인이 진행하고, 반영 승인·디자인 판정·착수 신호는 사람이 결정한 뒤 개발 인계로 넘어갑니다.

FIG. 01전체 흐름 · 자동화 레인과 사람 게이트출처 · 운영 문서 종이판 2026.09 · 조직·도구 이름 익명화라이트 · 다크 연동
기획과 디자인 파이프라인의 자동화 레인과 사람 게이트 발견부터 이슈 계약까지 자동화 레인이 진행하고, 정본 확정과 디자인 판정과 착수 신호는 사람 레인이 결정한 뒤 개발 인계로 넘어가는 흐름입니다. AUTOMATION LANE엔진과 스킬이 진행HUMAN LANE담당자가 결정 발견원천 자료 · 인터뷰 기획 생성계약 생성 · 결정론 검증 반영 승인게이트 1 · 정본 확정 시안 제작레퍼런스 · 정본 셸 디자인 판정게이트 2 · 보드 이슈 계약확정 기획 + 검토 결과 등록 · 착수 신호게이트 3 · 4 개발 인계개발 하네스 구간 LEGEND자동 단계사람 게이트경계 밖 (개발 하네스)

위 카드는 자동으로 진행되고 아래 카드는 사람이 결정합니다. 되돌리기 어려운 결정(등록 · 병합 · 배포)은 자동화가 준비까지만 합니다.

계약이 스펙입니다기획 문서와 화면 계약이 먼저 확정되고, 코드는 그 계약의 구현체입니다. 기획서와 프로토타입은 참고 자료가 아니라 1급 산출물입니다.
자동화는 증거를 남깁니다생성 결과는 감이 아니라 결정론 검증(테스트 · 점수 · 스크린샷)으로 판정합니다. 검증할 수 없는 자동화는 도입하지 않습니다.
되돌리기 어려운 결정은 사람이 내립니다이슈 등록 · 보드 전환 · 병합 · 배포는 자동화가 준비까지만 하고 실행은 사람 게이트를 거칩니다.
프로토타입 검토와 제품 승인은 다른 것입니다프로토타입에서 통과한 화면과 동작도 제품의 서버 저장 · 권한 · 동시 편집 검증을 대신하지 않습니다. 두 완료 상태는 따로 기록합니다.

디자인 자동화 워크플로우

순환할수록 확정 문법이 쌓입니다. 판정에서 막힘으로 분류된 항목만 시안 제작으로 되돌아가고, 확정된 결정은 코드에 역반영돼 화면 계약이 됩니다.

FIG. 02디자인 자동화 워크플로우출처 · 운영 문서 종이판 2026.09 · 조직·도구 이름 익명화라이트 · 다크 연동
디자인 자동화 워크플로우 기획 계약과 디자인 정본을 입력으로 레퍼런스 조회, 시안 제작, 검수와 폴리싱이 자동으로 진행되고, 담당자의 보드 판정이 막힘 항목을 수정 라운드로 되돌립니다. 확정된 결정은 코드 역반영을 거쳐 화면 계약으로 확정되고 이슈 계약과 두 경로로 넘어갑니다. 레퍼런스 승격은 담당자만 하며, 확정 문법은 토큰과 규칙과 코드로 기록됩니다. 막힘 항목은 수정 라운드 AUTOMATION LANE엔진과 스킬이 진행HUMAN LANE담당자가 결정 레퍼런스 조회실물 캡처, 어휘 사전 시안 제작정본 셸 위에서 검수·폴리싱스코어카드 80점, 스크린샷 코드 역반영토큰 · 규칙 · 컴포넌트 화면 계약 확정UI 명세, 정본 화면 레퍼런스 승격적재 레인, 담당자만 보드 판정막힘 · 거슬림 · 취향 공통 입력기획 계약, UI 의도디자인 정본 · 토큰 파일실물 캡처 폴더 이슈 계약, 인계두 경로 (FIG. 03)제품 저장소 RECORD확정 문법(토큰, 규칙, 코드)에 기록됩니다. 같은 지적이 두 번 이상 나오면 라운드 피드백이 아니라 규칙으로 승격합니다.LEGEND자동 단계사람 게이트경계 밖 (개발 하네스)되돌아가는 흐름 (수정 라운드)

사람 게이트는 보드 판정 하나입니다. 막힘만 수정 라운드로 되돌리고, 확정된 결정은 라운드 피드백이 아니라 규칙으로 승격됩니다.

레퍼런스 1층 · 실물 화면 캡처실제 운영 중인 서비스 화면 캡처 묶음. 업무 화면 시안은 작업 전에 이 폴더를 먼저 엽니다. 표 문법(무채색 헤더, 여유 행높이, 채움 버튼 1~2개)도 여기서 실측합니다.
레퍼런스 2층 · UI 어휘 사전제품별로 분석해 등재한 카탈로그. 등재 형식은 린트가 강제하고, 프로젝트에 기준을 설치하는 스크립트가 붙습니다.
레퍼런스 3층 · 적재 레인마음에 든 레퍼런스를 이미지와 분석 문서로 인박스에 넣습니다. 분류는 자동으로 붙고, 승격 판단은 사람만 합니다.
디자인 게이트검사 대상판정 방식
문서 정합 검사저장소 구조 · 경로 · 등재 · 보안 규칙결정론 스크립트의 종료 코드
수용 기준 린트"적절히", "빠르게" 같은 모호한 수용 기준 표현린트 경고
스코어카드대비 · 타이포 · 위계 · 브리프 적합 · 시그니처임계 점수 + 스크린샷, PASS · CONDITIONAL · FAIL
보드 판정 (사람)시안의 막힘 · 거슬림 · 취향막힘만 라운드 복귀, 취향은 제안만
프로토타입 검증선택한 시연 범위의 실제 동작PASS · CONDITIONAL · FAIL · BLOCKED, 미실행은 NOT_RUN

시안 조립과 검증 범위

디자인 자동화가 화면 계약을 확정하면, 실제 시안은 아래 세 그림처럼 만들어지고 검토됩니다.

FIG. 03프로토타입 두 경로출처 · 운영 문서 종이판 2026.09 · 조직·도구 이름 익명화라이트 · 다크 연동
프로토타입 두 경로 기획 계약과 디자인 정본이라는 같은 입력에서 HTML 시안 경로와 기능 프로토타입 경로가 갈라지고, 각각 화면 계약 확정과 컴포넌트 인계를 거쳐 개발 인계에서 합류하는 흐름입니다. 기능 프로토타입에서 발견한 확정 필요 사항은 개발 검토 요청안으로 정리되어 화면 계약으로 환류합니다. 확정 필요 사항 환류 PATH AHTML 시안 경로, 화면 계약을 확정PATH B기능 프로토타입 경로, 업무 동작을 검증 시안 제작HTML, 정본 셸 기준 디자인 판정보드, 막힘 · 거슬림 · 취향 검토 코멘트피드백 확장, 라이브 수정 화면 계약 확정UI 명세 · 정본 화면 이슈 계약확정 기획 + 검토 결과 개발 소스 이식파서 · 검증기 · 셸, 출처 고정 기능 구현·배포React, 검토용 URL 실무자 업무 검토실기능, 합성 데이터 개발 검토 요청안확정 필요 사항 목록 컴포넌트 인계셸 · 공통 · 기능 단위 공통 입력기획 계약 (기획 정본)디자인 정본 (제품 저장소)기준 커밋 고정 개발 인계개발 하네스 구간제품 저장소 LEGEND자동 단계사람 게이트경계 밖 (개발 하네스)환류 (확정 필요 사항을 기획 계약으로)

PATH A는 화면 계약을 확정하고 PATH B는 업무 동작을 검증합니다. 같은 입력에서 갈라져 개발 인계에서 합류합니다.

FIG. 04시안에 공통 디자인 시스템이 들어가는 방식출처 · 운영 문서 종이판 2026.09 · 조직·도구 이름 익명화라이트 · 다크 연동
시안에 공통 디자인 시스템이 들어가는 방식 제품 저장소의 셸과 토큰을 읽기 전용 기준으로 두고, 프로토타입 저장소가 공통 셸과 디자인 토큰과 공통 컴포넌트를 자동으로 제공하며, 기획자는 업무 화면의 내용과 상태와 행동 결과만 채워 검토 URL을 만듭니다. 공통 영역이 부족하면 직접 고치지 않고 담당자에게 제안합니다. READ-ONLY제품 기준 REPOSITORY LANE프로토타입 저장소가 자동으로 제공 PLANNER LANE기획자가 채우는 곳 REVIEW 공통 영역이 부족하면 담당자에게 제안 제품 셸 · 토큰실제 제품이 쓰는 값읽기만, 담당자만 동기화 공통 셸헤더 · 사이드바 · 본문 디자인 토큰색 · 간격 · 글꼴 · 모서리 공통 컴포넌트버튼 · 입력 · 표 · 상태 · 대화상자 업무 화면화면 내용 · 상태 · 행동 결과합성 업무 데이터업무별 화면 묶음 등록여기만 채웁니다 검토 URL데스크톱 · 모바일 두 폭 실무자 검토사람 게이트 (FIG. 03) RECORD어느 기획자가 만들어도 같은 셸과 같은 상태 표현이 나옵니다. 검토자는 화면의 생김새가 아니라 업무 내용과 상태 처리만 봅니다. LEGEND자동 제공기획자가 채움읽기 전용 · 경계 밖제안으로 되돌림 (직접 수정 금지)

기획자는 화면을 처음부터 그리지 않습니다. 저장소가 공통 층을 주고, 기획자는 업무 화면만 채웁니다.

FIG. 05검토 범위와 검증 4단출처 · 운영 문서 종이판 2026.09 · 조직·도구 이름 익명화라이트 · 다크 연동
프로토타입 검토 범위와 검증 4단 screen 범위는 화면과 문구와 대표 상태 5종을, workflow 범위는 입력부터 저장과 충돌 보호까지의 행동 결과를 봅니다. 검토 URL을 보내기 전 사람이 여섯 가지를 확인합니다. 검증은 문서 검사, 설계 리뷰, 프로토타입 검증, 제품 검증 4단이며 각 단이 증명하지 않는 것을 함께 적었습니다. SCOPE검토를 요청할 때 하나를 고릅니다 BEFORE SENDING사람이 확인하고 보냅니다 화면 범위 · screen화면 · 문구 · 대표 상태를 봅니다. 최소 상태 목록: 기본빈 결과오류저장 실패권한 없음 업무 흐름 범위 · workflow실제로 눌러서 행동 결과 · 실패 · 재시도를 봅니다. 입력처리편집저장충돌 보호 URL을 보내기 전 확인 6가지빌드 설정 · 검증한 커밋과 배포 커밋 일치 · 직접 진입과 새로고침합성 데이터 범위 · 실제 접근 보호 · 클라이언트 번들에 비밀값 없음 VERIFY검증 4단. 프로토타입 검증은 3단이고, 제품 검증은 개발 단계입니다 1. 문서 검사구조 · 경로 · 필수 입력 2. 설계 리뷰전제 · 모순 · 기대 결과 · 검증 가능성 3. 프로토타입 검증선택한 시연 범위의 실제 동작 4. 제품 검증 · 개발 단계지정 빌드와 환경의 실제 계약 이행 NOT PROVEN업무 정답 · 기획 승인 NOT PROVEN브라우저 · API 실행 성공 NOT PROVEN제품의 원천 데이터 · 권한 · 영속 저장 NOT PROVEN검증하지 않은 정책의 승인 RECORD판정값은 도구가 준 그대로 남깁니다: PASS · CONDITIONAL · FAIL · BLOCKED. 실행하지 않은 검사는 NOT_RUN. 프로토타입 검증 통과는 제품의 API · 권한 · 저장 검증이 아닙니다. LEGEND자동 검사이 절이 다루는 검증사람 확인경계 밖 (개발 단계)

검토를 요청할 때 범위를 먼저 고르고, 각 검증 단계가 무엇을 증명하지 않는지를 같이 적습니다.

작업에 필요한 자료와 증거를 정리합니다.다음 · 적용 체크리스트 →

07 / HANDOFF 실제 작업에 가져갈 것

기준, 비교 조건, 수정 기록을
한 묶음으로 전달합니다.

다음 사람이 같은 기준으로 재현할 수 있어야 합니다. 아래 항목은 준비 상태를 스스로 확인하기 위한 목록이며, 체크 표시가 제품 검증 통과를 뜻하지는 않습니다.

준비 항목 0 / 8 확인

체크 상태는 이 탭에서만 유지되며 새로고침하면 초기화됩니다.

실제 흐름은 앞 장에서 확인합니다

시안이 어떤 층 위에서 조립되고, 검토를 어느 범위로 요청하며, 검증 단계가 무엇을 증명하는지는 06 실제 작업 흐름의 그림 다섯 장에 있습니다. 이 체크리스트는 그 흐름을 한 번 돈 뒤 다음 사람에게 넘길 때 확인하는 목록입니다.

최소 인수 묶음

자료필수 내용
작업 브리프사용자·목적·대상 페이지·핵심 업무·제외 범위
기준 묶음디자인 시스템 참조, 골든 ID·버전, 화면 계약, 수용 기준
비교 기록동일 조건의 전후 캡처, 차이 목록, 동작 확인 기록
검증 결과기준별 결과·근거·미검증 항목·다음 확인 담당
개선 후보규칙 변경 필요성·적용 범위·효과·검토 결정·버전 이력

출처와 예시의 범위

전체 구조와 두 개선 경로는 원문 ‘디자인 하네스 가이드 · 의도에서 검증까지’를 바탕으로 구성했습니다. 왼쪽 탐색, 4층 설명 모델, 골든 셋 구성, 현장 비용 검토 화면과 수용 기준은 이번 확장 문서를 위해 추가했습니다. 수치·업무 조건·ID는 설명용이며 실제 KSH의 확정 정책이나 승인 자산이 아닙니다.

원문 작성 기준: 2026.09 · 확장 문서: 2026.09.18 · 단일 HTML · 오프라인 열람 지원

기준 → 생성 → 비교 → 수정 → 재검증전체 구조로 돌아가기 ↑