프로젝트 배경
### 1. 문제점
- 기존 홈페이지의 낮은 접근성: 복잡한 메뉴 구조로 인한 정보 찾기 어려움
- 모바일 미지원: 데스크톱 전용 사이트로 모바일 사용자 이탈률 70% 이상
- 예약 시스템 부재: 전화 예약만 가능하여 업무 시간 외 예약 불가
- 정보 업데이트 지연: 수동 업데이트로 인한 실시간 정보 제공 불가
- 고령층 사용 어려움: 작은 글씨, 복잡한 인터페이스로 중장년층 이용 불편
### 2. 프로젝트 목표
- 모든 연령층이 쉽게 사용할 수 있는 직관적 인터페이스 구현
- 24시간 온라인 예약 시스템 구축으로 환자 편의성 극대화
- 모바일 최적화를 통한 언제 어디서나 접근 가능한 서비스 제공
- 실시간 정보 업데이트 시스템 구축
- WCAG 2.1 AA 준수로 장애인 접근성 보장
### 3. 주안점
- 사용자 중심 설계(UCD) 방법론 적용
- 의료 서비스 특성에 맞는 신뢰감 있는 브랜딩
- 응급 상황 대응을 위한 빠른 정보 접근 구조
- 개인정보보호법 준수 및 보안 강화
- 지속 가능한 콘텐츠 관리 시스템 구축
- 기존 홈페이지의 낮은 접근성: 복잡한 메뉴 구조로 인한 정보 찾기 어려움
- 모바일 미지원: 데스크톱 전용 사이트로 모바일 사용자 이탈률 70% 이상
- 예약 시스템 부재: 전화 예약만 가능하여 업무 시간 외 예약 불가
- 정보 업데이트 지연: 수동 업데이트로 인한 실시간 정보 제공 불가
- 고령층 사용 어려움: 작은 글씨, 복잡한 인터페이스로 중장년층 이용 불편
### 2. 프로젝트 목표
- 모든 연령층이 쉽게 사용할 수 있는 직관적 인터페이스 구현
- 24시간 온라인 예약 시스템 구축으로 환자 편의성 극대화
- 모바일 최적화를 통한 언제 어디서나 접근 가능한 서비스 제공
- 실시간 정보 업데이트 시스템 구축
- WCAG 2.1 AA 준수로 장애인 접근성 보장
### 3. 주안점
- 사용자 중심 설계(UCD) 방법론 적용
- 의료 서비스 특성에 맞는 신뢰감 있는 브랜딩
- 응급 상황 대응을 위한 빠른 정보 접근 구조
- 개인정보보호법 준수 및 보안 강화
- 지속 가능한 콘텐츠 관리 시스템 구축
프로젝트 성과
모바일 트래픽 증가
전체 트래픽의 15% → 68%
핵심 기능

