콘텐츠 우선 디자인 — 디자인이 아닌 메시지가 먼저

많은 사이트가 디자인 먼저 → 콘텐츠 끼워넣기로 만들어집니다. 결과: 빈 박스를 채우려고 의미 없는 글로 도배. 진짜는 거꾸로 — 메시지·콘텐츠 먼저 → 디자인이 그에 맞춰 따라옵니다.

흔한 잘못된 순서

1. 디자이너가 시안 만듦 (Lorem Ipsum 가득)
2. 콘텐츠 작성자가 시안의 빈칸을 채움
3. 채워야 할 글자 수가 미리 정해짐
4. 진짜 하고 싶은 말이 칸에 안 맞음
5. 어색하게 줄이거나 늘림
6. 결과: 모호한 카피

콘텐츠 우선 순서

1. 메시지 정함: "수원에서 야간 진료되는 코·귀·목 전문"
2. 핵심 카피 작성 (정확히 어떤 단어로)
3. 카피를 가장 잘 전달할 디자인 결정
4. 시각 요소가 메시지를 강화
5. 결과: 명확한 카피 + 어울리는 디자인

콘텐츠가 먼저 정해야 하는 5가지

1. 핵심 한 줄 (Tagline)

사이트 첫 화면의 가장 큰 글자.

피할 예: “환영합니다”·”우리는 최고입니다” → 권장: “수원 인계동에서 평일 야간·토요일 진료하는 이비인후과”

가능하면 위치 + 차별점.

2. 가치 제안 (Value Proposition)

방문자가 사이트에서 얻는 가치 3가지:

- 야간 진료 (직장인 친화)
- 보험 적용 진료 (비용 부담 ↓)
- 전 진료과 (코·귀·목 한 곳에서)

3. 행동 유도 (Call to Action)

방문자가 다음 할 행동:
– “예약하기”
– “전화 상담”
– “카카오톡 채널 추가”

가장 중요한 행동 1개, 보조 1개.

4. 신뢰 신호

• 인증·수상·자격
• 후기·평점
• 회사·기관 정보
• 실적·연혁

5. 자주 묻는 질문 (FAQ)

방문자가 가장 자주 묻는 5~10개 + 답.

워크플로우 — 콘텐츠 우선

1주차 — 콘텐츠 작성

도구: 노션·구글 독스. 시각 요소 없이 텍스트만.

각 페이지의:
– H1 (페이지 제목)
– 리드 단락 (한 단락 정답)
– H2·H3 구조
– 본문 텍스트
– CTA 문구

이 단계에서 클라이언트와 합의.

2주차 — 디자인 시안

완성된 콘텐츠로 시안:
– 디자이너가 진짜 단어를 봄
– 빈 박스 채우기 X
– 카피 길이에 맞게 레이아웃

3주차 — 본 작업

시안 + 콘텐츠 → 실제 사이트.

콘텐츠 우선 디자인의 장점

1. 빈 박스 함정 회피

10단어 박스를 5단어로 채우려고 의미 없는 형용사 추가 X.

2. SEO 동시 챙김

콘텐츠 = 검색 키워드. 처음부터 SEO 친화.

3. 클라이언트 합의 빠름

말로 표현되는 메시지에 합의 → 디자인 수정 ↓.

4. 모바일 적응 ↑

콘텐츠가 명확해야 작은 화면에서 핵심 살림.

카피 작성 원칙 — 5가지

1. 베네핏 > 기능

피할 예: “고해상도 MRI 보유” → 권장: “정확한 진단으로 한 번에 끝나는 진료”

기능이 아닌 사용자가 얻는 것.

2. 짧고 명확

피할 예: “저희 병원은 1995년 개원한 이래로 수원 지역에서 30년간 환자 여러분의 건강을 위해 최선을 다해왔으며…” → 권장: “수원 인계동에서 30년. 1995년부터.”

한 문장 한 메시지. 부사·형용사 ↓.

3. 능동적 표현

피할 예: “예약이 가능합니다” → 권장: “지금 예약하세요”

