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

Travel-in-Busan 웹사이트 스타일 가이드
: 부산 여행과 디자인의 디지털 정체성 구축, 디지털 브랜딩 및 디자인 스타일 가이드 체계
최종 버전: 2025.02

글로벌 디지털 환경에서 개인 브랜드의 일관된 시각적 정체성을 수립하기 위한 체계적 접근법을 제시하는 본 스타일 가이드는
부산의 문화 정체성과 개인 디자인 철학의 조화를 추구하는 Travel-in-Busan의 디지털 정체성 구축을 위한 종합 가이드라인으로, Travel-in-Busan의 웹사이트 운영 표준을 정의합니다.

브랜드의 본질적 가치부터 로고 사용 규정, 타이포그래피 시스템 등의 기술적 구현 표준까지 ‘브랜드 가이드’ 와 ‘디자인 스타일 가이드’ 를 종합하는 9개 주요 영역에 걸친 상세 기준을 제시합니다.
본 문서는 WCAG 2.1 접근성 기준을 준수하는 동시에 현대적 웹 트렌드를 반영하여 브랜드 일관성 유지와 사용자 경험 최적화를 동시에 달성하는 것을 목표로 합니다.

---

1. 브랜드 소개

사이트 정보

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

브랜드 정체성 프레임워크

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

Travel-in-Busan은 부산이라는 도시의 아름다움과 창의적 디자인을 접목하여 여행자와 디자이너 모두에게 영감을 주는 공간입니다. 이 사이트는 단순한 여행 정보 제공을 넘어, 현지의 숨겨진 매력을 탐험하고 기록하며, 디자인 철학과 기술이 어우러진 차별화된 콘텐츠를 제공합니다.

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

부산의 숨겨진 여행 명소, 감성 카페, 로컬 맛집, 그리고 디자인 감각이 돋보이는 포트폴리오까지! Travel in BUSAN에서 부산을 더욱 특별하게 경험하세요.

철학적 기반과 시각적 표현의 통합

Travel-in-Busan은 부산의 지리적·문화적 정체성을 디지털 공간에서 재해석하는 것을 핵심 미션으로 삼습니다. 2025년 현재 430만 부산 시민의 62%가 모바일 기반 여행 정보를 소비한다는 통계를 반영하여, 모바일 퍼스트 디자인 원칙을 기반으로 반응형 레이아웃 시스템을 구축하였습니다.
브랜드 메시지 전달을 위해 파스텔 톤 컬러 팔레트를 채택하고, 세리프와 산세리프 폰트를 혼용하는 타이포그래피 전략을 채택하여 전통적인 미학과 현대적인 감각의 조화를 시각화 했습니다. 이를 통해 Travel-in-Busan은 다음과 같은 목표를 달성합니다:

• 브랜드 일관성 유지: 모든 디지털 터치포인트에서 통일된 시각적 언어와 메시지를 전달하여 브랜드 신뢰도를 향상시킵니다.
• 사용자 경험 최적화: 반응형 디자인과 접근성 기준(WCAG 2.1 AA 준수)을 통해 다양한 기기와 환경에서도 최적의 사용자 경험을 보장합니다.
• 문화와 기술의 융합: 부산의 전통적 가치와 현대 디자인 트렌드를 접목하여, 사용자에게 감동과 영감을 주는 콘텐츠를 구현합니다.
• 디지털 정체성의 지속적 관리: 정기적인 사용자 피드백과 디자인 리뷰를 통해 브랜드 정체성을 꾸준히 업데이트하고, 최신 웹 트렌드와 기술 발전에 발맞추어 나갑니다.

핵심 가치 체계의 계층적 구현

“부산 여행과 디자인의 모든 것”이라는 태그라인 아래 3차원적 가치 체계를 구성합니다. 첫 번째 층위에서는 부산의 관광명소 정보 제공에 집중하며, 두 번째 층위에서 현지 아티스트들의 창작물을 큐레이션합니다. 최상위 층위에서는 AI 기반 개인화 추천 시스템을 통해 사용자 경험을 고도화하는 다층적 접근법을 적용했습니다.

을 핵심 콘셉트로 삼아 도시 문화 큐레이션 플랫폼으로서의 정체성을 확립합니다. 2025년 현재 부산 관광객의 62%가 20-30대 젊은 층이라는 통계를 반영해 밀레니얼 세대와 공감대 형성에 초점을 맞춥니다.

브랜드 미션

• 미션: 부산의 숨겨진 문화 코드 발굴 및 디지털 아카이빙
  • 부산의 숨겨진 명소와 문화를 발견하고 소개합니다.
  • 여행과 디자인의 접점에서 창의적 경험을 제공합니다.
  • 부산의 독특한 문화와 감성을 바탕으로, 여행자와 디자인 애호가 모두에게 유익한 정보를 전달합니다.
  • AI 시대의 디지털 네트워크 환경에서 개인의 성장과 표현을 지원합니다.
  • 선한 영향력을 통해 사용자와 함께 성장하는 콘텐츠 제작합니다.
• 비전: 여행 정보와 디자인 인사이트의 시너지 창출
  • 전통과 현대가 어우러진 부산의 매력을 다각도로 조명합니다.
  • 여행과 디자인의 융합을 통해 감성적이면서도 실용적인 콘텐츠를 제공합니다.
  • 기술과 예술이 조화된 디지털 공간을 구축하여 차별화된 사용자 경험을 제공합니다.
