본문 바로가기

  • 교재 소개

  • 7장 한 사람의 폴더에서 팀의 자산으로

  • 7.2 결과 품질을 어떻게 측정하고 키워가는가

결과 품질을 어떻게 측정하고 키워가는가

7-1에서 하네스를 팀 자산으로 옮겼습니다. 그런데 자산은 한 번 깔아두면 끝이 아닙니다. 결과 페이지의 품질을 측정하고, 디자인팀이 디자인 시스템을 갱신할 때 동기화하고, 흔들리는 자리가 새로 생기면 그 자리를 다시 좁히는 일이 매주 이어집니다. 여기서는 그 운영 흐름의 모양을 봅니다.

1. 무엇을 측정해야 하는가

랜딩 페이지 하네스의 결과 품질은 사실 두 층으로 나뉩니다.

1층, 디자인 시스템 준수도

결과 HTML이 토큰·컴포넌트 규칙을 얼마나 지켰는가. 임의 hex 색은 0개여야 하고, .btn 외 자체 버튼 스타일은 0개여야 하고, 푸터 회사 정보는 항상 있어야 합니다. 이건 기계가 측정할 수 있는 자리입니다.

2층, 카피 톤과 설득력

결과 페이지의 카피가 위니브 톤을 따랐는가, 핵심 CTA가 명확한가, 페이지를 본 사람이 신청하고 싶은 느낌을 받는가. 이건 사람이 판단해야 하는 자리입니다.

두 층이 다른 방식으로 측정되어야 한다는 점이 가장 중요한 출발점입니다. 한쪽으로만 가면 한쪽이 무너집니다.

2. 기계가 자동으로 측정

다음 정도의 검사를 매 풀 리퀘스트마다 자동으로 돌리면 1층 품질이 무너질 자리가 거의 없어집니다.

# 임의 hex 색이 있으면 실패
grep -rE "#[0-9a-fA-F]{6}" output/*.html && exit 1

# style/ 외 외부 CSS를 link하면 실패
grep -rE 'rel="stylesheet"' output/*.html \
  | grep -v "../style/index.css" && exit 1

# 푸터 회사 정보가 빠지면 실패
for f in output/*.html; do
  grep -q "(주)위니브" "$f" || { echo "Missing footer: $f"; exit 1; }
done

이 정도 규칙을 GitHub Actions나 사내 CI에 박아두면, 모델이 한 번 실수해서 임의 색을 써도 풀 리퀘스트 단계에서 잡힙니다.

규칙 자체는 SKILL.md에 이미 적혀 있는 내용이지만, 글로 적힌 규칙은 어쩌다 지켜지지 않을 수 있습니다. CI 검사가 마지막 안전망 역할을 합니다.

3. 사람이 들여다보는 자리

카피 톤과 설득력은 자동으로 측정하기 어렵습니다. 다만 다음 두 가지 자리를 두면 사람의 판단이 한 곳에 모입니다.

페이지 단위의 리뷰 박스

매 페이지가 풀 리퀘스트로 올라올 때, PR 본문에 다음 체크리스트 박스를 자동으로 깔아둡니다.

## 카피 톤 체크 (마케팅 리드)

- [ ] 메인 헤드라인이 한두 줄, 동사형 종결
- [ ] CTA가 동사형, 5글자 이내
- [ ] 자뻑 표현 없음 (업계 최고, 유일한 등)
- [ ] 푸터 회사 정보 표기 정확
- [ ] 추천 대상이 구체적 (애매한 "모두" 같은 표현 없음)

마케팅 리드가 이 박스를 1분 안에 훑고 체크합니다. 5개 중 4개 이상이면 그대로 머지, 흔들리는 자리가 보이면 한 줄 코멘트를 답니다.

한 달치 페이지 모음

매월 첫째 주에 그 달 만든 페이지를 한 자리에 모아 디자인·마케팅 리드가 함께 봅니다. 한 페이지씩 보면 안 보이던 패턴이 모아 놓으면 보입니다. "이 달에 만든 페이지 다섯 개가 모두 Hero 이미지 자리에 그라데이션을 썼는데, 너무 비슷하니 다음부터는 변주를 주자" 같은 회고가 여기서 나옵니다.

이 회고에서 결정된 사항이 다음 달의 components.md나 brand.md 변경으로 이어집니다. 사람의 판단이 다시 폴더의 규칙으로 굳어지는 자리입니다.

4. 디자인 시스템 갱신과의 동기화

디자인팀은 Figma를 계속 진화시킵니다. 새 컴포넌트를 추가하거나, 색 토큰을 조정하거나, 컴포넌트의 모서리 반경을 살짝 바꿉니다. 이 변경이 하네스의 style/ 폴더로 따라가지 않으면 두 자산이 어긋나기 시작합니다.

가장 단순한 답은 주기적 추출 작업입니다. 위니브의 경우 2주에 한 번, 디자인 리드가 Figma Dev Mode MCP로 토큰을 다시 한 번 받아서 style/tokens.css를 갱신합니다. 변경 자리가 분명하니 풀 리퀘스트가 깔끔합니다.

PR title: [tokens] 2026-06-05 디자인팀 갱신 반영

- --primary 미세 조정: #2e6ff2 → #2563eb
- --activation: #dee8ff → #e0e7ff
- 새 컴포넌트 모서리 반경 토큰 추가: --radius-card

자동 미리보기:
  https://preview.weniv.co.kr/landing-harness/pr-123/sample.html

PR이 머지되면 자동 미리보기가 갱신되고, 디자인 리드가 결과를 한 번 더 확인합니다. Figma 갱신과 하네스 갱신 사이의 시차가 2주를 넘지 않게 유지하는 게 목표입니다.