Travel-in-Busan 웹사이트 스타일 가이드

Travel-in-Busan 웹사이트 스타일 가이드
최종 버전: 2025.02

---

1. 브랜드 소개

브랜드 정체성 및 목표

Travel in Busan은 부산의 매력과 디자인을 접목한 개인 브랜드로, 현지인의 시각과 디자인 전문가의 경험을 통해 부산의 숨겨진 아름다움과 창의적 인사이트를 공유합니다.

Travel in BUSAN은 부산의 숨겨진 매력을 발굴하고, 여행 정보와 디자인 인사이트를 통해 방문자에게 감동과 영감을 전달하는 것을 목표로 합니다.

사이트 정보

• 사이트 제목: Travel in BUSAN | 부산을 여행하다
• 태그라인: 부산 여행과 디자인의 모든 것, Travel in Busan

브랜드 미션

미션: 부산의 독특한 문화와 감성을 바탕으로, 여행자와 디자인 애호가 모두에게 유익한 정보를 제공하며 디지털 네트워크 시대에 개인의 성장을 장려합니다.

• 미션:
  • 부산의 숨겨진 명소와 문화를 발견하고 소개합니다.
  • 여행과 디자인의 접점에서 창의적 경험 제공하기
  • 디지털 네트워크 환경에서 개인의 성장과 표현을 지원합니다.
  • 선한 영향력을 통해 사용자와 함께 성장하는 콘텐츠 제작하기
• 비전:
  • 여행과 디자인의 융합으로 글로벌 감성 콘텐츠를 선도합니다.
  • 기술과 예술이 조화된 차별화된 경험을 제공합니다.

---

2. 로고 및 브랜딩 요소

2.1 로고 디자인

• 디자인 설명:
  • 부산의 상징적 요소(예: 동백꽃, 갈매기, 광안대교 등)를 반영한 파스텔톤 일러스트레이션 스타일의 원형 로고를 사용합니다.
  • 로고 색상: #f7caca (Rose Quartz), #93a9d1 (Serenity).
• 파일 형식:
  • 사이트 아이콘: 512px PNG
  • 오픈그래프 이미지: OG Image

2.2 컬러 팔레트

기본 색상