• 핵심 가치: 지역성(Location) × 창의성(Creativity) × 접근성(Accessibility)
  • 지역성(Location): 부산의 독특한 문화와 환경을 기반으로 한 정체성 확립
  • 창의성(Creativity): 디자인과 콘텐츠에서 발휘되는 혁신적 아이디어
  • 접근성(Accessibility): 모든 사용자가 쉽게 접근하고 즐길 수 있는 사용자 경험 제공
• 핵심 키워드: “부산 여행”, “포트폴리오”, “디자인”

이와 같은 전략적 접근을 통해 Travel-in-Busan은 단순한 여행 정보 제공을 넘어, 부산의 문화와 예술, 그리고 디자인 인사이트가 어우러진 차별화된 디지털 공간으로 자리매김할 것입니다.

---

2. 로고 및 브랜딩 요소

시각적 아이덴티티 시스템: 정서적 색채 전략
컬러 시스템은 2016 팬톤 올해의 컬러인 로즈 쿼츠(#F7CACA)와 세레니티(#93A9D1)를 기반으로 도시의 감성을 시각화합니다. 여기서 로즈 쿼츠는 부산의 대표적 상징인 동백꽃의 정서를, 세레니티는 부산 바다의 푸른 물결을 연상시켜 브랜드 컬러로 선정되었습니다.

Travel-in-Busan의 로고는 부산의 상징적 요소들을 반영하여 브랜드의 핵심 가치를 시각적으로 표현합니다. 현재 로고는 AI 생성 기술을 활용해 제작되었으며, 부산의 상징인 동백꽃, 갈매기, 그리고 광안대교가 있는 바다를 구성요소로 한 파스텔톤 일러스트레이션 스타일의 원형 로고입니다.

2.1 로고 디자인

• 디자인 설명:
  • 부산의 상징적 요소(예: 동백꽃, 갈매기, 광안대교 등)를 반영한 파스텔톤 일러스트레이션 스타일의 원형 로고를 사용합니다.
  • 로고 색상은 #f7caca (Rose Quartz)와 #93a9d1 (Serenity)를 주축으로 하며, 2016 팬톤 올해의 컬러 트렌드인 로즈 쿼츠 & 세레니티에서 영감을 받았습니다.
  • 파스텔톤은 온화하고 편안한 느낌을 주며, 로즈 쿼츠는 부산의 동백을, 세레니티는 부산의 푸른 바다를 연상시킵니다.
• 파일 형식:
  • 사이트 아이콘: 512px PNG
  • 오픈그래프 이미지: OG Image

로고그램의 다차원적 적용 원칙

• 메인 로고는 512px PNG와 WebP 포맷으로 제작되어, 다양한 해상도와 디바이스에 대응할 수 있습니다.
• 반사광 효과를 최소화하기 위해 로고는 최소 10mm 이상의 크기로 사용하는 것을 원칙으로 합니다.
• 배경색에 따른 로고의 색상 변형은 4종(풀컬러, 모노크롬, 네거티브, 그라데이션)으로 제공되어, 상황에 맞게 선택할 수 있습니다.
• 오픈그래프 이미지는 1200×630px 비율을 준수하며, 매월 1회 지역의 계절 특성에 맞춰 동적 콘텐츠 업데이트를 실시합니다.

2.2 컬러 팔레트

컬러 팔레트의 과학적 적용

Travel-in-Busan은 주요 브랜드 컬러로 Princess Blue (#00539B)를 지정하고, 8단계 그레이스케일 시스템을 구축했습니다. 모든 UI 요소에는 WCAG 2.1 AA 기준을 상회하는 최소 명암비 4.5:1을 적용하여 접근성 기준을 충족합니다. 또한, 다크 모드 구현 시 기본 배경색으로 Primary Dark (#171B21)를 사용하여 시각적 일관성을 유지합니다.

기본 색상

1. White (#ffffff) – 배경 및 콘텐츠 영역
2. Light Background (#e0e5ed) – 섹션 배경
3. Separators (#c6cdd7) – 구분선
4. Light Text (#838383) – 보조 텍스트
5. Primary Color (#00539b) – 주요 강조 색상 (Princess Blue)
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) – 강렬한 붉은 계열, 임팩트 있는 강조 색상
  (세부 색상 조합은 상황에 따라 조정하며, 주요 색상 간의 보색 및 조화를 고려합니다.)

용도	색상 코드	이름/설명
주조색	#00539b	Princess Blue – 브랜드의 핵심 정체성을 표현하는 주요 색상
보조색	#171b21 #2d353e	Primary Dark, Light Dark Background – 다크 모드 및 섹션 구분에 사용
강조색	#f7caca #93a9d1 #101014	Rose Quartz, Serenity, Night – 포인트 및 텍스트 강조에 사용
배경/텍스트	#ffffff #838383 #475158	White (배경), Light Text (보조 텍스트), Paragraphs (본문 텍스트)

---

3. 타이포그래피 아키텍처

가독성과 브랜드 이미지

Travel-in-Busan은 사용자에게 명확한 가독성을 제공하면서도 세련되고 감각적인 브랜드 이미지를 전달하기 위해, 구글의 오픈소스 폰트 Noto Sans KR을 기본 서체로 채택했습니다.
Noto Sans KR은 깔끔한 고딕체(Sans Serif) 디자인과 뛰어난 가독성을 자랑하며, 한국어 뿐만 아니라 중국어, 일본어, 라틴어, 그리스어, 키릴 문자 등 다양한 언어를 지원합니다.
특히, 글리프 설계 최적화를 통해 자모 배열 문제를 최소화하여, 다국어 환경에서도 균형 잡힌 타이포그래피를 제공합니다. 이를 통해 다양한 언어가 혼합된 웹사이트에서도 일관된 시각적 표현과 통일된 글로벌 레이아웃을 유지할 수 있도록 구성하였습니다.

글꼴 패밀리

• 주요 폰트:
  • Noto Sans KR: 헤드라인, 서브헤드라인, 본문 등 주요 텍스트(예: H1~H6)에 사용.
• 보조 폰트:
  • Noto Serif KR: Small Text나 캡션 등에 사용해 전문적이고 품격 있는 느낌을 부여.
  • Noto Sans Mono: 라벨 및 기술적 요소에 적합한 스타일.

사용 예시:

• Headlines (H1, H2): Noto Sans KR
• Subheadings (H3, H4): Noto Sans KR
• Lead (H5, H6): Noto Sans KR
• Body (본문): Noto Sans KR (편안하고 일관된 가독성 유지)
• Small: Noto Serif KR
• Labels: Noto Sans Mono

글꼴 시스템의 계층적 구조

Travel-in-Busan은 기본 서체를 바탕으로 6단계 제목 계층 구조를 구성합니다.

• 본문 텍스트는 16px 기준 1.6em의 줄간격을 적용하며, 모바일 환경에서는 가독성 향상을 위해 1.2em으로 조정합니다.
• 특수 문자 처리 규정으로 한글과 영문 혼용 시에는 0.5em의 자간(letter spacing)을 추가하여 깔끔한 배열을 유지하며, 숫자 표기는 테이블링 기능을 활성화해 정렬성을 확보합니다.

타이포그래피 세트의 동적 관리

글로벌 타이포그래피 세트는 5개의 기본 프로파일(제목/부제목/리드/본문/작은텍스트)로 구성되며, CSS 사용자 속성(Custom Properties)을 통해 실시간으로 조정할 수 있습니다.
또한, H1-H6 요소마다 뷰포트 너비에 따른 유동적 폰트 사이즈를 지정하여, 1920px 화면에서 72pt로 표시되는 메인 타이틀이 모바일에서는 32pt로 자동 조정되는 적응형 시스템을 구현하였습니다.

스타일 규칙

타이포그래피 구성은 계층적 시각적 대비와 가독성을 고려하여 설계되어야 합니다. 초기 폰트와 크기 선택 후, 아래와 같은 모듈 스케일 및 스타일 규칙을 적용합니다.

• 모듈 스케일 선택:
  기본 글꼴 크기와 제목에 적용할 크기 조정 비율 패턴을 설정할 수 있습니다.(1.067 / 1.125 / 1.200 / 1.250 / 1.333 / 1.414 / 1.500 / 1.618)
  타이포그래피 크기를 설정할 때, 일반적으로 1.25 (소프트 계층) 또는 1.333 (강한 계층) 모듈 스케일을 사용합니다
  Travel-in-Busan에서는 1.250-Major Third 스케일을 기반으로 하되, 픽셀 변환값이 정수 또는 .5 단위로 조정되도록 수정하였습니다.
  (기본 1rem = 16px로 계산하며, 픽셀 변환값은 정수 또는 .5 단위로 조정)
• 세부 규칙:
  • 라인 높이(Line Height):
    • 라인 높이의 사용 값은 단위 없는 숫자를 적용하는 것이 일반적입니다. 사용된 값은 해당 요소의 글꼴 크기에 곱해져 계산되며, 명시적으로 px 단위를 사용하지 않음으로써 상속으로 인한 예기치 않은 결과를 방지할 수 있습니다.
    • 라인 높이는 일반적으로 본문의 경우 1.5~1.75배가 적절하며, 타이틀은 1.2~1.4배 정도가 적당하다.
    • 본문: 약 1.6배 (예: 16px 글꼴에 25.6px, 실제로 28px 정도로 적용)
    • 제목: 1.2 ~ 1.5 배 적용 (H1은 1.2, H2는 1.25, H3는 1.3, H4는 1.35, H5는 1.4, H6는 1.5)
      • 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
    • 소제목(H3-H4): 600
    • 작은 제목(H5-H6): 500-600
    • 본문: 400-500
    • Small 텍스트: 400

타이포그래피 크기 및 스타일 가이드 (예시 표)

요소	권장 크기 (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)	2rem / 1.5rem	메인 헤더, 핵심 제목
H2	약 3.052rem (≈49px) 또는 3rem (48px)	1.75rem / 1.25rem	섹션 제목
H3	약 2.441rem (≈39px) 또는 2.5rem (40px)	1.5rem / 1rem	주요 소제목
H4	약 1.953rem (≈31px) 또는 2rem (32px)	1.25rem / 0.75rem	중요 콘텐츠 헤더
H5	1.5625rem (≈25px)	1rem / 0.75rem	카드 제목, 인용구
H6	1.25rem (≈20px)	0.75rem / 0.5rem	작은 제목
Body	1.09375rem (≈17.5px)	1.25rem / 1.25rem	본문 텍스트
Small	약 0.8rem (≈12.8px) 또는 0.75rem (12px)	0.75rem / 0.75rem	캡션, 버튼, 태그
Labels	약 0.64rem (≈10.24px) 또는 0.625rem (10px)	0.5rem / 0.5rem	부가 정보

이와 같이 Travel-in-Busan은 체계적이고 동적인 타이포그래피 아키텍처를 통해, 다양한 디바이스와 언어 환경에서도 일관된 시각적 표현과 최적의 가독성을 보장합니다.

---

4. 레이아웃 및 UI

Travel-in-Busan의 레이아웃 및 UI 가이드는 직관적이며 유연한 구조를 통해 사용자 경험을 극대화하고, 다양한 디바이스와 콘텐츠 유형에 대응할 수 있도록 설계되었습니다.

웹사이트 구조

사용자 중심의 직관적인 디자인

Travel-in-Busan 웹사이트의 레이아웃 아키텍처는 다음 네 가지 기본 레이아웃 섹션으로 구성됩니다:

• 헤더(Header):
  • 글로벌 내비게이션 및 브랜드 아이덴티티 제공
  • 로고, 사이트 제목, 검색 기능, SNS 링크 등 포함
  • 내비게이션 바와 오프캔버스 팝업 메뉴(예: About, Services, 문의하기)로 구성
• 페이지 제목 표시줄(Page Title Bar):
  • 각 페이지의 고유 타이틀을 노출하여, 사용자가 현재 위치를 명확히 파악할 수 있도록 함
  • 단, 홈페이지(머리글과 바닥글 사이의 콘텐츠 영역)에는 별도로 사용하지 않으며, 콘텐츠에 따라 유연하게 변동 가능
• 콘텐츠(Content):
  • 여행 정보, 디자인 인사이트, 블로그 포스트 등 메인 콘텐츠가 위치하는 영역
  • 사용자에게 핵심 정보를 효과적으로 전달
• 바닥글(Footer):
  • 사이트 정보, 저작권, 호스팅 정보 명시.
  • 추가 네비게이션 링크 등을 포함하여 사용자 편의성을 고려한 구성

특징:

• Avada Website Builder를 활용해 레이아웃을 유연하게 조정
• 각 섹션은 독립적으로 관리되며, 반응형 디자인 원칙에 따라 모바일 환경에 최적화됨
• 기본 글로벌 레이아웃이 있으며, 여기에 추가된 모든 레이아웃 섹션은 웹사이트의 모든 페이지에 표시됩니다
• 조건부 레이아웃 로직을 통해 특정 페이지나 포스트 유형에 맞춰 레이아웃이 동적으로 변경됨

Layout Conditions

레이아웃의 적용 조건은 다음과 같습니다:

• 페이지: All Pages
• 글: All Posts
• 포트폴리오: All Portfolio (Custom Post Types)
• 아카이브:
  • Portfolio Archive Types
  • Post Archive Types
  • All Date Pages (월/연도 기준 보관)
  • All Categories, All Tags
  • All Portfolio Categories, Portfolio Skills, Portfolio Tags
• 검색 결과: Search Results (Jetpack Search로 대체 – 실질적으로는 많이 사용되지 않음)
• 404 페이지: 404 Page

Global Header / 홈페이지 레이아웃

Side To Top Header Transition

• 데스크탑 화면에서는 사이드 헤더를 활용하여 헤더 위치를 왼쪽으로 설정합니다. 내비게이션과 브랜드 아이덴티티를 노출
• 모바일이나 태블릿 등 뷰포트가 중간 화면 크기로 좁아지면 헤더가 페이지 상단으로 되돌아가고, 메뉴는 모바일 메뉴(Collapsible Menus) 형태로 축소됩니다.
• 이러한 유형의 동적 헤더 조정은 측면 헤더가 상단 헤더로 변환되는 시점을 정의하는 레이아웃 섹션의 설정을 통해 가능합니다. 이렇게 하면 다양한 디바이스에서 헤더가 작동하는 방식에 유연성을 제공하여 화면 크기에 관계없이 일관된 사용자 경험을 보장할 수 있습니다.

적용 사례:

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

주요 페이지 레이아웃

그리드 시스템

• 기본 구성: 12-Column 그리드 시스템을 사용해 균형 잡힌 레이아웃 구성
• 반응형 규칙: 모바일에서는 1-Column으로 전환하여 간결하고 직관적인 콘텐츠 제공

Avada 테마 요소 활용:

• 컨테이너 구조: 전체 너비 및 섹션별 컨테이너를 사용해 레이아웃의 일관성 유지
• 컬럼 레이아웃: 50%, 33.33%, 100% 등 유연한 그리드 시스템을 적용하여 다양한 콘텐츠 유형에 대응
• 네스티드 컬럼: 복잡한 레이아웃 요구에 따라 중첩된 컬럼 구조를 활용, 다단 구성 및 세부 콘텐츠 배치에 효과적

---

5. 비주얼 콘텐츠 가이드라인

Travel-in-Busan의 비주얼 콘텐츠 가이드라인은 이미지의 품질과 일관된 스타일을 유지하면서, 사용자 경험 및 웹 성능 최적화를 목표로 체계적으로 관리됩니다.

미디어 처리 표준

• 포맷 우선순위:
  모든 이미지는 16:9 비율의 WebP 포맷을 우선 사용하며, 최대 파일 크기는 500KB를 엄수합니다.
• 콘텐츠 제작 기준:
  • UGC (User Generated Content): 사용 시 반드시 CC BY-NC 4.0 라이선스 표기를 포함합니다.
  • AI 생성 이미지: 별도의 워터마킹 처리를 하여 출처 및 생성 여부를 명확히 합니다.

해상도 및 포맷 규격

• 기본 해상도:
  모든 기본 이미지의 해상도는 1920×1080px (16:9 비율)로 통일합니다.
• 우선 포맷:
  WebP 포맷을 우선 사용하여 이미지의 품질과 파일 크기 효율을 극대화합니다.
• 특수 UI 요소:
  • 카드형 UI 요소는 1.5배 고해상도 이미지를 준비하여 레티나 디스플레이 대응성을 확보합니다.
  • 프로모션 배너는 5:2 비율(2400×960px)을 적용하며, LCP(최대 콘텐츠풀 페인트) 최적화를 위해 파일 크기를 200KB 이하로 제한합니다.

콘텐츠 유형별 이미지 가이드

• 여행 정보 게시물:
  • 현장 촬영 원본 이미지를 사용을 원칙으로 합니다.
  • 색온도는 5500K±200 범위에서 보정이 허용되며, 자연스러운 색감을 유지합니다.
• 디자인 포트폴리오 섹션:
  • 그리드 레이아웃에 최적화된 1:1 정사각형 이미지를 사용합니다.
  • hover 시 3D 회전 효과와 같은 인터랙션 규칙을 적용하여 시각적 임팩트를 제공합니다.
• UGC 활용:
  • 모든 사용자 생성 콘텐츠는 CC BY-NC 4.0 라이선스 표기를 필수로 하여, 저작권 문제를 사전에 방지합니다.

5.1 이미지 및 미디어 스펙

• 최소 해상도:
  1200×800px (권장) – Retina 디스플레이 대응 및 고품질 유지
• 권장 포맷:
  • WebP: 웹 최적화 및 파일 크기 효율성을 위해 우선 사용
  • JPG: 일반 이미지용
  • PNG: 투명 배경이 필요한 경우 사용
• 최대 파일 크기:
  모든 이미지는 웹 성능을 위해 500KB 이하로 유지합니다.
• 비율:
  이미지 비율은 16:9, 4:3, 1:1 (예: Instagram)로 표준화하여 일관된 시각적 표현을 제공합니다.
• 필터 및 스타일:
  브랜드 컬러(Rose Quartz, Serenity)와 조화를 이루는 필터를 적용하며, SNS 공유 최적화를 고려한 크기 및 비율을 설정합니다.

5.2 저작권 및 출처 표기

• 사용자 생성 이미지:
  • 반드시 출처를 표기해야 하며, 예를 들어 “Photo by @username”과 같이 명시합니다.
  • 사용자 제작 콘텐츠 사용 시 출처를 누락하지 않습니다.
• 상업용 이미지:
  • 무료 라이선스 이미지(Unsplash, Pexels 등)를 우선 사용하되, 필요시 구매를 권장합니다.
  • 라이선스 제한 이미지의 경우 사용 전에 반드시 확인하고, 문제가 있는 경우 대체 이미지를 사용합니다.
• 추가 표기 사항:
  • 모든 이미지에 적절한 alt 텍스트를 추가합니다.
  • 저작권이 있는 이미지는 반드시 출처를 명시하며, 개인 촬영 이미지를 우선 사용하고 필요 시 라이선스 이미지를 활용합니다.

이미지 스타일

• 시각적 컨셉:
  • 부산의 자연환경과 도시 풍경을 강조하는 밝고 선명한 이미지를 사용합니다.
  • 브랜드 컬러인 Rose Quartz와 Serenity와의 조화를 이루는 색조를 적용하여, 따뜻하면서도 세련된 느낌을 전달합니다.
• 구도 및 여백:
  • 이미지 구성 시 여백과 구도를 고려하여 균형 잡힌 사진을 제작합니다.
  • 시각적 집중도를 높이기 위해 불필요한 요소는 최소화하고, 핵심 메시지를 전달하는 이미지 사용에 중점을 둡니다.

---

6. 콘텐츠 톤 앤 매너

언어 사용 규범

표준 한국어 맞춤법을 준수하면서 지역 방언(부산 사투리) 요소를 20% 이내로 통제합니다. 기술 용어 사용 시 최초 등장 위치에 영문 표기를 병기하며(예: 로고타입(logotype)), 외래어는 문화체육관광부 표준 외래어 표기법을 준용합니다. 감정 표현 강도는 5단계 계량 시스템(1: 사실적 → 5: 감성적)으로 관리하여 콘텐츠 유형별 적정 수준을 유지합니다.

콘텐츠 유형별 작성 가이드

• 여행 가이드 콘텐츠:
  F-패턴 레이아웃에 맞춰 핵심 정보를 상단 1/3 영역에 집중 배치하여, 빠른 정보 전달과 사용자의 스캔 능력을 극대화합니다.
• 디자인 에세이:
  디자인 에세이의 경우 3단 구성(문제제기/분석/해결책)을 표준화하고, 학술적 참고문헌은 APA 7th 양식에 따라 3개 이상 반드시 인용합니다.
• 설문 및 피드백:
  사용자 피드백 수렴을 위해 7점 리커트 척도 기반 설문 양식을 사용하며, 개방형 질문과 폐쇄형 질문의 비율은 3:7로 유지합니다.
• ‘친근한 전문가’ 콘셉트로 다음 원칙을 준수합니다:
  • 문장당 평균 15단어로 구성하여 Flesch-Kincaid 지수 80점 이상을 목표로 합니다.
  • 지역 방언 사용은 전체의 약 20% 내외로 제한합니다.
  • 기술 용어 사용 시 반드시 영문 병기(예: 로고타입(logotype))를 추가합니다.

브랜드 어조

• 친근하고 전문적:
  브랜드 메시지를 신뢰감 있게 전달하며, 동시에 친근한 어조로 독자의 공감을 이끌어냅니다.
• 현지 통찰 강조:
  부산 현지인의 생생한 통찰과 경험을 바탕으로, 실제적인 정보를 전달합니다.
• 영감 및 긍정 메시지:
  독자에게 영감을 주는 긍정적인 메시지를 전하며, 정보와 감성의 균형을 유지합니다.

콘텐츠 구조

• 계층 구조:
  명확한 제목(H1)과 소제목(H2, H3)을 사용하여 콘텐츠의 계층 구조를 확립합니다.
• 가독성 향상:
  2-3문장의 짧은 단락으로 구성하여 독자의 읽기 편의성을 높입니다.
• 시각적 요소:
  인용구, 콜아웃, 목록, 인포그래픽 등을 활용하여 핵심 메시지를 효과적으로 강조합니다.
  • 핵심 메시지를 강조하는 인용구 및 콜아웃 활용.
  • 목록과 인포그래픽을 통한 정보 시각화

콘텐츠 스타일 가이드

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

블로그 포스트 템플릿

• 헤더 이미지: 매력적인 헤더 이미지로 독자의 시선을 사로잡습니다.
• 제목 및 소개:
  명확한 제목(H1)과 간결한 소개 단락을 포함합니다.
• 논리적 섹션 분할:
  H2, H3 등의 소제목을 사용하여 논리적 구성을 확립합니다.
• 결론 및 CTA:
  결론 부분에서 요약 후, 다음 단계(CTA)를 제시합니다.
• 관련 콘텐츠:
  독자의 관심을 유도하기 위해 관련 콘텐츠를 추천합니다.

---

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

레이아웃 구성 원칙

반응형 그리드 시스템

Travel-in-Busan은 12컬럼 유동 그리드 레이아웃을 기반으로 하며, 5개 브레이크포인트(320px, 768px, 1024px, 1440px, 1920px)를 설정하여 다양한 디바이스 환경에서도 최적의 가독성을 보장합니다.

12컬럼 유동 그리드 레이아웃을 기반으로 5개 브레이크포인트(320/768/1024/1440/1920px)를 설정했습니다. 컴포넌트 간 거터 공간은 상대 단위(rem)로 관리하며, 메인 콘텐츠 영역에 65ch(약 650px) 최대 너비 제한을 적용해 가독성을 극대화했습니다. 헤더와 푸터는 전 페이지에 걸쳐 고정 높이(각각 80px/120px)를 유지하는 동시에 스크롤 시 그림자 효과를 추가하는 동적 인터랙션을 구현합니다.

• 거터(Gutter) 간격: 상대 단위 rem을 사용하여 유연한 간격 조정
• 최대 콘텐츠 너비:
  • 본문 콘텐츠는 가독성을 극대화하기 위해 65ch(약 650px)로 제한
  • 페이지 전체 너비 요소는 1200px을 기본 기준으로 설정
• 고정 높이:
  • 헤더(Header) → 80px
  • 푸터(Footer) → 120px
• 스크롤 동적 인터랙션:
  • 사용자가 스크롤하면 헤더와 푸터에 box-shadow 효과를 추가하여 입체감을 강조

공간 분할 전략

웹사이트의 레이아웃은 **4개 주요 섹션(Header, Page Title Bar, Content, Footer)**으로 구조화했습니다.

오프캔버스 빌더 활용

오프캔버스 빌더를 이용한 사이드바 팝업 시스템은 3단 컨테이너 구조(아이콘 영역/내비게이션/부가정보)로 설계하며, 트랜지션 속도 300ms로 표준화했습니다. 프로젝트 카드 요소에는 15° 각도의 미세한 기울기를 적용해 입체감을 강조하는 시각적 계층화 기법을 도입했습니다.

• 사이드바 팝업 시스템 → 3단 컨테이너 구조(아이콘 영역 / 내비게이션 / 부가정보)
• 팝업 애니메이션 → 300ms 트랜지션 속도 적용
• 프로젝트 카드 요소 → 15° 기울기 적용으로 입체감 강조

탐색이 쉬운 직관적인 인터페이스

• 레이아웃 시스템: Avada Website Builder 활용하여 유연한 디자인 구현
• 홈페이지 레이아웃: 직관적이며 탐색이 쉬운 구조로 주요 콘텐츠 강조
• 팝업 메뉴: About, Services, Latest Posts, Contact 등 핵심 기능 제공
• 푸터 구성: 정보 제공 및 사용자 편의성을 고려한 디자인

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

7.1 UI 요소 가이드

버튼(Button)

유형	배경색	텍스트 색상	모서리 반경
기본 버튼	#00539b	흰색	8px 둥근 모서리
보조 버튼	투명	#00539b (테두리 및 텍스트)	8px
액션 버튼	#fec14f	어두운 텍스트, 강조 효과	8px

• 버튼 크기: 작게(10px), 중간(14px), 크게(16px)

카드 및 컨테이너(Card & Container)

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

폼 요소(Form Elements)

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

상호작용 디자인 패턴

마이크로인터랙션 규격

호버 효과는 200ms 지연 시간을 두고 0.2 불투명도 변화부터 적용합니다. 버튼 클릭 시 물결 효과는 CSS radial-gradient를 이용해 최대 150% 확대 애니메이션으로 구현하며, 트랜지션 함수는 cubic-bezier(0.4, 0, 0.2, 1)을 표준으로 사용합니다. 드래그 앤 드롭 인터페이스에는 8px 이동 임계값을 설정하여 오작동을 방지합니다.

• 호버 효과: 200ms 지연 후 불투명도(opacity) 0.2 변화 적용
• 버튼 클릭 효과:
  • CSS radial-gradient를 활용하여 최대 150% 확대 애니메이션
  • cubic-bezier(0.4, 0, 0.2, 1) 트랜지션 함수 사용
• 드래그 앤 드롭: 8px 이동 임계값 설정하여 오작동 방지

에러 핸들링 메커니즘

폼 유효성 검사 시 실시간 피드백을 제공하기 위해 입력 필드별 3단계 상태 표시 시스템(정상/경고/오류)을 구축했습니다. 404 에러 페이지에는 사용자 위치 기반 맞춤형 추천 콘텐츠를 표시하며, 서버 오류 발생 시 5초 후 자동 재시도 기능을 활성화합니다. 모든 오류 메시지는 한국어/영어/일본어 3개 언어로 동시 표기합니다

• 폼 유효성 검사:
  • 입력 필드별 3단계 상태 표시 시스템(정상 / 경고 / 오류) 구축
• 404 페이지 처리:
  • 사용자 위치 기반 맞춤형 추천 콘텐츠 표시
• 서버 오류 대응:
  • 5초 후 자동 재시도 기능 활성화
• 다국어 지원:
  • 모든 오류 메시지는 한국어 / 영어 / 일본어로 제공

---

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

접근성 구현 표준

Travel-in-Busan은 웹 접근성을 보장하기 위해 WCAG 2.1 AA 기준을 준수하며, 모든 사용자가 편리하게 콘텐츠를 이용할 수 있도록 다양한 최적화 기법을 적용합니다.

WCAG 2.1 AA 준수 사항

텍스트 콘트라스트 비율을 4.8:1로 상향 조정하여 시각 장애 사용자 접근성을 강화했습니다. 모든 이미지에 장문 대체 텍스트(최소 15자)를 부착하며, 동영상 콘텐츠에는 자막과 음성 설명을 필수화합니다. 키보드 내비게이션 지원을 위해 포커스 링 두께를 3px로 확대하고, 트랜지션 모션 효과는 사용자 설정에 따라 비활성화 가능하도록 구현했습니다.

• 색상 대비: 최소 4.5:1 → 시각 장애 사용자를 위해 4.8:1로 상향 조정
• 키보드 내비게이션: 키보드만으로 모든 인터랙션 가능하도록 구현
• 스크린 리더 호환성: ARIA 속성을 활용하여 화면 낭독 기능 지원
• 대체 텍스트(alt text): 모든 이미지에 최소 15자 이상의 설명 제공
• 비디오 접근성:
  • 모든 동영상 콘텐츠에 자막(Captions) 및 음성 설명(Audio Descriptions) 필수 제공
  • 자동 재생 차단, 사용자 조작 우선

보조 기술 최적화

스크린 리더 호환성을 위해 ARIA 랜드마크 역할을 8개 주요 섹션에 정의했습니다. 데이터 테이블에는 scope 속성을 활용하여 행/열 제목을 명시하고, 복잡한 차트 요소에는 장식용 이미지 역할(role=”presentation”)을 부여했습니다. 폼 입력 필드에는 자동완성 속성(autocomplete)을 적용하여 사용자 편의성을 극대화했습니다

• 스크린 리더 최적화:
  • 주요 8개 레이아웃 섹션에 ARIA 랜드마크(role=”banner”, “navigation”, “main”, “contentinfo” 등) 정의
  • 장식용 이미지에는 role=”presentation” 적용하여 화면 낭독기 배제
• 데이터 테이블 접근성:
  • scope 속성을 활용해 행/열 제목 명확히 지정
  • 복잡한 데이터 시각화를 위한 설명 제공
• 폼 최적화:
  • autocomplete 속성 적용 → 사용자 입력 편의성 극대화
  • 포커스 표시 개선: 포커스 링(테두리) 3px 확대
  • 사용자 설정에 따라 애니메이션 효과 비활성화 가능

성능 최적화 전략

웹사이트 성능을 극대화하기 위해 모바일 우선 접근 방식을 적용하며, 불필요한 리소스를 줄이고 로딩 속도를 향상시키는 전략을 사용합니다.

리소스 최적화

• 이미지 최적화:
  • WebP 포맷을 우선 적용하여 파일 크기 최소화
  • LCP(Largest Contentful Paint) 최적화를 위해 주요 이미지 크기 200KB 이하 유지
• 지연 로딩(Lazy Loading) 적용:
  • 초기 뷰포트 외부 이미지 및 비디오 로딩 지연
  • loading="lazy" 속성 기본 적용
• CSS 및 JavaScript 최적화:
  • 불필요한 CSS 제거(CSS Purge)
  • JavaScript 파일 최소화(Minification)
  • font-display: swap 속성을 사용하여 FOIT(Flash of Invisible Text) 방지
• 타사 스크립트 로드 최적화:
  • 타사 스크립트는 3초 후 비동기 로딩
  • 분석 툴은 Cookiebot과 연동하여 GDPR 준수

리소스 로딩 우선순위

퍼스트 콘텐츠풀 페인트(FCP) 속도를 1.2초 이내로 유지하기 위해, 리소스 로딩 우선순위를 최적화합니다.

퍼스트 콘텐츠풀 페인트(FCP)를 1.2초 이내 달성하기 위해 핵심 CSS 인라인 임베딩을 적용합니다. 레이지 로딩 기법으로 초기 뷰포트 외 이미지 로드를 지연시키며, 웹 폰트는 font-display: swap 속성으로 FOIT(Flash of Invisible Text) 현상을 방지합니다. 타사 스크립트는 3초 후 지연 로드하며, 분석 툴은 Cookiebot과 연동해 GDPR을 준수합니다.

FCP 최적화 방법

최적화 기법	적용 방식
핵심 CSS 인라인 임베딩	critical.css 파일을 인라인으로 삽입하여 초기 페인트 가속화
레이지 로딩	loading="lazy" 속성을 적용하여 페이지 로딩 성능 개선
웹 폰트 최적화	font-display: swap 속성을 사용해 FOIT(Flash of Invisible Text) 방지
비동기 스크립트 처리	타사 스크립트는 async 또는 defer로 로드
서버 응답 최적화	HTTP/2, Gzip 및 Brotli 압축 활성화

캐싱 및 CDN 전략

Travel-in-Busan은 웹사이트 성능을 향상시키기 위해 Cloudflare CDN을 활용하여 전역 캐싱을 수행합니다.

정적 자산(이미지, CSS, JS)은 Cloudflare CDN을 통해 전역 캐싱하며, 캐시 유효 기간을 1년으로 설정합니다1. API 응답에는 stale-while-revalidate 지시자를 추가하여 캐시 적중률을 92% 이상 유지합니다. 사용자 개인화 데이터는 IndexedDB에 저장하며, 서비스 워커를 활용한 오프라인 지원 기능을 구현했습니다.

캐싱 전략

• 정적 자산(이미지, CSS, JS)은 Cloudflare CDN을 활용하여 전역 캐싱
• 캐시 유효 기간: 1년(Immutable Cache Control 적용)
• API 응답 최적화: stale-while-revalidate 지시자 추가 → 캐시 적중률 92% 이상 유지
• IndexedDB 활용: 사용자 개인화 데이터를 로컬 저장소에 저장하여 오프라인 지원 기능 제공
• 서비스 워커(Service Worker) 적용:
  • 오프라인 브라우징 지원
  • 캐싱된 리소스를 사용하여 네트워크 응답 지연 최소화

---

9. 스타일 가이드 유지보수 및 버전 관리

디자인 시스템 버저닝

Travel-in-Busan 스타일 가이드는 시맨틱 버저닝(SemVer) 체계를 도입하여 주(major)·부(minor)·수리(patch) 버전으로 관리됩니다.

버전 관리 원칙

• 주 버전 (Major): 스타일 가이드의 주요 변경 사항(예: 디자인 시스템 개편, 주요 UI 변경)이 발생할 때 증가
• 부 버전 (Minor): 새로운 UI 요소 추가 또는 디자인 개편이 있을 때 증가
• 수리 버전 (Patch): 버그 수정 또는 마이너 스타일 조정 시 증가

변경 사항은 CHANGELOG.md에 누적 기록하며, 주요 업데이트 시 마이그레이션 가이드를 별도로 제공합니다.
변경 이력은 Git 기반으로 추적하며 디자인 토큰은 JSON 형식으로 추출하여 Figma Design System과 Storybook을 실시간 동기화하는 자동화 파이프라인을 구축했습니다.

협업 워크플로우 표준

Travel-in-Busan의 디자인 및 개발 워크플로우는 Git Flow 브랜치 전략을 적용해 기능별 개발을 체계화했습니다.

디자인 및 개발 프로세스

• Git Flow 브랜치 전략 적용 → 기능별 개발 체계화
• 디자인 리뷰: 2주 단위 스프린트 회의에서 진행
• 코드 품질 기준:
  • ESLint 규칙 150개 준수
  • Stylelint 규칙 45개 준수
  • CSS, JS 코드 최소화 적용

문서화 및 변경 사항 관리

• 문서화 프로세스는 Swimm 플랫폼을 활용해 실시간 동기화
• 변경 사항은 Jira 티켓과 연동하여 버그 및 개선 사항을 체계적으로 관리

버전 관리 및 업데이트 일정

• 스타일 가이드 버전: v1.0 (2025년 2월)
• 업데이트 일정:
  • 분기별(3개월 단위) 검토 및 업데이트
  • 연 2회 디자인 트렌드 및 접근성 평가
  • 주요 변경 사항 문서화 후 공유

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

Travel-in-Busan 스타일 가이드는 사용자 피드백과 최신 트렌드 분석을 반영하여 지속적으로 업데이트됩니다.

정기 검토 및 개선 프로세스

검토 항목	주기	내용
사용자 피드백 수집	분기별	사용자 UX/UI 개선 요청 반영
디자인 리뷰 세션	분기별	최신 UI/UX 트렌드 분석
접근성 점검	연 2회	WCAG 2.1 AA 기준 준수 여부 재검토
기술 업데이트 반영	연 1회	최신 웹 기술 및 디자인 시스템 도입

트렌드 반영 및 미래 계획

• 연 1회 웹 디자인 트렌드 분석 후 스타일 가이드 업데이트
• 최신 UI/UX 디자인 트렌드 및 기술 발전을 지속적으로 모니터링하여 가이드라인을 최신화
• 분기별 디자인 리뷰 세션을 통해 팀 내 피드백 반영
• 모든 변경 사항은 문서화하여 투명한 디자인 가이드라인 유지

결론: 디지털 존재감의 진화적 관리

본 스타일 가이드에서는 Travel-in-Busan의 디지털 브랜드 정체성을 체계적으로 관리하기 위한 종합적 프레임워크를 제시합니다.
2025년 2월 기준으로 정의된 표준은 분기별 사용자 피드백 분석과 연 2회 접근성 재검증을 통해 지속적으로 개선됩니다.
향후 WebXR 기술 통합과 AI 생성 콘텐츠(AIGC) 가이드라인 확장을 준비하며, 디자인 시스템의 유연성을 유지하기 위해 모듈형 아키텍처를 지속적으로 강화할 계획입니다.

향후 발전 방향:

• WebXR 기술 통합: 가상현실(VR) 기반 웹 경험을 위한 디자인 가이드라인 추가
• AI 생성 콘텐츠(AIGC) 가이드라인 확장: AI 기반 이미지 및 텍스트 콘텐츠 관리 기준 도입
• 디자인 시스템의 유연성 강화: 모듈형 아키텍처로 확장성 및 유지보수성 향상

[참고 링크]

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

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

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