명령형은 강요. 권유형 + 명확.

4. 구체적 수치

피할 예: “많은 환자가 찾는” → 권장: “월 1,200명 진료”

숫자가 신뢰.

5. 사용자 언어

업계 용어 X. 사용자가 검색·일상 사용하는 단어.

피할 예: “비강 내 폴립 제거 시술” → 권장: “코 안 혹 제거 (코 폴립)”

실제 사이트 — 카피 작성 사례

병원 (가상 예시)

홈 Hero:
– H1: 수원 인계동 ○○이비인후과
– 카피: 평일 야간 9시까지 진료. 코·귀·목 한 곳에서.
– CTA1: 예약하기
– CTA2: 전화 상담 (031-XXX-XXXX)

진료 안내:
– H1: 코·귀·목 진료
– H2: 코 진료 (알레르기·축농증·코골이)
– H2: 귀 진료 (중이염·이명·청력검사)
– H2: 목 진료 (인후염·성대 결절)

각 H2 아래 100~200자 설명 + 진료 비용 안내.

웹 제작 회사 (가상 예시)

홈 Hero:
– H1: 기업·병원 홈페이지 제작
– 카피: 의뢰 후 4주 만에 SEO·모바일 완성. 끝까지 책임지는 사이트.
– CTA1: 견적 문의

서비스:
– 제작 과정 (5단계, 각 일정 명시)
– 가격대별 패키지 (3개)
– 자주 묻는 질문

콘텐츠 검수 체크리스트

새 페이지마다:
– [ ] H1 명확 (방문자가 어느 페이지인지 즉시 인식)
– [ ] 첫 단락에 페이지 핵심 답
– [ ] CTA 1개 이상
– [ ] 신뢰 신호 (관련 시)
– [ ] 사용자 언어
– [ ] 모바일에서 짧은 단락
– [ ] 키워드 자연스럽게

콘텐츠 ↔ 디자인 — 협업

콘텐츠 작성자 → 디자이너

• 정확한 단어·문장
• 우선순위 (가장 강조할 것)
• 길이 (대략적)
• 톤 (전문적·친근 등)

디자이너 → 콘텐츠 작성자

• 시각적 강조가 가능한 곳 (헤딩·번호·표)
• 너무 긴 단락 (자르거나 영역 분리)
• 빠진 시각 자료 요청 (사진·다이어그램)

양방향. 한쪽 일방 X.

자주 하는 실수

• Lorem Ipsum으로 시안 만들고 실제 콘텐츠가 안 맞음
• 클라이언트가 콘텐츠 늦게 → 디자이너가 가짜 콘텐츠로 시안 만들고 나중에 안 어울림
• 시각만 강조 → 메시지 약함
• 검색엔진을 위한 키워드 박제 → 사용자에겐 어색
• 모든 페이지 같은 톤 → 차별성 X

FAQ

Q. 콘텐츠를 누가 작성?
A. 의뢰자 직접이 가장 정확 (업계 지식). 다만 작성·편집 외주 가능.

Q. AI로 콘텐츠 작성해도?
A. 초안 OK. 그대로 발행 X. 본인 경험·시각을 충분히 더해 재구성하는 과정이 필수입니다.

Q. 디자이너에게 콘텐츠 작성도 부탁?
A. 디자이너 ≠ 카피라이터. 가능은 하지만 별도 비용·전문성 차이.

Q. 시안 보면서 콘텐츠 작성?
A. 권장 X. 콘텐츠가 디자인에 갇힘. 콘텐츠 먼저 → 디자인 그에 맞춰.

Q. 콘텐츠 우선이라도 시각이 빈약하면?
A. 콘텐츠 + 시각 양쪽 다 좋아야 정답. 콘텐츠 우선 ≠ 디자인 무시.

관련 가이드

• 사이트맵·정보 구조 설계
• 와이어프레임 도구
• 디자인 시스템·토큰
• 검색 잘되는 콘텐츠 작성법
• 기업 홈페이지 제작 가이드 — 페이지 구성과 콘텐츠 설계 기준