1. White (#ffffff) – 배경 및 콘텐츠 영역
2. Light Background (#e0e5ed) – 섹션 배경
3. Separators (#c6cdd7) – 구분선
4. Light Text (#838383) – 보조 텍스트
5. Primary Color (#00539b) – 주요 강조 색상
6. Paragraphs (#475158) – 본문 텍스트
7. Light Dark Background (#2d353e) – 다크 섹션 배경
8. Primary Dark (#171b21) – 주요 다크 영역

주요 포인트 컬러

• Rose Quartz (#f7caca) – 부산의 동백을 연상, 파스텔 톤
• Serenity (#93a9d1) – 부산의 푸른 바다를 연상, 파스텔 톤
• Princess Blue (#00539b) – 브랜드 정체성 컬러
• Night (#101014) – 텍스트와 포인트용 깊은 검정

보조 컬러

• Daffodil (#fec14f) – 보색 조화용 노란색 계열
• Papyrus (#f5edd6) – 아이보리/베이지 계열
• Pomegranate (#6c2832) – 와인/석류색, 포인트용
• Primary Color2 (#50132d) – 포인트 컬러
• Lavender (#d4c2e6) – 연보라 계열 포인트
• Adrenaline Rush (#b41a23)
  (세부 색상 조합은 상황에 따라 조정하며, 주요 색상 간의 보색 및 조화를 고려합니다.)

용도	색상 코드	이름/설명
주조색
보조색
강조색
배경/텍스트

---

3. 타이포그래피

3.1 글꼴 패밀리

• 주요 폰트: Noto Sans KR (한글 및 다국어 지원) 헤드라인, 서브헤드라인, 본문
• 보조 폰트: Noto Serif KR (Small Text), Noto Sans Mono (라벨용).

3.2 스타일 규칙

1rem = 16px 기준으로 계산합니다.

요소	권장 크기 (rem/px)	라인 높이	자간	두께
Headlines	3rem (≈48px)	1.2	-0.02em	Bold 700
Subheadings	2rem (≈32px)	1.3	-0.015em	Semi-Bold 600
Lead	1.25rem (≈20px)	1.4	-0.015em	Medium 500
Body	1.09375rem (≈17.5px)	1.5	0	Normal 400
Small	0.75rem (≈12px)	1.2	0	Normal 400
Labels	0.625rem (≈10px)	1.2	0	Medium 500
Titles	2em	1.125	0.01em	Medium 500

모듈 스케일 (1.250 – Major Third)

요소	폰트 사이즈 (rem/px)	Margin Top/Bottom	사용처
H1	약 3.815rem (≈61px), 또는 4rem (64px)		메인 헤더, 핵심 제목
H2	약 3.052rem (≈49px), 또는 3rem (48px)		섹션 제목
H3	약 2.441rem (≈39px), 또는 2.5rem (40px)		주요 소제목
H4	약 1.953rem (≈31px), 또는 2rem (32px)		중요 콘텐츠 헤더
H5	1.5625rem (≈25px)		카드 제목, 인용구
H6	1.25rem (≈20px)		작은 제목
Body	1.09375rem (≈17.5px)		본문 텍스트
Small	약 0.8rem (≈12.8px) 또는 0.75rem (12px)		캡션, 버튼, 태그
Labels	약 0.64rem (≈10.24px) 또는 0.625rem (10px)		부가 정보

라인 높이 및 자간

• 라인 높이(Line Height): 본문은 약 1.6배, 제목은 1.2~1.5배를 적용합니다.
  • 본문: 1.6 (28px)
  • H1: 1.2
  • H2: 1.25
  • H3: 1.3
  • H4: 1.35
  • H5: 1.4
  • H6: 1.5
• 자간(letter spacing):
  • H1, H2: 약 -0.02em
  • H3, H4: 약 -0.015em
    기타 텍스트는 가독성을 해치지 않는 범위 내에서 조절합니다.
• 글꼴 무게(Font Weight)
  • 제목(H1-H2): 700-800 weight
  • 소제목(H3-H4): 600 weight
  • 작은 제목(H5-H6): 500-600 weight
  • 본문: 400-500 weight
  • Small 텍스트: 400 weight

---

4. 레이아웃 및 UI

웹사이트 구조

레이아웃 및 레이아웃 섹션의 아키텍처. 웹사이트는 기본적으로 네 가지 섹션으로 구성됩니다.
한 페이지에는 4개의 레이아웃 섹션(Header, Page Title Bar, Content 및 Footer Layout Sections)이 있습니다.
기본 글로벌 레이아웃이 있으며, 여기에 추가된 모든 레이아웃 섹션은 웹사이트의 모든 페이지에 표시됩니다. 레이아웃이 어떻게 사용될지 결정하는 조건부 논리가 있는 조건부 레이아웃이 있습니다.

• 헤더(Header): 글로벌 내비게이션 및 브랜드 아이덴티티(로고, 메뉴 등) 제공. 메인 네비게이션, 검색 기능. 내비게이션 바 + 오프캔버스 팝업 메뉴 (About, Services, 문의하기).
• 페이지 제목 표시줄(Page Title Bar): 페이지별 고유 타이틀 영역. 각 페이지의 정체성을 드러내며, 사용자에게 현재 위치를 명확히 전달페이지 콘텐츠
  • 홈페이지의 콘텐츠 부분인 머리글과 바닥글 사이의 영역에는 페이지 제목 표시줄이 사용되지 않습니다. 이 페이지의 콘텐츠는 브랜드 요구 사항에 가장 적합한 방식으로 무한히 변경할 수 있습니다.
• 콘텐츠(Content): 메인 콘텐츠 영역. 여행 정보, 디자인 인사이트, 블로그 포스트 등 주요 콘텐츠를 효과적으로 전달
• 바닥글(Footer): 사이트 정보, 저작권, 호스팅 정보 명시. 추가 네비게이션 링크 등을 포함하여 사용자 편의성 강화
• 특징:
  • Avada Website Builder를 활용하여 레이아웃을 유연하게 조정
  • 각 섹션은 독립적으로 관리 가능하며, 필요에 따라 반응형 디자인 원칙에 따라 모바일 환경 최적화

Layout Conditions

• 페이지 All Pages
• 글 All Posts
• 포트폴리오 All Portfolio (Custom Post Types)
• 아카이브 Archives
  • -Portfolio Archive Types
  • -Post Archive Types
  • -All Date Pages 오래된 글은 월과 연도를 기준으로 보관됩니다.
  • -All Categories
  • -All Tags
  • -All Portfolio Categories
  • -All Portfolio Skills
  • -All Portfolio Tags
• Search Results (Jetpack Search로 표준 WordPress 검색 기능 대체하여 실질적으로 사용하지 않음.)
• 404 Page

Global Header/ 홈페이지 레이아웃

Side To Top Header Transition 사이드 헤더에서 상단 헤더로 전환
큰 화면에서는 사이드 헤더를 사용하고 작은 장치에서는 상단 헤더로 전환하도록 설계되었습니다.
이러한 디자인은 Avada의 레이아웃 섹션 옵션을 활용하여 데스크톱 화면에서 헤더 위치를 왼쪽으로 설정합니다. 뷰포트가 중간 화면 크기로 좁아지면 헤더가 페이지 상단으로 되돌아가고 메뉴가 모바일 메뉴로 축소됩니다.
이러한 유형의 동적 헤더 조정은 측면 헤더가 상단 헤더로 변환되는 시점을 정의하는 레이아웃 섹션의 설정을 통해 가능합니다. 이렇게 하면 다양한 디바이스에서 헤더가 작동하는 방식에 유연성을 제공하여 화면 크기에 관계없이 사용자 친화적인 경험을 보장할 수 있습니다.

• 헤더(Header): 브랜드 아이덴티티(로고, 사이트 제목, 날짜, SNS 등), 글로벌 내비게이션(팝업형태), 모바일 메뉴(Collapsible Menus)
• 홈페이지: 최신 콘텐츠 하이라이트, 여행 및 디자인 섹션 소개
• About: 브랜드 스토리, 미션과 비전 (팝업 형태)
• Expertise/Services: 제공 서비스 및 전문 분야 (팝업 형태)
• 최신 글: 블로그 포스트 목록 (팝업 형태)
• Portfolio 콘텐츠: 이미지 중심의 카드형 레이아웃 (Avada Post Cards Element 활용).
• 문의하기: 연락처 및 문의 양식 (팝업 형태)

주요 페이지 레이아웃

그리드 시스템

• 기본 구성: 12-Column 그리드.
• 반응형 규칙: 모바일에서 1-Column으로 전환.

Avada 테마 요소

• 컨테이너 구조: 전체 너비 및 섹션별 컨테이너 사용
• 컬럼 레이아웃: 50%, 33.33%, 100% 등 유연한 그리드 시스템
• 네스티드 컬럼: 복잡한 레이아웃을 위한 중첩 컬럼 활용

---

5. 이미지 및 미디어 가이드라인

5.1 이미지 스펙

• 최소 해상도: 1200x800px 권장 (Retina 디스플레이 대응)(고품질 유지)
• 권장 포맷: 웹 최적화 WebP, JPG (일반), PNG (투명 배경 필요시)
• 최대 파일 크기: 웹 성능을 위해 500KB 이하 권장
• 비율: 16:9, 4:3, 1:1 (Instagram)로 표준화
• 필터 및 스타일: 브랜드 컬러와 조화를 이루는 필터 적용 추천, SNS 공유 최적화를 고려한 크기 및 비율 설정

5.2 저작권 및 출처 표기

• 사용자 생성 이미지: 출처 필수 표기 (예: “Photo by @username”).
  • 사용자 제작 콘텐츠 사용 시 반드시 출처를 명시
• 상업용 이미지: 무료 라이선스 (Unsplash, Pexels) 또는 구매 권장.
• 라이선스 제한 이미지의 경우 사용 전 확인하며, 문제가 있는 경우 대체 이미지 사용
• 모든 이미지에 적절한 alt 텍스트 추가
• 저작권이 있는 이미지 사용 시 출처 명시
• 개인 촬영 이미지 우선 사용, 필요시 라이센스 이미지 활용

이미지 스타일

• 부산의 자연환경과 도시 풍경을 강조하는 밝고 선명한 이미지
• 브랜드 컬러(Rose Quartz, Serenity)와 조화를 이루는 색조
• 여백과 구도를 고려한 균형 잡힌 사진 구성

---

6. 콘텐츠 톤 앤 매너

브랜드 어조

• 친근하고 전문적인 톤
• 현지인의 생생한 통찰과 경험을 강조
• 영감을 주는 긍정적인 메시지 전달
• 정보와 감성의 균형 유지

콘텐츠 구조

• 명확한 제목과 소제목으로 계층 구조 확립
• 핵심 메시지를 강조하는 인용구 및 콜아웃 활용
• 2-3문장의 짧은 단락으로 가독성 향상
• 목록과 인포그래픽을 통한 정보 시각화

콘텐츠 스타일 가이드

• 문체 및 어조:
  • 친근하면서도 신뢰감 있는 전문적 어조를 유지 (예: “부산의 숨은 명소를 함께 탐험해보세요!”).
  • 여행 정보와 디자인 인사이트를 명확하고 쉽게 전달
• 콘텐츠 구성:
  • 여행 가이드, 디자인 인사이트, 블로그 형식의 다채로운 콘텐츠 제공
  • 인포그래픽, 동영상, 사진 등 다양한 미디어 요소를 적극 활용
  • SEO 최적화를 고려하여 키워드와 구조화된 콘텐츠 배치를 적용
• SEO 전략: 키워드 “부산 여행”, “디자인 블로그”, “로컬 가이드” 강조.

블로그 포스트 템플릿

• 매력적인 헤더 이미지
• 명확한 제목 (H1)과 소개 단락
• 논리적 섹션 구분 (H2, H3)
• 결론 및 다음 단계 (CTA)
• 관련 콘텐츠 추천

---

7. 사용자 경험(UX) 및 UI 디자인

• 인터페이스:
  • 직관적이고 탐색하기 쉬운 디자인 채택
  • 명확한 내비게이션 메뉴와 일관된 레이아웃 제공
• 반응형 디자인:
  • 다양한 디바이스(데스크톱, 태블릿, 모바일)에서 최적의 사용자 경험 제공
  • 각 요소의 크기와 배치가 기기별로 적절하게 조정
• 인터랙션:
  • 사용자 피드백을 통한 지속적인 개선
  • 주요 액션(버튼, 링크 등)은 시각적으로 강조하여 클릭 유도

7.1 UI 요소 가이드

버튼

• 기본 버튼: #00539b 배경, 흰색 텍스트, 8px 둥근 모서리
• 보조 버튼: 투명 배경, #00539b 테두리, #00539b 텍스트
• 액션 버튼: #fec14f 배경, 어두운 텍스트, 강조 효과
• 버튼 크기: 작게(10px), 중간(14px), 크게(16px) 텍스트

카드 및 컨테이너

• 8-12px 둥근 모서리
• 미묘한 그림자 효과 (box-shadow: 0 2px 10px rgba(0,0,0,0.1))
• 16-24px 내부 여백
• Light Background (#e0e5ed) 또는 White (#ffffff) 배경

폼 요소

• 입력 필드: 8px 둥근 모서리, 1px #c6cdd7 테두리
• 포커스 상태: #00539b 테두리 강조
• 레이블: Noto Sans KR, 14px, 500 weight
• 오류 메시지: #b41a23(Adrenaline Rush) 텍스트

---

8. 접근성 및 성능 가이드라인

접근성 표준

• WCAG 2.1 AA 수준 준수
• 충분한 색상 대비 (최소 4.5:1)
• 키보드 네비게이션 지원
• 스크린 리더 호환성 유지

성능 최적화

• 이미지 최적화 (WebP 포맷 우선)
• 지연 로딩 이미지 구현
• 최소화된 CSS/JS 파일
• 모바일 우선 접근 방식

---

9. 스타일 가이드 관리

버전 관리

• 스타일 가이드 버전: v1.0 (2025년 2월)
• 분기별 검토 및 업데이트 일정
• 주요 변경사항 문서화

피드백 수집 및 스타일 가이드 업데이트

• 정기 검토: 분기별 사용자 피드백 수집 → 디자인/콘텐츠 개선.
• 정기적으로 사용자 및 팀 내부 피드백을 수집하여 스타일 가이드를 업데이트
• 사용자 피드백 통합 방법
• 트렌드 반영: 연 1회 웹 디자인 트렌드 분석 후 스타일 가이드 업데이트.
• 최신 디자인 트렌드와 기술 발전을 모니터링하여 가이드라인을 최신화
• 분기별 디자인 리뷰 세션
• 변경 사항은 문서화하여 모든 관계자가 쉽게 참고할 수 있도록 함

[참고 링크]

• Avada 테마 가이드
• X 브랜드 툴킷 예시

문의: webmaster@travel-in-busan.com
최종 수정일: 2025년 2월 21일

© 2025 Travel-in-Busan | 부산을 여행하다
모든 디자인 요소 및 콘텐츠는 저작권으로 보호됩니다.