포트폴리오로 돌아가기

[메디쏠 웹] 메디쏠 기업 홈페이지 리뉴얼

메디쏠의 의료 디지털 전환 사업과 주요 서비스를 효과적으로 전달하기 위해 기존 홈페이지를 전면 개편한 기업 웹사이트입니다. 반응형 UI와 인터랙션을 구현하고, Lighthouse 기반 웹 성능 최적화와 Resend 기반 제휴 문의 메일 시스템, 운영 도메인 연동까지 담당했습니다.

기간2026.07

역할프론트엔드 단독 개발

팀 규모3명

사용 스택

Next.js
React
Resend
이

라이브 데모

메디쏠 기업 홈페이지 리뉴얼

01. 프로젝트 요약

기존 메디쏠 홈페이지를 대체하여 회사의 현재 사업 방향과 브랜드 아이덴티티를 반영한 Corporate Website를 신규 구축했습니다.

단순 정적 정보 제공에 그치지 않고 스크롤과 사용자 행동에 반응하는 인터랙션을 적용했으며, 반응형 레이아웃을 통해 다양한 디바이스에서 일관된 사용자 경험을 제공하도록 구현했습니다.

또한 Lighthouse를 활용해 Performance · Accessibility · Best Practices · SEO 지표를 지속적으로 점검하고 웹 성능을 최적화했습니다.

제휴 문의 페이지에는 Resend 기반 이메일 전송 기능을 연동하여 사용자가 입력한 병원명, 담당자 정보 및 문의 내용을 회사 담당자가 실제 이메일로 수신할 수 있는 문의 Workflow를 구현했습니다.

개발 완료 후 기존 홈페이지를 신규 사이트로 교체하고 실제 운영 도메인을 연결하여 Production 환경까지 배포했습니다.

현재 사이트는 메디쏠의 의료 디지털 전환 사업을 중심으로 모바일 전자문서, 난임병원 앱, 난임 플랫폼 등의 핵심 제품을 소개하도록 구성되어 있습니다.

02. 주요 기능

① 기존 홈페이지를 현재 사업 방향에 맞게 전면 개편

기존 Legacy 홈페이지 콘텐츠 및 구조 대체
기업 브랜드 및 서비스 중심 Information Architecture 구성
의료 디지털 전환 사업 및 제품 콘텐츠 재구성
Desktop / Tablet / Mobile 반응형 UI

② 브랜드 경험을 강화하는 Web Interaction 구현

② 브랜드 경험을 강화하는 Web Interaction 구현

Scroll 기반 콘텐츠 인터랙션
Section Transition 및 Animation
사용자 행동에 반응하는 UI 구성
다양한 Viewport를 고려한 Responsive Interaction

③ 웹 품질 지표를 기반으로 한 성능 최적화

③ 웹 품질 지표를 기반으로 한 성능 최적화

Google Lighthouse 기반 품질 측정
Performance · Accessibility · Best Practices · SEO 점검
이미지 및 정적 Asset 최적화
초기 로딩 및 Rendering 성능 개선
배포 전 반복적인 Lighthouse Regression Check

④ 제휴 문의를 실제 업무 프로세스로 연결하는 Email Workflow

Resend 기반 이메일 전송 서비스 연동
제휴 문의 Form Validation
병원명 · 담당자 · 연락처 · 이메일 · 문의내용 수집
개인정보 수집 동의 처리
문의 접수 → 담당자 이메일 자동 전달

⑤ 기존 서비스를 신규 웹사이트로 전환하고 실제 운영 환경 구성

기존 홈페이지 → 신규 홈페이지 전환
Production Build 및 Deployment
회사 운영 Domain 연결
HTTPS 기반 서비스 제공
실제 서비스 환경 배포 및 운영 대응