프로젝트 개요: 강남권산부인과 - 메인 페이지 리뉴얼 및 신규 수술 기기(메드트로닉) 페이지 구축
https://the-kclinic.com/

기술 스택: GNUBoard(그누보드), HTML5/CSS3, Vanilla JS/jQuery, Responsive Web Design, GSAP(또는 커스텀 스크롤 애니메이션), Swiper.js
디자인 방향성: 프리미엄 여성 의원으로서의 신뢰감과 최첨단 로봇 수술(휴고) 도입을 강조하는 입체적이고 동적인 하이엔드 UI/UX 설계

핵심 기능:
ㆍ그누보드 아키텍처 개선: 전역 CSS 간섭을 해결하기 위한 헤더 전용 네이밍 컨벤션 도입 및 관리자 모드 여분 필드를 활용한 동적 데이터 바인딩(전화번호 자동 연동) 구현
ㆍ메인 페이지 동적 인터랙션: 비디오와 슬라이더가 동기화되는 메인 비주얼 엔진 개발 및 스크롤 위치를 실시간으로 추적하여 레이어 교체와 수평 이동을 제어하는 복합 8단계 시퀀스 타임라인 구축
ㆍ고도화된 반응형 레이아웃: 단순한 크기 조절을 넘어, PC의 '수평/교차 구조'에서 모바일의 '수직 아코디언 구조'로 UI 레이아웃의 성격 자체를 전환하는 적응형 설계 기법 적용
ㆍ세밀한 마이크로 모션 시스템: 사용자의 스크롤에 반응하여 순차적으로 떠오르는 연혁(Fade-in & Slide-up)과 'Libre Bodoni' 폰트를 활용한 우아한 타이포그래피 애니메이션 적용

결과물 & 성과:
ㆍ퍼포먼스 최적화: 복잡한 애니메이션(transform, opacity)과 비디오 리소스의 실행 시점을 제어하여 브라우저 부하를 최소화하고 렌더링 속도 향상
ㆍ유지보수성 극대화: 하드코딩된 정보를 그누보드 DB와 연동하여 관리자가 직접 주요 정보를 관리할 수 있도록 개선하고, 기존 코드와의 충돌을 완벽히 분리
ㆍ브랜드 프리미엄 강화: 메드트로닉 브랜드 가이드를 준수하면서도 병원만의 세련된 3D 입체 레이어링과 인터랙션을 적용하여 최첨단 의료 기술에 대한 환자 신뢰도 상승
ㆍ반응형 UX 완성도 확보: FHD 환경에서의 텍스트 잘림 현상을 해결하고, 디바이스 해상도별 맞춤형 스크롤 마진을 적용하여 어떤 기기에서도 최적의 뷰 제공