designpaca/apps/site/public/work/form-architecture/design.md
Yun Chan e09d4efb1c
Some checks failed
ci / build (push) Has been cancelled
feat: strengthen design skill and refresh all showcases
2026-09-12 18:16:33 +09:00

4.5 KiB

스튜디오 폼 — 디자인 결정 기록

0. 브리프와 범위

  • 무엇을: 빛·비례·구조를 사진과 도면으로 함께 읽는 가상 공간건축 포트폴리오 예시.
  • 누구에게: 건축 작업의 기록 방식을 살피고 프로젝트 인덱스로 이동하려는 방문자.
  • 제약: 기존 흑백 사진·도면과 Pretendard를 보존한다. 실제 수행 이력·연락처로 오인될 수 없게 가상 사례와 생성 이미지라는 사실을 가까이에 표기한다. 기본 언어는 ko-KR 한국어이며, 영문은 고유 표기 FORM만 사용한다.

경로: 연장. 정적 HTML의 토큰·콘텐츠 구조를 재구성했으며 이 문서가 이후 작업의 국소 기준이 된다.

1. 조사와 관찰

출처 관찰 적용 범위
David Chipperfield Architects — Projects 프로젝트 사진·모형과 그 아래 정렬된 메타데이터가 탐색의 위계를 소유하고, Grid/List/Filter는 보조 탐색으로 물러난다. 사진을 첫 화면의 주 장면으로 두고, 인덱스는 번호·이름·위치·연도를 정렬한다.
Klim Type Foundry 글자와 작업물이 표면을 주도하고 인터페이스는 뒤로 물러난다. 큰 헤드라인, 얇은 선, 흑백 사진의 우선순위.
Carbon 2x Grid 넓은 표면과 읽기 표면은 분리된 레일을 가져야 한다. 최대 1800px stage와 1280px 정보 레일, 720px 본문 measure.

표현을 복제하지 않았다. 이 페이지의 고유한 결합은 제목 → 실제로 보이는 사진 → 도면의 이유라는 건축 기록 순서다.

2. 수정 전 문제와 결정

  • 1440px 첫 화면에서 소개 문단이 약 80px 열에 갇혀 단어마다 줄바꿈됐고, 사진과 인덱스 행동이 첫 화면에 없었다.
  • 설립 연도 예시, 팀 구성 예시처럼 작업 판독에 기여하지 않는 가상 수치를 제거했다.
  • 기존 인덱스의 여섯 항목은 모두 같은 도면으로 연결됐지만 그 관계가 설명되지 않았다. 이제 목록 직전에 같은 가상 도면을 다른 관점에서 참조한다는 사실을 고지한다.
  • 기존 생성 이미지는 유지하고 각 사진 캡션에 생성 이미지 · 실제 프로젝트 사진 아님을 남긴다.

3. 토큰과 레이아웃 계약

  • 표면 #fdfdfb, 전경 #171b19, 중립 선 #d8dbd7, 보조 글자 #5b615d.
  • 본문 16px 이상, 캡션 12px 이상, 본문 줄간 1.75, 읽기 폭 720px.
  • h1: clamp(2.5rem, 5.5vw, 5.5rem); Pretendard 단일 패밀리.
  • 1440px 정보 레일 최대 1280px, stage 최대 1800px; 2560px에서는 사진만 stage에 머물고 산문은 720px 내에서 읽힌다.
  • 모바일 gutter는 20px, 320px에서 16px. 이미지의 원본 비율을 유지하며 object-fit: cover는 슬롯에서 정한 비율 안의 편집에만 사용한다.

성능 예산: 첫 화면 JS 0KB / 첫 인터랙션은 정적 링크 / 폰트 패밀리 1개. 이미지 생성·추가는 하지 않는다.

4. 검증 추적

  • 320, 390, 768, 1440, 1920, 2560px에서 문서 및 요소 가로 오버플로, h1/본문 가시성, 레일 상한, 이미지 로드, 탭 순서를 점검한다.
  • prefers-reduced-motion과 효과 제거 상태에서도 콘텐츠가 같은 순서로 읽히는지 점검한다.
  • 200% 텍스트 확대에서 본문·CTA가 사라지지 않는지 점검한다.
  • 실행 결과와 화면 캡처는 outputs/design-expertise-20260912/form/에 남긴다.

2026-09-12 전체 쇼케이스 점검

  • 기존 흑백 사진·도면 구도, 앵커와 긴 모바일 라벨의 줄바꿈 규칙을 보존했다. 로컬 MaruBuri 파일을 함께 제공하되 현재 Pretendard 단일 패밀리 본문 계약은 바꾸지 않았다.
  • verify-final 18개 묶음은 16개가 즉시 통과했다. 전체 묶음의 invariant·visual 검사는 Gaon·Dure를 대상으로 하며, 나머지 2개는 수정 뒤 release 독립 재실행에서 ALL PASS·ALL MATCH였다.
  • root는 28개 모바일, 21개 데스크톱, 7개 하위 경로와 30개 앱 상태를 직접 검토해 수용했다. stress 112건은 hard failure 0이며, 가로 넘침 4건은 targeted fix 뒤 390px 재측정에서 0이다.
  • 이 기록은 렌더·계약 범위의 현재 결과다. 모든 폭·키보드 경로·인쇄 등 개별 기능을 완전 재실행했다는 뜻이 아니며, 참여자 과업 효과도 미측정이다.