리본의원 공식 홈페이지
PC/모바일 반응형으로 구현하는 병원 공식 홈페이지 프로젝트입니다.
프로젝트 개요
PC/모바일 반응형으로 구현하는 병원 공식 홈페이지 프로젝트입니다. 검색엔진(SEO)과 생성형 AI(GEO) 양쪽에 노출되는 콘텐츠 구조를 함께 설계하고, 마케팅 담당자가 직접 팝업·배너·공지사항을 운영할 수 있는 기본 CMS를 함께 구현합니다.
작업 범위
- 반응형 홈페이지 퍼블리싱: 병원 소개, 의료진, 진료 안내, 예약 안내, 오시는길을 PC/모바일 반응형 레이아웃으로 구현합니다
- SEO 최적화: 메타태그(OG/description), H태그 계층 구조, sitemap.xml/robots.txt 자동 생성 구조를 구현합니다
- GEO 최적화: ChatGPT·클로드 등 생성형 AI 검색 노출을 위한 구조화 데이터(JSON-LD)와 자연어 문맥 설계를 구현합니다
- 관리자 CMS: 마케팅 담당자가 직접 팝업·배너·공지사항·휴진 안내를 등록/수정/삭제할 수 있는 관리자 화면을 구현합니다
주요 업무
- 반응형 홈페이지 퍼블리싱 화면: Tailwind CSS 기반 반응형 그리드 + 브레이크포인트별 네비게이션 전환 구조를 설계합니다
- SEO 최적화 화면: 페이지별 메타 정보를 컴포넌트 props로 관리하고 빌드 시 sitemap을 자동 생성하는 구조를 설계합니다
- GEO 최적화 화면: Schema.org MedicalOrganization/Physician 스키마 마크업과 질의응답형 콘텐츠 구조를 설계합니다
- 관리자 CMS 화면: CRUD 폼 + 목록 화면으로 구성된 경량 CMS 구조를 설계합니다
프로젝트 핵심 과제
그누보드(PHP) 환경과 React 기반 데모 간 데이터 연동 방식 정의가 필요하며
API 스펙 문서화로 대응합니다
생성형 AI 검색 노출을 위한 구조화 데이터 스키마 선정에 리스크
Schema.org 표준을 우선 적용해 대응합니다
마케팅 담당자의 디자인 디렉션이 착수 후 확정되는 일정 리스크
컴포넌트 기반 설계로 후속 수정 범위를 최소화합니다
핵심 기능 상세
반응형 홈페이지 퍼블리싱
병원 소개, 의료진, 진료 안내, 예약 안내, 오시는길을 PC/모바일 반응형 레이아웃으로 구현합니다. Tailwind CSS 기반 반응형 그리드 + 브레이크포인트별 네비게이션 전환 구조를 설계합니다.
- Tailwind CSS 반응형 유틸리티로 모바일/태블릿/PC 3단 브레이크포인트 설계
- 이미지 lazy-loading + srcset 반응형 이미지 최적화 구조 적용
- 상단 탭 네비게이션의 모바일 햄버거 메뉴 전환 패턴 구현
단일 코드베이스로 PC·모바일 레이아웃을 함께 구현하여 유지보수 지점을 하나로 통합합니다
SEO 최적화
메타태그(OG/description), H태그 계층 구조, sitemap.xml/robots.txt 자동 생성 구조를 구현합니다.
- 페이지별 title/description/OG 메타태그를 데이터 기반으로 관리하는 구조 설계
- H1~H3 계층을 시맨틱 HTML로 구성해 검색엔진 크롤링 구조 최적화
- sitemap.xml/robots.txt 자동 생성 스크립트 구현
콘텐츠 변경 시 메타 정보가 함께 갱신되는 구조로 SEO 관리 부담을 줄이는 설계를 적용합니다
GEO 최적화
ChatGPT·클로드 등 생성형 AI 검색 노출을 위한 구조화 데이터(JSON-LD)와 자연어 문맥 설계를 구현합니다.
- Schema.org JSON-LD 구조화 데이터(MedicalOrganization, Physician, FAQPage) 마크업 설계
- 생성형 AI가 답변 인용에 활용하기 쉬운 Q&A형 콘텐츠 블록 구조 적용
- 진료 안내 텍스트를 명확한 사실 진술 문장 단위로 구성하는 콘텐츠 가이드 적용
검색엔진용 구조화 데이터와 생성형 AI용 자연어 문맥을 하나의 콘텐츠 구조에서 함께 대응하는 설계를 적용합니다
관리자 CMS
마케팅 담당자가 직접 팝업·배너·공지사항·휴진 안내를 등록/수정/삭제할 수 있는 관리자 화면을 구현합니다. CRUD 폼 + 목록 화면으로 구성된 경량 CMS 구조를 설계합니다.
- 팝업/배너 이미지 업로드 + 게시 기간 설정 폼 구현
- 공지사항/휴진 안내 게시판 CRUD 화면 구현
- 비개발자도 사용 가능한 단순화된 입력 폼 UX 설계
코드 수정 없이 마케팅 담당자가 직접 콘텐츠를 갱신할 수 있는 구조를 구현합니다
프로젝트 진행 단계
요구사항 분석 및 정보구조 설계 (2026-09) · 2026.09
병원 서비스 구조 분석, 페이지별 콘텐츠 IA 설계, SEO/GEO 키워드 맵핑
반응형 퍼블리싱 구현 · 2026.09
React 기반 반응형 컴포넌트 설계, PC/모바일 레이아웃 구현
SEO/GEO 최적화 적용 · 2026.09
메타태그·구조화 데이터·sitemap 자동 생성 로직 구현, 생성형 AI 노출 대응 콘텐츠 구조 설계
CMS 연동 및 통합 테스트 · 2026.09
팝업/배너/공지사항 CRUD 관리자 화면 구현, 전체 페이지 통합 테스트
주요 성과
기술적 주안점
- 단일 코드베이스로 PC·모바일 레이아웃을 함께 구현하여 유지보수 지점을 하나로 통합합니다
- 콘텐츠 변경 시 메타 정보가 함께 갱신되는 구조로 SEO 관리 부담을 줄이는 설계를 적용합니다
- 검색엔진용 구조화 데이터와 생성형 AI용 자연어 문맥을 하나의 콘텐츠 구조에서 함께 대응하는 설계를 적용합니다
