공유하는 기준
같은 의미는 같은 방식으로
검토대기 배지는 글자와 색을 함께 씁니다. 금액은 같은 단위와 정렬로 표시합니다. 목록에서 상세를 여는 패턴은 복귀 시 유지할 상태까지 정의합니다.
의도에서 검증까지
의도를 규칙으로 정리하고, 만든 화면을 실행해 기준과 비교합니다. 이번 화면을 고치는 일과 다음 작업의 기준을 바꾸는 일을 구분하는 것이 디자인 하네스의 핵심입니다.
공유하는 표현과 업무 패턴의 기준
02 / HARNESS디자인 하네스기준을 생성·실행·검증에 연결
03 / GOLDEN SET골든 셋페이지·상태·조건이 담긴 비교 기준
단계를 선택하면 아래에서 역할과 예시를 확인할 수 있습니다.
모든 작업이 참조하는 기준
A화면 수정 · 같은 기준으로 재검증
기준의 누락을 발견하면
B규칙 개선 · 후보 → 검토 → 반영
한 화면의 수정은 그 작업에 남기고,
검증한 배움은 다음 기준에 남깁니다.
화면이 기준을 어겼다면 구현을 수정합니다. 기준 자체에 누락이 있다면 개선 후보를 만들고, 검증한 뒤 규칙에 반영합니다.
선택한 방향을 토큰과 컴포넌트, 상태와 동작의 계약으로 구체화합니다. 공통 디자인 기준과 화면별 업무 규칙을 함께 참조합니다.
↑ 다른 단계 선택하기Rules는 기준을 묶어 부르는 이름입니다. 실제 정본은 토큰 파일, 컴포넌트 코드, 화면 명세 등에 나누어 둘 수 있습니다.
Intent · 목적·사용자·화면 의도를 정하고 방향을 탐색합니다.
Rules · 선택한 방향을 토큰, 상태, 동작, 업무 계약으로 구체화합니다.
Generate · AI·디자이너·개발자가 기준을 읽고 Figma 시안이나 코드를 만듭니다.
Execute · 브라우저와 대상 환경에서 실제로 렌더링하고 조작합니다.
Verify · 실행 결과를 의도와 수용 기준에 대조하고 증거를 남깁니다.
Refine · 화면을 수정하거나, 검증한 개선 후보를 다음 작업의 규칙에 반영합니다.
BRIEF → DIVERGE → TOKENS → COMMIT → VERIFY → LEARN
Forge의 실제 작업 절차입니다. 의도와 방향을 정하고, 토큰과 작업 계약을 구체화한 뒤 제작·검증합니다. 위 설명도는 이 절차의 역할을 풀어 쓴 모델이며, 특히 실행과 판정을 나누고 학습이 기준으로 돌아가는 조건을 보여줍니다.
프로토타입에서는 화면과 상호작용을 확인합니다. 실제 제품의 서버 저장, 권한, 동시 작업은 제품 환경에서 별도로 검증합니다. 통과 기록에는 확인한 범위와 남은 범위를 함께 적습니다.
01 / DESIGN SYSTEM 무엇을 일관되게 만들 것인가
색과 버튼에서 시작해, 반복되는 업무 구조와 조작 방식까지 정리합니다. 화면마다 새로 결정할 일을 줄이고, 달라야 하는 부분을 명확히 합니다.
이 문서의 4층 구성은 설명을 위한 모델입니다. KSH의 공식 표준을 옮긴 것이 아닙니다. 예시는 KSH 업무 화면을 참고한 가상 서비스 ‘현장 비용 검토’로 통일합니다.
| 층 | 정의하는 것 | 현장 비용 검토 예시 | 기준을 둘 곳 |
|---|---|---|---|
| 01 · 토큰기본값 | 색, 글자, 간격, 반경 등 반복되는 표현 값 | 주요 행동의 색, 숫자 서체, 8px 단위 간격 | 토큰 파일 · 테마 |
| 02 · 컴포넌트부품 | 버튼·필터·테이블·상태 배지의 속성과 상태 | 금액 셀의 우측 정렬, 글자를 포함한 상태 배지 | 컴포넌트 코드 · 사용 문서 |
| 03 · 업무 패턴반복되는 조합 | 사용자가 업무를 마치는 화면 구성과 순서 | 필터 → 목록 탐색 → 상세 검토 → 목록 복귀 | 패턴 문서 · 대표 화면 |
| 04 · 화면 계약페이지별 적용 | 그 페이지의 정보·상태·동작·수용 기준 | 어떤 현장·기간을 조회하고, 상세 닫기 후 무엇을 유지할지 | 화면 명세 · 시나리오 |
아래 수치는 이 가상 예시의 설명용 값입니다. 실제 프로젝트에서는 기존 토큰과 컴포넌트 계약을 먼저 확인합니다.
공유하는 기준
검토대기 배지는 글자와 색을 함께 씁니다. 금액은 같은 단위와 정렬로 표시합니다. 목록에서 상세를 여는 패턴은 복귀 시 유지할 상태까지 정의합니다.
페이지에 남기는 결정
비용 검토에는 목록과 상세가 필요합니다. 월별 비용 추이에는 차트와 기간 비교가 필요합니다. 두 메뉴는 같은 토큰을 사용해도 골든 화면과 검증 시나리오가 다릅니다.
토큰·컴포넌트에 더해 상태, 제약, 동작, 접근성, 반응형, 업무 규칙을 함께 기록합니다. 권한과 승인 조건 같은 업무 규칙의 정본은 그 업무의 명세에 두고, 디자인 시스템은 이를 화면에 어떻게 표현할지 연결합니다.
02 / DESIGN HARNESS 기준을 실제 작업에 연결하기
디자인 시스템이 ‘어떤 기준을 지킬지’를 담는다면, 하네스는 그 기준을 언제 읽고 어떻게 검사하며 어디로 되돌릴지 연결합니다.
하는 일검토자가 현장 비용을 확인하고, 목록의 검토 맥락을 유지할 수 있도록 목표를 정합니다.
남기는 것사용자, 핵심 업무, 이번에 다룰 상태와 화면 범위를 담은 짧은 브리프
하는 일디자인 토큰·업무 패턴·화면 계약과 그 페이지의 골든 셋을 선택합니다.
남기는 것기준 버전, 기준 ID, 확인할 데이터·환경·상태를 고정한 작업 계약
하는 일선택한 컴포넌트와 패턴으로 목록·상세·예외 상태를 구현합니다.
남기는 것실행할 수 있는 화면과 변경 내역. 이 단계만으로 완료를 판정하지 않습니다.
하는 일필터를 바꾸고 상세를 열어 닫습니다. 빈 결과와 오류도 재현합니다.
남기는 것같은 조건에서 찍은 캡처, 조작 순서, 실제 상태 변화의 기록
하는 일골든 화면·상태·동작 계약에 관찰 결과를 대조합니다. 차이의 원인을 구분합니다.
남기는 것기준별 결과, 근거, 영향, 수정 항목. 확인하지 않은 항목은 미검증으로 남깁니다.
하는 일구현이 어긋났다면 화면을 고칩니다. 기준이 부족하다면 개선 후보로 분리합니다.
남기는 것재확인한 화면 또는 검토할 규칙 변경안. 적용 범위와 버전을 함께 기록합니다.
재료
프롬프트는 작업 의도를 전달하고, 생성 도구와 브라우저는 제작·실행을 돕습니다. 여기에 기준 선택, 반복 수정, 판정 기록이 연결되어야 전체 작업이 추적됩니다.
검증의 경계
정적 시안은 표현과 정보 구조를 확인합니다. 브라우저는 상호작용을 확인합니다. 실제 저장·권한·계산·동시 작업은 제품 환경에서 검증합니다.
‘보류 상태에서 수정할 수 있는가’처럼 업무 판단이 필요한 항목은 가정을 표시하고 담당자가 결정할 항목으로 남깁니다. 관련 없는 화면 작업은 진행할 수 있지만, 미정 조건을 통과한 것으로 기록하지 않습니다.
03 / GOLDEN SET 무엇과 비교할 것인가
합의한 대표 화면, 상태별 예시, 조작 시나리오와 기대 결과를 묶습니다. 보기 좋은 이미지 한 장만으로는 무엇을 지켜야 하는지 충분히 설명하기 어렵습니다.
아래 골든 ID와 버전은 문서 안에서만 쓰는 가상 예시입니다. 실제 승인된 KSH 자산을 뜻하지 않습니다. 메뉴·페이지의 목적이 달라지면 맞는 골든을 다시 선택합니다.
GS-COST-REVIEW · v1.0 · 가상 기준
여러 건을 비교하고 상세를 확인한 뒤, 보던 목록으로 돌아오는 업무입니다.
이 골든의 기준 화면입니다. 명세만으로는 “읽는 순서”나 “오류 메시지 위치” 같은 합의를 확인하기 어려워, 같은 1280 × 800 셸에 상태별 화면을 함께 둡니다. 실제 KSH 캡처가 아니라 설명용 가상 예시입니다.
현장에서 발생한 비용 한 건을 등록합니다. * 는 필수 항목입니다.
현장별 비용의 추이와 차이를 확인하고, 이상 항목의 근거로 이동합니다.
차트는 월별 합계입니다. 옆의 근거 목록은 그 달의 상위 비용 한 건씩이라 합계와 다릅니다.
현재 조건: 2026.04 – 2026.09 · 전체 현장. 기간이나 현장 조건을 바꿔 보세요.
집계 서버가 응답하지 않습니다. 잠시 뒤 다시 시도하거나, 계속 실패하면 담당자에게 알려 주세요. (오류 코드 TRD-503)
| 구성 | 담는 내용 | 없으면 생기는 문제 |
|---|---|---|
| 식별과 이력 | ID, 버전, 적용 메뉴, 검토자, 검토일, 변경 이유 | 어느 기준으로 만들었는지 추적하기 어렵습니다. |
| 기준 화면 | 뷰포트·테마·데이터·권한·상태가 명시된 캡처 또는 참조 화면 | 환경 차이를 구현 결함으로 오인할 수 있습니다. |
| 구조와 허용 차이 | 필수 영역, 우선순위, 반응형 재배치, 달라도 되는 콘텐츠 | 모든 메뉴를 같은 모양으로 복제하게 됩니다. |
| 상태와 행동 | 로딩·빈 결과·오류·비활성, 입력·복귀·재시도 시나리오 | 기본 화면은 맞지만 실제 업무가 끊길 수 있습니다. |
| 판정과 증거 | 수용 기준 ID, 확인 방법, 캡처·조작 기록, 미검증 범위 | 보기 좋은 결과를 업무 완료로 오해하기 쉽습니다. |
고정할 것
같은 화면 폭, 데이터, 상태, 테마, 언어, 역할을 사용합니다. 로딩과 애니메이션이 끝난 시점도 맞춥니다. 숫자·날짜처럼 바뀌는 값의 처리 방식을 미리 정합니다.
해석할 것
목적상 필요한 열의 추가나 모바일 재배치는 허용될 수 있습니다. 다만 허용 범위를 문서에 남깁니다. 이미지 차이 점수 하나만으로 업무 적합성·접근성·권한을 판정할 수는 없습니다.
04 / COMPARE & REPAIR 가상 KSH 업무 화면으로 따라가기
왼쪽 골든 기준을 유지한 채 오른쪽을 초안과 수정안으로 바꿔 보세요. 색과 배치의 차이가 어떤 업무 문제를 만드는지 함께 읽을 수 있습니다.
설명용 가상 화면입니다. 아래는 KSH 업무 화면을 변형한 실물 크기(1280 × 800) HTML이며, 현장명·금액·담당·규칙은 모두 예시입니다. 실제 KSH 캡처나 제품 테스트 결과가 아닙니다. 문서 폭에 맞춰 축소해 보여주며, 새 창에서는 원래 크기로 열립니다.
현장에서 요청한 비용 항목을 확인하고 검토 결과를 기록합니다.
조회 6건 · 검토대기 3건 · 합계 5,151,000원단위: 원 · 2026.09.18 09:20 기준
| 현장 | 항목 | 요청일 | 증빙 | 금액 | 상태 | 담당 |
|---|---|---|---|---|---|---|
| 가람 현장 | 2026-09-03 | 2건 | 1,280,000 | 검토대기 | 박서준 | |
| 누리 현장 | 2026-09-05 | 1건 | 840,000 | 검토대기 | 이도윤 | |
| 다온 현장 | 2026-09-08 | 1건 | 320,000 | 검토완료 | 최지우 | |
| 마루 현장 | 2026-09-10 | 3건 | 2,150,000 | 검토대기 | 박서준 | |
| 소리 현장 | 2026-09-12 | 2건 | 465,000 | 검토완료 | 정하린 | |
| 하늘 현장 | 2026-09-15 | 0건 | 96,000 | 반려 | 이도윤 |
현재 조건: 2026.09. 현장이나 상태 조건을 바꾸거나 초기화하세요.
서버 응답이 없습니다 (요청 ID EX-4127). 선택한 조건은 유지됩니다.
골든: 기준이 가리키는 위치초안: 어긋난 지점수정 결과: 고친 지점허용 차이로 기록한 지점핀을 누르면 아래 기준 표의 그 행으로 이동합니다.
관찰 기록 · 최근 조작 4건
따라 해 보기 · 골든 기준 또는 수정 결과
따라 해 보기 · 생성 초안
화면 위의 핀과 같은 코드입니다. 지금 보고 있는 상태와 관련된 행은 왼쪽에 표시됩니다.
| 기준 | 차이 · 영향 | 수정 내용 | 재확인 방법 |
|---|---|---|---|
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 실제로는 이렇게 흘러갑니다
앞 장의 기준들이 실제 작업에서 어느 순서로 쓰이는지 그림 다섯 장으로 보입니다. 발견에서 개발 인계까지의 전체 흐름, 디자인이 자동으로 만들어지고 확정되는 순환, 시안을 만드는 두 경로, 시안이 조립되는 층, 검토 범위와 검증 단계 순서입니다. 그림은 실제 운영 문서에서 가져왔고, 조직·도구·저장소 이름만 익명화했습니다.
여기서 자동화 레인은 엔진과 스킬이 진행하는 구간이고, 사람 게이트는 담당자가 결정하는 지점입니다. 되돌리기 어려운 결정(등록·병합·배포)은 자동화가 준비까지만 하고 사람이 실행합니다.
발견부터 이슈 계약까지 자동화 레인이 진행하고, 반영 승인·디자인 판정·착수 신호는 사람이 결정한 뒤 개발 인계로 넘어갑니다.
위 카드는 자동으로 진행되고 아래 카드는 사람이 결정합니다. 되돌리기 어려운 결정(등록 · 병합 · 배포)은 자동화가 준비까지만 합니다.
순환할수록 확정 문법이 쌓입니다. 판정에서 막힘으로 분류된 항목만 시안 제작으로 되돌아가고, 확정된 결정은 코드에 역반영돼 화면 계약이 됩니다.
사람 게이트는 보드 판정 하나입니다. 막힘만 수정 라운드로 되돌리고, 확정된 결정은 라운드 피드백이 아니라 규칙으로 승격됩니다.
| 디자인 게이트 | 검사 대상 | 판정 방식 |
|---|---|---|
| 문서 정합 검사 | 저장소 구조 · 경로 · 등재 · 보안 규칙 | 결정론 스크립트의 종료 코드 |
| 수용 기준 린트 | "적절히", "빠르게" 같은 모호한 수용 기준 표현 | 린트 경고 |
| 스코어카드 | 대비 · 타이포 · 위계 · 브리프 적합 · 시그니처 | 임계 점수 + 스크린샷, PASS · CONDITIONAL · FAIL |
| 보드 판정 (사람) | 시안의 막힘 · 거슬림 · 취향 | 막힘만 라운드 복귀, 취향은 제안만 |
| 프로토타입 검증 | 선택한 시연 범위의 실제 동작 | PASS · CONDITIONAL · FAIL · BLOCKED, 미실행은 NOT_RUN |
디자인 자동화가 화면 계약을 확정하면, 실제 시안은 아래 세 그림처럼 만들어지고 검토됩니다.
PATH A는 화면 계약을 확정하고 PATH B는 업무 동작을 검증합니다. 같은 입력에서 갈라져 개발 인계에서 합류합니다.
기획자는 화면을 처음부터 그리지 않습니다. 저장소가 공통 층을 주고, 기획자는 업무 화면만 채웁니다.
검토를 요청할 때 범위를 먼저 고르고, 각 검증 단계가 무엇을 증명하지 않는지를 같이 적습니다.
07 / HANDOFF 실제 작업에 가져갈 것
다음 사람이 같은 기준으로 재현할 수 있어야 합니다. 아래 항목은 준비 상태를 스스로 확인하기 위한 목록이며, 체크 표시가 제품 검증 통과를 뜻하지는 않습니다.
체크 상태는 이 탭에서만 유지되며 새로고침하면 초기화됩니다.
시안이 어떤 층 위에서 조립되고, 검토를 어느 범위로 요청하며, 검증 단계가 무엇을 증명하는지는 06 실제 작업 흐름의 그림 다섯 장에 있습니다. 이 체크리스트는 그 흐름을 한 번 돈 뒤 다음 사람에게 넘길 때 확인하는 목록입니다.
| 자료 | 필수 내용 |
|---|---|
| 작업 브리프 | 사용자·목적·대상 페이지·핵심 업무·제외 범위 |
| 기준 묶음 | 디자인 시스템 참조, 골든 ID·버전, 화면 계약, 수용 기준 |
| 비교 기록 | 동일 조건의 전후 캡처, 차이 목록, 동작 확인 기록 |
| 검증 결과 | 기준별 결과·근거·미검증 항목·다음 확인 담당 |
| 개선 후보 | 규칙 변경 필요성·적용 범위·효과·검토 결정·버전 이력 |
전체 구조와 두 개선 경로는 원문 ‘디자인 하네스 가이드 · 의도에서 검증까지’를 바탕으로 구성했습니다. 왼쪽 탐색, 4층 설명 모델, 골든 셋 구성, 현장 비용 검토 화면과 수용 기준은 이번 확장 문서를 위해 추가했습니다. 수치·업무 조건·ID는 설명용이며 실제 KSH의 확정 정책이나 승인 자산이 아닙니다.
원문 작성 기준: 2026.09 · 확장 문서: 2026.09.18 · 단일 HTML · 오프라인 열람 지원