SERVICES

필요한 기능을 목적에 맞게 구성합니다

기업과 의료기관의 홈페이지부터 웹서비스와 운영 기능까지 프로젝트에 필요한 범위를 함께 구성합니다

웹사이트와 웹서비스

기업 · 의료기관 홈페이지

정보가 많을수록 찾기 쉬운 구조와 신뢰가 중요합니다

기업은 사업과 서비스를 명확하게 보여주고, 의료기관은 진료 정보와 예약 흐름을 쉽게 찾을 수 있도록 구성합니다

브랜드 · 커머스 · 랜딩

브랜드의 인상과 다음 행동이 함께 이어져야 합니다

브랜드 소개부터 제품 탐색과 구매, 캠페인 참여까지 필요한 흐름을 하나의 사이트 안에서 자연스럽게 연결합니다

웹서비스

사용자가 직접 기능을 이용하는 흐름을 설계합니다

계산, 검색, 신청, 회원 기능처럼 사용자가 목적을 수행하는 과정을 제품 구조와 함께 설계하고 개발합니다

CMS와 운영 기능

운영자가 직접 바꾸고 처리할 수 있어야 합니다

콘텐츠와 운영 데이터를 다루는 CMS·관리자부터 예약, 결제, 문의 접수까지 실제 업무가 이어지는 순서에 맞춰 구성합니다

리뉴얼과 운영

리뉴얼

내용은 유지하면서 구조와 화면을 다시 정리합니다

오래된 정보 구조, 불편한 탐색, 모바일 대응, 관리 방식의 문제를 점검해 필요한 부분부터 개선합니다

운영 · 유지보수

오픈한 뒤에도 웹사이트는 계속 바뀝니다

정기적인 수정과 콘텐츠 업데이트, 기능 점검, 검색 구조 개선이 필요할 때 프로젝트 범위에 맞춰 지속적으로 관리합니다

프로젝트 진행 과정

프로젝트 문의
프로젝트 문의
프로젝트 유형중형병원 홈페이지
문의 내용진료과와 의료진, 건강검진 정보를한곳에서 쉽게 확인할 수 있게 만들고 싶습니다.
필요한 기능 / 참고사항진료과 · 의료진 · 건강검진 · 모바일
문의 보내기
문의 내용 확인
병원
온담종합병원
목적
병원 정보 · 진료 안내
주요 정보
진료과 · 의료진 · 건강검진
대응 환경
PC · Tablet · Mobile
문의
사업과 웹사이트에 필요한 내용을 확인합니다.
구조 설계
요구사항
진료과 안내
의료진 정보
건강검진
병원 이용안내
모바일 대응
사이트 구조
홈
진료과전문센터의료진건강검진이용안내
페이지 구성
HEADERHEROMEDICAL
DOCTORSCHECKUP
GUIDEFOOTER
범위 확인
필요한 페이지와 기능, 정보 구조를 정리합니다.
페이지 제작
page.tsx
1import Image from "next/image";
2import Link from "next/link";
3import styles from "./medical-center.module.css";
4type Department = { name: string; href: string };
5
6const medicalDepartments: Department[] = [
7 { name: "Internal Medicine", href: "/departments/internal-medicine" },
8 { name: "Orthopedics", href: "/departments/orthopedics" },
9 { name: "Neurology", href: "/departments/neurology" },
10];
11
12const checkupPrograms = [
13 { title: "Essential Checkup", href: "/screening/essential" },
14] as const;
15
16export default function MedicalCenterPage() {
17 return (
18 <main className={styles.page}>
19 <header className={styles.header}><Link href="/">Ondam General Hospital</Link></header>
20 <section className={styles.hero}>
21 <p>Medical Care</p>
22 <h1>Care that continues beyond treatment</h1>
23 </section>
24 <section className={styles.departments} aria-labelledby="departments-title">
25 <h2 id="departments-title">Medical Departments</h2>
26 <p>Find care by specialty</p>
27 {medicalDepartments.map((department) => (
28 <article className={styles.department} key={department.name}>
29 <Image src="/images/care.webp" alt="" fill />
30 <h2>{department.name}</h2>
31 <Link href={department.href}>View department</Link>
32 </article>
33 ))}
34 </section>
35 <section className={styles.checkup}>
36 <h2>Health Screening Programs</h2>
37 {checkupPrograms.map((program) => (
38 <Link href={program.href} key={program.title}>
39 {program.title}
40 </Link>
41 ))}
42 </section>
43 </main>
44 );
45}
제작
정리한 구조를 실제 웹 화면으로 구현합니다.
검수 및 오픈
기기별 화면과 기능을 확인한 뒤 공개합니다.