UI 완성도는 실제 내용과 상태 변화 속에서 확인한다
주장
UI의 완성도는 실제 구현에 도달할 수 있는 내용과 상태 변화 속에서 확인한다. 코드에서 예상한 문제, 화면에서 관찰한 실패, 표현에 대한 선호를 구분해 판단한다.
한 장면만으로 알 수 없는 동작
보기 좋은 한 장면만으로 긴 문구·비어 있음·실패·재입력 상황의 동작을 알 수 없다. 반대로 실제로 들어오지 않는 값을 넣은 실패나 다른 스타일로 재구현한 예시는 원래 컴포넌트의 문제를 입증하지 못한다.
실제 컴포넌트에서 관찰할 조건
-
먼저 실제 컴포넌트의 입력과 상태를 읽고 적용되는 경우를 고른다. 긴 문구, 항목 없음, 로딩·오류, 좁은 폭, 키보드·포커스 중 해당되는 축만 확인한다.
-
검증용 화면을 만들면 실제 컴포넌트와 프로젝트의 글꼴·토큰·환경을 사용한다. 대역 구현이나 재꾸민 복제본으로 결과를 대신하지 않는다.
-
문서를 보여주는 화면에서는 같은 실제 문단으로 글자 크기·행간·줄 길이·굵기의 조합을 비교하고, 표·코드·그림 안의 내용도 읽을 수 있는지 확인한다. 페이지 전체에 가로 넘침이 없다는 사실만으로 내부 내용의 잘림이 없다고 판정하지 않는다.
-
탐색에서는 목적지 도착뿐 아니라 돌아왔을 때 필요한 펼침 상태·읽던 위치·선택 대상이 유지되는지도 해당 흐름에서 확인한다. 색 대비는 실제로 그려지는 전경·배경 쌍을 사용하고, 반투명 면·하위 요소·의사요소가 관여하면 그 조합을 확인한다.
-
관찰한 조건과 결과를 구체적으로 남긴다. 「긴 이름이 카드 밖으로 넘친다」와 「간격이 더 넓으면 좋겠다」는 다른 판단이다.
-
렌더링하지 못했으면 코드 검토와 미확인 범위를 밝힌다. 원문을 읽은 것만으로 프로젝트의 실제 동작을 확인했다고 보고하지 않는다.
-
좁은 화면에서는 폭에 맞게 들어오는지와 핵심 정보·행동에 도달하는 순서를 함께 확인한다. 보조 표현이 세로로 길게 쌓여 주요 일정이나 작업을 뒤로 밀면 방문 목적에 맞춰 순서를 재검토한다.
-
공지처럼 흐름을 중단하는 요소는 첫 노출뿐 아니라 닫은 뒤 다른 페이지를 거쳐 돌아오는 경우도 살핀다. 닫기 동작, 재등장, 다시 표시하지 않기 선택은 실제 확인한 각각의 범위로 기록한다.
-
목록 안에서 본문이 펼쳐지고 주소가 바뀌는 흐름은 펼침·주소 변경·직접 접속·새로고침·뒤로가기 복원을 각각 확인한다. 주소가 생겼다는 사실만으로 공유나 복귀의 전체 동작이 검증되지는 않는다. 메뉴·본문 번호와 갱신 날짜도 같은 대상을 뜻하는지 대조하되, 표기 차이만으로 실제 수정일이나 내부 데이터 오류를 단정하지 않는다.
다이어그램과 설명을 함께 확인하기
다이어그램에서는 도형·라벨·범례·주변 설명이 같은 내용을 말하는지도 대조한다. 기하 검사가 찾는 겹침과 실제 글꼴·내용·언어·출력 환경에서의 가독성은 확인 범위가 다르다. 자동 검사의 존재나 일부 통과를 화면 전체의 정확성으로 확대하지 않는다. 결과물을 넘길 때도 자동 검사 통과, 실제 브라우저에서 모은 증거, 사람이 결과물을 보고 내린 판단을 따로 기록하고, 한 단계의 통과로 다른 단계를 채우지 않는다.
Diagram Design의 2026-09-15 확인 버전에서는 Sankey 도표의 Build·Lint 수치가 아래 설명문의 수치와 달랐다. 또 설계 기록에는 이전 검사들을 통과한 샘플의 글자 가림을 렌더링에서 발견한 사례가 있다. 직접 관찰한 불일치와 원문에 기록된 과거 사례를 구분하고, 각각의 버전·조건·검증 범위는 연결된 Source에 남긴다.
폭에 맞는 설명 자료의 실제 읽기
그림이 좁은 본문 폭에 맞아도 내부 라벨·범례가 함께 작아질 수 있다. 비교 데모가 세로로 재배치되면 비교 대상과 조작부가 한 번에 보이는지, 현재 조건을 기억하며 결과를 읽을 수 있는지도 확인한다. 출력 폭·내용의 가독성·조작 순서는 서로 다른 확인 항목이다.
초기화 중 비어 있는 캔버스는 그려진 뒤 상태와 대조하고, 지연된 한 장면을 영구 실패로 확대하지 않는다. 버튼 클릭과 최종 상태의 확인은 차단 구간의 프레임·응답 시간 측정을 대신하지 않는다. 기술 글의 설명 구조와 시각 자료 - Kciter > 화면에 들어옴과 읽을 수 있음에 좁은 화면의 라벨·데모 줄바꿈과 실제 확인 범위를 남겼다.
근거
-
개발 블로그의 독자와 읽기 흐름 - Michael Lynch: 모바일 넘침·글꼴·대비를 확인하라는 저자의 조언을 2026-10-09 대조했다. 기존 읽기 조건의 추가 근거이며 실제 화면을 새로 검사한 기록은 아니다.
-
OptiChallenge의 대회 소개와 참가자 화면: 390px에서 네 달의 달력 뒤에 주요 일정 목록이 놓이는 순서와, 공지를 닫은 뒤 홈 복귀 시 다시 나타나는 흐름을 관찰한 사례. 반복 노출 선택의 저장은 검증하지 않았다.
-
문서·제품·작업 화면의 설계 판단 - 개인사이트 비교 기록 > 여러 활동을 잇는 개인사이트와 탐색 비용 — 2026-09-26: Taewoo Park 사이트의 소개·작업 연결, 글 펼침·주소 변경, 번호·갱신 표기를 추가로 대조한 사례.
-
문서·제품·작업 화면의 설계 판단 - 개인사이트 비교 기록: 기술 블로그의 실제 문단·좁은 화면과 역할별 색의 관찰 조건. 개인사이트의 복귀 상태와 조작 선택은 개인사이트 설계와 운영의 의사결정 - Codex 대화 > 후속 선택과 실제 적용 — 2026-09-13~15에 연결한다.
-
인터페이스 판단과 검토 기준 - Jakub Krehel: break의 가능한 입력·실제 컴포넌트·관찰 범위, better-layout의 내용 증가와 폭 변화 검토.
-
자기용 기록과 단편 자기소개 - cho.sh 대화: 좁은 홈 화면의 문구 잘림·기존 노트의 Markdown 노출과 검색·도구의 실제 상태 변화를 각각 관찰한 사례. 상세 조건과 미검증 범위는 연결된 프로젝트 원천에 둔다.
-
다이어그램의 의미·축약·검증 - Diagram Design: 라벨 기하 검증의 범위와 도표·주변 설명의 실제 불일치.
-
다이어그램 배치 검증과 라벨을 지키는 수리 - Archify: 결정적 검사·브라우저 증거·시각 검토를 따로 기록하는 전달 계약.
원문의 고정된 실행 횟수·보고 형식은 이 주장에 포함하지 않았다. 확인 범위는 현재 변경과 사용자 영향에 맞춘다.