1. 작업 소개
사진 위에 워드마크를 배치한 랜딩 첫 화면이다. 여섯 방향을 만들었다 — A 조각 필드, B 인물, C 작업대, D 패키지, E 플랫 그래픽, F 캠페인. 이미지는 gpt_image_2 로 16:9 · 2K 생성했고 크레딧 48 을 썼다.
여섯 장 각각에 워드마크를 실제 서체(Anton)와 색 토큰으로 얹은 목업을 붙이고, 그 조판이 읽히는지를 픽셀에서 재서 판정까지 적었다.
2. 구현 과정과 선택 기준
사진 위 글자의 가독성을 확인하려면 대비가 가장 낮은 지점도 살펴야 한다. 워드마크가 놓일 만한 구역을 격자로 훑어 그 구역 안 가장 불리한 픽셀과의 대비를 쟀다. 평균 대비는 쉽게 통과하지만, 글자 한 획이 밝은 조각 위에 걸치는 순간 그 획만 사라진다.
하위 5% 값으로 A 는 1.89, C 는 1.34 라 그대로는 못 쓰고, B 4.34·F 8.69·E 9.58·D 10.66 은 그대로 통과했다. 그래서 A·C 는 워드마크를 면으로 앉혔고 — 처리 후 A 12.46, C 5.15 — B 는 어두운 면 위에 그대로 얹었다.
측정값만으로 고르면 B 가 쉬운 답이지만, 그 화면의 주인공은 만든 것이 아니라 모델이다. F 도 같은 값을 치른다.
3. 현재 상태와 남은 작업
A 조각 필드를 권하는 것으로 정리했다. 조각을 모은 이미지가 사이트의 주제와 어울리고 사람의 얼굴에 브랜드가 의존하지 않기 때문이다. 아티팩트에 적힌 상태로는 A 가 이미 구현돼 화면에 올라가 있고, D·E 는 그 뒤 두 번째 레퍼런스에서 나온 것이라 바꾸려면 화면 교체가 따른다.
원본은 여섯 안 모두 2688×1520 으로 남아 있어 다른 크롭을 다시 뽑을 수 있다. 안을 확정하면 screens/home.md 의 layout·a11y 절과 대비 수치를 그 안에 맞춰 고친다.