본 문서는 메인페이지 시안(1920px 기준)의 섹션 순서 · 구성 요소 · 문구 · 기능 동작을 항목 단위로 확인받기 위한 문서입니다. 표기된 모든 항목에 판정을 남겨주셔야 다음 단계(서브페이지 디자인 / 퍼블리싱)로 진행됩니다.
프로젝트
아르떼의원 공식 홈페이지 구축
대상
메인페이지 (PC 1920px 시안)
작성일
2026-07-29
작성자
김건우 VP
컨펌 권한자
양정미 대표님
00 / HOW TO
이 문서를 확인하는 방법
각 항목 오른쪽의 승인 · 수정 · 보류 버튼을 눌러 판정하시고, 수정이 필요한 부분은 각 섹션 하단의 의견란에 직접 입력해 주세요. 판정하신 항목은 문서 상단의 진행률에 바로 반영됩니다.
STEP 1
먼저 01 전체 섹션 순서를 확정합니다. 순서가 바뀌면 이후 항목의 판정 결과가 무효가 될 수 있습니다.
STEP 2
02 섹션별 상세에서 시안 이미지를 보며 구성 요소 · 문구 · 기능을 항목 단위로 판정하고, 의견을 남겨주세요.
STEP 3
03 공통 항목과 04 제공 필요 자료까지 회신해 주시면 메인페이지 디자인이 확정됩니다.
승인 이대로 확정합니다
수정 방향은 맞고 부분 수정이 필요합니다
보류 내부 협의 또는 자료가 더 필요합니다
01 / OVERVIEW
전체 시안 및 섹션 순서 컨펌
메인페이지 전체 시안입니다. 먼저 전체 흐름을 보시고, 아래 표에서 10개 블록의 순서 자체가 맞는지 확인해 주세요. 각 섹션의 세부 내용은 다음 장에서 개별 확인합니다.
PC 1920 × 6342px 시안 · 세로로 스크롤하여 확인해 주세요
코드
섹션
역할
노출 목적
판정
S01
GNB (상단 메뉴)
전역 내비게이션
진료 카테고리 탐색 · 로그인 · 언어 전환
S02
HERO 비주얼
첫인상
원내 분위기 전달
S03
진료 정보 바
실용 정보
위치 · 진료시간 즉시 확인
S04
브랜드 소개
신뢰 형성
병원 철학 · 차별점 전달
S05
시술 선택 · 예상 견적
전환 유도
시술 담기 → 상담 예약
S06
OUR CLINIC
진료 영역 안내
고민별 카테고리 진입
S07
BEST MACHINE
전문성 소구
보유 장비 신뢰도
S08
CONTACT US
전환
상담 신청 폼
S09
LOCATION
방문 정보
주소 · 교통 · 주차
S10
FOOTER
법적 고지
사업자 정보 · 약관
섹션 순서 관련 의견
02 / SECTION SHEETS
섹션별 상세 컨펌
시안 이미지와 함께 각 섹션에서 확정이 필요한 항목을 정리했습니다. 섹션마다 배경색 · 글자색 · 폰트 크기 사양을 별도로 표기했으며, 색상 · 폰트 값은 모두 Figma 원본 CSS에서 가져온 값입니다. [참고] 표시는 제작사가 이미 반영 예정인 사항에 대한 안내이므로 내용만 확인해 주시면 됩니다.
S01GNB · 상단 글로벌 메뉴화면 최상단 · 전 페이지 공통
좌측 로고 · 중앙 6개 대메뉴 · 우측 JOIN / LOGIN / 언어 전환
현재 구성
로고
십자(+) 심볼 + 한글 로고타입 「아르떼 의원」
메뉴
아르떼 · 피부시술 · 미용시술 · 비만치료 · 줄기세포 · 고객센터 (6개)
우측
JOIN · LOGIN · KR (언어 선택 드롭다운)
컨펌 항목
C-0101 로고 심볼과 로고타입 조합이 최종 확정본과 동일한지 확인해 주세요헤더용 원본(AI/SVG)과 푸터용 흰색 반전본, 파비콘 파일 보유 여부 포함
C-0102 대메뉴 6개의 명칭이 맞는지 확인해 주세요「아르떼」가 병원 소개를 뜻하는지, 다른 명칭이 나은지 확인
주소 #000000 / 요일 라벨 #777777 / 진료시간 #262626 캘린더 — 당월 #262626 이전 · 다음 달 #999999 일요일 #EC2C2C
강조 · 버튼
오늘 날짜 배지 30×30px · 브랜드 3색 그라데이션 90° + 흰색 70%
폰트
탭 18px Medium · 주소 18px Bold · 주차 안내 14px 2026.02 18px Bold · 진료시간 24px Bold · 요일 라벨 18px Bold · 캘린더 날짜 14px
D-03-1 위 배경색이 맞는지 확인해 주세요변경을 원하시면 색상 코드 또는 원하시는 느낌을 의견란에 적어주세요
D-03-2 위 글자색과 강조색이 맞는지 확인해 주세요
D-03-3 위 폰트 크기와 굵기가 맞는지 확인해 주세요1920px 화면 기준이며, 화면이 좁아지면 비율에 맞춰 축소 적용됩니다
참고 사항
참고
시안에 표기된 진료시간은 단순 디자인 예시입니다. 실제 적용은 푸터(S10) 기준으로 통일되며, 월·목은 동일한 시간대로 운영되는 것이 맞습니다. 정확한 운영 시간은 C-0308 항목에서 확인 부탁드립니다.
참고
시간 표기 형식은 「11:00AM ~ 09:00PM」 형태로 통일하여 적용할 예정입니다.
참고
휴무 관련 문구는 「휴진」으로 통일하여 표기할 예정입니다.
참고
캘린더의 강조 표시는 오늘 날짜를 의미하며, 휴무일은 글자색을 흐리게 처리하여 구분할 예정입니다.
의견
S04브랜드 소개 · I'm a Doctor + Artist진료 정보 바 하단
영문 헤드라인 · 국문 슬로건 · 3개 원형 카드(01/02/03)
현재 구성
헤드라인
I'm a Doctor + Artist (영문 세리프)
슬로건
마음을 담은 소통으로, 시술을 넘어 예술을 완성합니다.
카드
01 Arte, 마음으로부터 / 02 Doctor & Artist / 03 라인이 예술이다
컨펌 항목
C-0401 영문 헤드라인 「I'm a Doctor + Artist」 문구를 확정하는지 확인해 주세요
C-0402 국문 슬로건 문구를 확정하는지 확인해 주세요
C-0403 슬로건 하단 설명 2줄의 최종 원고가 맞는지 확인해 주세요「'마음으로부터'라는 아르떼(Arte)의 진정한 의미…」 문장
C-0404 3개 카드의 제목이 맞는지 확인해 주세요
C-0405 3개 카드의 본문 원고가 최종본인지 확인해 주세요
C-0406 카드 개수 3개와 노출 순서가 맞는지 확인해 주세요
C-0407 원형 카드에 사용된 그라데이션 컬러가 브랜드 컬러와 일치하는지 확인해 주세요
C-0408 카드 클릭 시 이동하는 페이지가 있는지 (없으면 정적 표기) 확인해 주세요
색상 · 타이포 사양
배경
페이지 배경 위 브랜드 블러 레이어 (blur 200px)
박스 · 카드
원형 카드 350×350px · 흰색 70% · 모서리 999px
글자색
대제목 · 번호 · 카드 제목 #262626 / 본문 #777777 / 가운데 심볼 #C9C9C9
강조 · 버튼
없음
폰트
대제목 Libre Bodoni Italic 700 40px / 행간 56px 슬로건 28px SemiBold · 본문 18px Regular 번호 28px Bold · 카드 제목 20px Bold · 카드 본문 16px Regular
D-04-1 위 배경색이 맞는지 확인해 주세요변경을 원하시면 색상 코드 또는 원하시는 느낌을 의견란에 적어주세요
D-04-2 위 글자색과 강조색이 맞는지 확인해 주세요
D-04-3 위 폰트 크기와 굵기가 맞는지 확인해 주세요1920px 화면 기준이며, 화면이 좁아지면 비율에 맞춰 축소 적용됩니다
확인 필요 이슈
확인
카드 03의 본문에 큰따옴표로 묶인 문장이 사용되었습니다. 인용문인지 일반 설명문인지에 따라 따옴표 사용을 정리하겠습니다.
참고
원형 3개 배치는 모바일에서 세로 1단으로 쌓입니다. 원형 유지 / 사각 카드로 변경 중 선택이 필요할 수 있습니다.
의견
S05시술 선택 · 예상 견적브랜드 소개 하단 · 기능 개발 필요 영역
좌측 시술 목록(시술후기·상세보기·담기) · 우측 담은 시술 내역 및 예상 결제 금액
현재 구성
좌측
시술 4건 · 할인율 · 정가/할인가 · [시술후기] [상세 보기] [시술 담기]
우측
담은 시술 내역 4건 · 예상 결제 금액 · [상담 예약 하기]
컨펌 항목
C-0501 이 영역을 실제 동작하는 기능으로 개발하는지 확인해 주세요단순 이미지가 아닌 담기·합계 계산 기능이며, 개발 범위와 일정에 직접 영향을 줍니다
C-0502 노출 시술의 선정 기준은 무엇인지 (이벤트 / 인기순 / 관리자 수동 지정) 알려주세요
C-0503 한 번에 노출할 시술 개수 4건이 맞는지 (더보기·페이징 필요 여부) 확인해 주세요
C-0504 메인에 가격을 직접 노출하는 방향에 동의하는지 확인해 주세요
C-0505 할인율(%) · 정가 취소선 · 할인지 표기 방식이 맞는지 확인해 주세요
C-0506[시술후기] 기능이 실제로 필요한지 알려주세요계약서에 명시된 개발 범위에 시술 후기(리뷰) 기능은 포함되어 있지 않습니다. 필요하시면 후기 작성 · 노출 방식과 함께 별도 협의가 필요합니다
C-0507 [상세 보기]를 누르면 해당 시술의 상세 페이지로 이동합니다. 확인해 주세요
C-0508 [상담 예약 하기]를 누르면 로그인 후 마이페이지에 담기고, 담당자가 개별 연락하는 방식으로 진행됩니다. 확인해 주세요담은 시술 정보는 상담 신청 폼(S08)과 별개로 관리되며 자동 전달되지 않습니다. 실시간 예약이 아니므로 버튼 문구를 「상담 신청 하기」 등으로 변경할지도 함께 알려주세요
C-0509 시술 정보를 관리자가 직접 등록·수정할 수 있어야 하는지 확인해 주세요
C-0510 모바일에서 좌우 2단 → 세로 1단 전환 방식에 동의하는지 확인해 주세요
C-0511 이 영역에 노출할 실제 시술 목록과 가격표를 전달해 주실 수 있는지 알려주세요현재 시안의 시술명·금액은 모두 예시이며, 병원 측 자료로 교체됩니다
C-0512비급여 진료비용 고지 의무 및 의료광고 사전심의 대상 여부를 병원 측에서 확인해 주실 수 있는지 알려주세요가격·할인율·이벤트 문구는 규제 대상이 될 수 있어 사전 확인이 필요합니다
C-0513실시간 예약 기능이 필요한지 알려주세요계약서에 명시된 개발 범위에 예약 기능은 포함되어 있지 않습니다. 도입하실 경우 예약 확인·변경 알림을 위한 알림톡 발송 기능도 함께 필요하여, 범위와 비용을 별도로 협의해야 합니다
색상 · 타이포 사양
배경
페이지 배경 위 브랜드 블러 레이어 (blur 200px)
박스 · 카드
우측 패널 흰색 40% · 모서리 15px 내역 카드 테두리 #EDEDED · 모서리 10px · 리스트 구분선 #DDDDDD
글자색
시술명 · 금액 #262626 / 설명 · 정가 취소선 #777777
강조 · 버튼
할인율 · 할인가 · 예상 결제 #FF4242 버튼 #262626 글자 #FFFFFF · 모서리 5~10px
폰트
시술명 18px Bold · 설명 14px · 상세 설명 12px 할인율 · 할인가 18px Bold · 내역 항목 16px · 내역 금액 18px Bold 합계 · 상담 버튼 20px Bold · 시술 버튼 14px
D-05-1 위 배경색이 맞는지 확인해 주세요변경을 원하시면 색상 코드 또는 원하시는 느낌을 의견란에 적어주세요
D-05-2 위 글자색과 강조색이 맞는지 확인해 주세요
D-05-3 위 폰트 크기와 굵기가 맞는지 확인해 주세요1920px 화면 기준이며, 화면이 좁아지면 비율에 맞춰 축소 적용됩니다
참고 사항
참고
시안의 시술명 · 금액 · 합계는 모두 단순 예시입니다. 「이벤트 시술명」 「시술명D」 「9,999,000원」 「[EVENT] 3월 한정 리프팅 이벤트」 등은 병원 측에서 전달해 주시는 실제 시술 목록과 가격으로 교체됩니다.
참고
예상 결제 금액 역시 디자인 확인용 예시 수치이며, 실제로는 담은 시술의 합계가 자동 계산되어 표시됩니다.
