brand
1순위: 채용 담당자와 기술 리더. 이력서 한 장과 이 사이트를 나란히 놓고 본다. 체류 시간은 짧고, "무엇을 얼마나 만들어봤나"와 "그게 진짜인가"를 먼저 확인한다. 링크를 눌러 실물을 열어보고, 규모와 기간을 계산한다. 데스크탑이 주력이지만 이동 중 모바일로도 연다.
2순위: 동료 개발자. 기술적 의사결정과 직접 만든 도구에 관심이 있다. 블로그로 유입되는 쪽이다.
장석현(devxian96)이 6년 11개월 동안 만든 것을 검증 가능한 형태로 보여주는 개인 사이트다. 성공은 방문자가 스크롤을 끝까지 내리고, 실제 서비스 링크를 최소 한 번 누르고, "이 사람은 필요한 걸 만들어내는 사람"이라는 문장을 갖고 나가는 것.
전환 목표는 연락(메일·LinkedIn) 한 건.
만드는 사람을 만드는 사람. 없으면 만들고, 만든 걸 남도 만들 수 있게 한다. BackMusic(2018)부터 phpExpress, neomo, nsus, no-lib-club, BUZZLE, 그리고 지금의 AI 홈페이지 빌더까지 하나의 문장으로 꿰인다.
3단어: 정직함 · 조립 · 속도
- 정직함 — 부풀린 수치도, 가짜 후기도 없다. 실제 서비스 스크린샷과 누를 수 있는 링크로만 증명한다.
- 조립 — 결과물이 아니라 조립 과정이 이 사람의 정체성이다. 없는 부품은 만들어서 끼운다.
- 속도 — 대시보드 2.3일, 어필리에이트 5일, 빌더 3개월. 속도는 자랑이 아니라 사실이고, 그게 어떻게 가능한지가 이야기의 절반이다.
목소리는 담백한 서술체. 감탄사와 형용사를 줄이고 만든 것과 기간으로 말한다.
- 전형적 개발자 포트폴리오 — 다크 터미널 배경,
$ whoami, 초록 모노스페이스, GitHub 잔디 위젯. 개발자라는 걸 코스튬으로 증명하려는 화면. - 에디토리얼-타이포그래픽 레인 — 디스플레이 세리프 이탤릭 + 작은 모노 라벨 + 괘선. 2026년 브랜드 사이트가 전부 몰려간 자리다.
- SaaS 템플릿 — 중앙 정렬 히어로, 그라데이션 텍스트, 아이콘+제목+본문 카드 그리드 반복.
- 섹션마다 붙는 번호 eyebrow(01 / 02 / 03) — 실제 순서가 정보가 아닐 때 쓰는 번호는 비계일 뿐이다.
- 부풀린 지표 — 검증 불가능한 사용자 수·다운로드 수. 세지 않은 숫자는 쓰지 않는다.
- 낮은 마감 — 정렬 어긋남, 대비 부족, 모바일 깨짐. 목표는 기업 홈페이지 수준의 마감이다.
버즐(buzzle-landing)의 설계 원칙을 이 사이트의 목적에 맞게 가져온다.
- Show, don't tell — "잘 만든다"고 쓰지 않는다. 에디봇·AI 홈페이지 빌더·버즐의 실제 화면을 크게 보여주고 링크를 건다.
- 색의 절제 (Von Restorff) —
#00aaff를 남발하면 강조가 죽는다. 핵심 순간에만 쓴다: ① 히어로 마커 ② 지금 만드는 것 ③ 클로징 마커. 그 외 제목·본문·수치는 잉크 계열. - 스케일로 압도하고 색은 아낀다 — 임팩트는 거대 타이포와 여백이 만든다. 색이 아니다.
- 수미상관 — 히어로의 마커와 마지막 클로징 마커가 형광펜처럼 페이지를 여닫는다.
- 정직성 — 세지 않은 숫자를 쓰지 않는다. 링크가 죽은 서비스는 링크를 걸지 않는다.
- 밀도가 곧 신뢰 — 채용 담당자는 여백이 아니라 근거를 읽는다. 여백은 구조를 위해 쓰고, 내용은 줄이지 않는다.
- WCAG 2.1 AA. 본문 대비 ≥4.5:1, 큰 텍스트 ≥3:1. 화이트 배경 위 회색 본문이 가장 흔한 실패 지점이라 본문은 잉크 쪽으로 붙인다.
prefers-reduced-motion존중. 모든 진입 모션에 정적 대안을 둔다.- 진입 애니메이션은 이미 보이는 화면을 강화하는 방식으로만. 클래스 트리거로 콘텐츠 표시를 막지 않는다 (헤드리스 렌더러에서 빈 화면으로 나간다).
- 한글 본문은 Pretendard, 영문은 Cafe24 PRO Slim. Cafe24 PRO Slim은 한글 장문에서 자소가 눌려 본문에 쓰지 않는다.
- 이미지 alt는 무엇이 보이는지 서술한다. "스크린샷"이 아니라 "에디봇 상세페이지 편집 화면".