CASE 05 / DY Clinic · 대영성형외과

Clinic website and content operations병원 웹사이트·콘텐츠 운영 시스템

I built a responsive clinic website, its Hono API and a multilingual CMS. The work connects existing public content with page-based editing, controlled publication and owner guidance.반응형 병원 웹사이트, Hono API, 다국어 CMS를 개발했습니다. 기존 공개 콘텐츠를 페이지별 편집, 게시 관리, 운영자 사용 안내까지 연결했습니다.

Open review site검토 사이트 보기

My role담당 역할

Full-Stack Developer · Website, API & CMS풀스택 개발 · 웹사이트·API·CMS

Project context프로젝트 구분

Deployed review site · Ongoing refinement검토 사이트 배포 · 지속 개선

Focus핵심 구현

Responsive public website and content migration반응형 공개 웹사이트·콘텐츠 이전

Clinic website & CMS↗

Product context제품과 사용자

I developed the responsive frontend, Hono API and CMS for DY Clinic, connecting public text and recovered media to editable content. Some archival press images remain unavailable. The deployed review site has not replaced the legacy clinic domain, and patient intake is not open.대영성형외과의 반응형 프런트엔드, Hono API, CMS를 개발하고 공개 문구와 확보한 이미지·영상을 편집 가능한 콘텐츠로 연결했습니다. 일부 과거 언론 사진은 확보하지 못했습니다. 현재 배포된 검토 사이트는 기존 병원 도메인을 대체하지 않았으며, 환자 문의 접수는 열지 않았습니다.

Who it serves사용자Visitors explore clinic information; staff prepare edits and the clinic owner controls publication.방문자는 병원 정보를 살펴보고, 직원은 수정안을 준비하며, 원장은 공개 게시를 관리합니다.

Renew an older desktop/mobile website while giving clinic staff a clear way to edit content and the owner a separate publication step.기존 PC·모바일 웹사이트를 새로 구성하면서 직원의 콘텐츠 수정과 원장의 공개 게시 단계를 구분하는 것이 핵심 과제였습니다.

System flow시스템 흐름

Choose the page편집할 페이지 선택
Page-based navigation opens the relevant text, photos or existing articles.페이지별 메뉴에서 해당 문구·사진이나 기존 게시물을 엽니다.
Prepare the edit수정안 준비
Editors update content, translations and public-image descriptions, then save a draft.콘텐츠·번역·공개 이미지 설명을 수정한 뒤 초안을 저장합니다.
Review and publish비교 후 게시
The owner compares published and edited content before explicitly publishing. Draft saves leave the public page unchanged.원장은 공개본과 수정안을 비교한 뒤 게시합니다. 초안 저장만으로는 공개 페이지가 바뀌지 않습니다.
Check the public result공개 결과 확인
The workflow ends with checking the actual page on desktop and mobile layouts.마지막으로 PC·모바일 배치에서 실제 공개 페이지를 확인합니다.

Engineering decisions설계에서 내린 선택

Preserve content identity콘텐츠 식별자 유지

Why이유: A new editor should keep existing material connected to its public destination.편집 화면이 바뀌어도 기존 자료와 공개 페이지의 연결을 유지해야 했습니다.
Implementation구현: I retained record IDs and settings keys, organized source material into text/image/video blocks, and connected it to page-specific editors.레코드 ID·설정 키를 유지하고 원문을 문단·사진·영상 블록으로 구성해 페이지별 편집기에 연결했습니다.

Separate editing from publication수정과 공개 게시 분리

Why이유: Staff need to prepare changes without immediately changing visitor-facing content.직원이 방문자 화면을 즉시 바꾸지 않고 수정안을 준비할 수 있어야 했습니다.
Implementation구현: I implemented separate draft/published versions, owner-only publication, version conflict checks and an explicit upload → save → publish sequence.초안·게시본 분리, 원장 게시 권한, 버전 충돌 검사와 업로드 → 저장 → 게시 순서를 구현했습니다.

Share rules across applications애플리케이션 간 규칙 공유

Why이유: Public pages and administration use the same content while the web and API deploy independently.공개 화면과 관리자는 같은 콘텐츠를 사용하면서 웹과 API는 독립적으로 배포됩니다.
Implementation구현: Next.js and Hono share TypeScript/Zod contracts; Supabase provides storage, authentication and PostgreSQL access policies.Next.js와 Hono가 TypeScript·Zod 계약을 공유하고, Supabase의 저장소·인증·PostgreSQL 접근 정책을 사용합니다.

Implementation scope담당 구현 범위

Responsive content experience반응형 콘텐츠 화면

Responsive clinic pages with Korean, English, Chinese and Japanese navigation and editable translations. Untranslated archive entries retain their Korean source.한국어·영어·중국어·일본어 메뉴와 편집 가능한 번역을 갖춘 반응형 병원 페이지입니다. 번역이 없는 과거 자료는 한국어 원문을 유지합니다.

Content operations tools콘텐츠 운영 도구

Page editing, image uploads, draft comparison and publication controls, plus a captioned operator video guide.페이지 편집, 이미지 업로드, 초안 비교, 게시 제어와 자막이 있는 운영자 영상 가이드를 제작했습니다.

Deployed workflow verification배포 환경 작업 검증

Web/API deployment and documented upload-to-publication checks at desktop and narrow mobile browser widths.웹·API를 배포하고 PC·좁은 모바일 브라우저 너비에서 업로드부터 공개 게시까지 확인해 기록했습니다.

Project materials프로젝트 자료

Explore the deployed review site배포된 검토 사이트 확인

Next case다음 사례

360 by AgravityLabs

A project in mind?함께 만들 프로젝트가 있나요?

Let’s connect the pieces.필요한 흐름을 함께 만듭니다.

Tell me what the product needs to do. We can start with the core workflow and a clear scope.제품이 해야 할 일을 알려주세요. 핵심 흐름과 명확한 작업 범위부터 함께 정리합니다.

Discuss a project프로젝트 문의