진료 예약 시스템
- React Hook Form + Zod를 활용한 실시간 폼 검증
- 달력 UI를 통한 직관적 날짜 선택
- 진료과/의료진별 예약 가능 시간 실시간 조회
- 예약 확인 문자/이메일 자동 발송
- 달력 UI를 통한 직관적 날짜 선택
- 진료과/의료진별 예약 가능 시간 실시간 조회
- 예약 확인 문자/이메일 자동 발송
진행 단계
기획 및 분석
2025.09.
- 요구사항 분석 및 정의
- 사용자 리서치 및 페르소나 설정
- 경쟁사 벤치마킹
- 정보 구조(IA) 설계
- 사용자 리서치 및 페르소나 설정
- 경쟁사 벤치마킹
- 정보 구조(IA) 설계
디자인
2025.09.
- 와이어프레임 제작
- UI/UX 디자인 시안 작성
- 디자인 시스템 구축
- 프로토타입 제작 및 사용성 테스트
- UI/UX 디자인 시안 작성
- 디자인 시스템 구축
- 프로토타입 제작 및 사용성 테스트
프론트엔드 개발
2025.09.
- 핵심 페이지 개발
- 진료 예약 시스템 구현
- 반응형 디자인 적용
- API 연동 및 데이터 처리
- 진료 예약 시스템 구현
- 반응형 디자인 적용
- API 연동 및 데이터 처리
프로젝트 상세
### 1. 포트폴리오 소개
40-60대 중장년층을 위한 의료 서비스 접근성 향상 플랫폼 개발
- 서비스 카테고리: 헬스케어 정보 서비스, 의료 예약 시스템
- 메인 타깃: 중장년층 환자 및 보호자 (40-60대), 의료 서비스 이용자 전 연령층
- 핵심 가치: 직관적인 UI/UX를 통한 의료 서비스 접근성 극대화
### 2. 작업 범위
참여 범위:
- UI/UX 디자인 설계 및 구현
- 프론트엔드 개발 (Next.js 14 기반)
- 반응형 웹 디자인 구현
- 진료 예약 시스템 구축
- 컴포넌트 라이브러리 구축 (shadcn/ui)
- 접근성(WCAG 2.1 AA) 준수 개발
- 성능 최적화 및 SEO 구현
지원환경:
- 반응형 웹 (PC, 태블릿, 모바일)
- 크로스 브라우저 지원 (Chrome, Safari, Edge, Firefox)
- 모바일 웹 최적화
### 3. 주요 업무
핵심 기능 및 페이지:
- 스마트 진료 예약 시스템: 실시간 예약 가능 시간 확인, 진료과/의료진 선택, 증상 사전 입력
- 의료진 소개 시스템: 전문 분야별 의료진 검색, 상세 프로필 및 진료 일정 안내
- 통합 진료과목 안내: 진료과별 상세 정보, 주요 진료 항목, 검사 안내
- 접근성 최적화 네비게이션: 키보드 네비게이션, 스크린 리더 완벽 지원
- 건강정보 콘텐츠 허브: 질병 정보, 건강 관리 팁, 의료 상식 제공
- 실시간 병원 소식: 공지사항, 휴진 안내, 건강 강좌 일정
- 위치 기반 오시는 길: 대중교통 안내, 주차 정보, 실시간 네비게이션 연동
### 4. 주안점
서비스 구축 시 중점 사항:
- 접근성 최우선: 고령층 사용자를 위한 큰 글씨, 명확한 버튼, 직관적 네비게이션
- 모바일 퍼스트 설계: 모바일 환경에서의 최적 사용 경험 제공
- 빠른 로딩 속도: Next.js SSR/ISR을 활용한 초고속 페이지 로딩
- 정보 보안 강화: 환자 개인정보 암호화 및 보안 프로토콜 적용
- 신뢰감 있는 디자인: 의료기관 특성에 맞는 전문적이고 깔끔한 UI
40-60대 중장년층을 위한 의료 서비스 접근성 향상 플랫폼 개발
- 서비스 카테고리: 헬스케어 정보 서비스, 의료 예약 시스템
- 메인 타깃: 중장년층 환자 및 보호자 (40-60대), 의료 서비스 이용자 전 연령층
- 핵심 가치: 직관적인 UI/UX를 통한 의료 서비스 접근성 극대화
### 2. 작업 범위
참여 범위:
- UI/UX 디자인 설계 및 구현
- 프론트엔드 개발 (Next.js 14 기반)
- 반응형 웹 디자인 구현
- 진료 예약 시스템 구축
- 컴포넌트 라이브러리 구축 (shadcn/ui)
- 접근성(WCAG 2.1 AA) 준수 개발
- 성능 최적화 및 SEO 구현
지원환경:
- 반응형 웹 (PC, 태블릿, 모바일)
- 크로스 브라우저 지원 (Chrome, Safari, Edge, Firefox)
- 모바일 웹 최적화
### 3. 주요 업무
핵심 기능 및 페이지:
- 스마트 진료 예약 시스템: 실시간 예약 가능 시간 확인, 진료과/의료진 선택, 증상 사전 입력
- 의료진 소개 시스템: 전문 분야별 의료진 검색, 상세 프로필 및 진료 일정 안내
- 통합 진료과목 안내: 진료과별 상세 정보, 주요 진료 항목, 검사 안내
- 접근성 최적화 네비게이션: 키보드 네비게이션, 스크린 리더 완벽 지원
- 건강정보 콘텐츠 허브: 질병 정보, 건강 관리 팁, 의료 상식 제공
- 실시간 병원 소식: 공지사항, 휴진 안내, 건강 강좌 일정
- 위치 기반 오시는 길: 대중교통 안내, 주차 정보, 실시간 네비게이션 연동
### 4. 주안점
서비스 구축 시 중점 사항:
- 접근성 최우선: 고령층 사용자를 위한 큰 글씨, 명확한 버튼, 직관적 네비게이션
- 모바일 퍼스트 설계: 모바일 환경에서의 최적 사용 경험 제공
- 빠른 로딩 속도: Next.js SSR/ISR을 활용한 초고속 페이지 로딩
- 정보 보안 강화: 환자 개인정보 암호화 및 보안 프로토콜 적용
- 신뢰감 있는 디자인: 의료기관 특성에 맞는 전문적이고 깔끔한 UI

