GOFUNWITH Design & Theme Guidelines (v1.0)

For: blog.gofunwith.com
Author: CI & Design Team
Updated: 2025-10-13
Focus: Mobile-first, Bilingual (KR/EN), Thematic Extensibility

🎯 Brand Identity

Brand: GOFUNWITH
Motto: Explore · Create · Share
Tone: Modern, Human, Curious, Global
Target: Tech·DIY·Life·Travel creators sharing insight in KR/EN. Logo: —

🧩 Core Design Principles

1. 모바일 퍼스트 (Mobile-first)
   • 390–768px 중심으로 가독성, 터치영역, 카드 간격 우선 설계
2. 글로벌 확장성 (Bilingual Readability)
   • 한국어+영어 혼합 콘텐츠의 줄 간격, 자간 균형
   • Pretendard + Inter 조합 (locale별 fallback 자동화)
3. 테마 유연성 (Thematic Modularity)
   • 색상/폰트/간격은 모두 CSS Variable 기반
   • 신규 테마(theme-light, theme-dark, theme-sand, theme-forest) 클래스 교체만으로 변경
4. 심플한 콘텐츠 중심 구조
   • 헤더 최소화, 본문 여백 확대, 서브 네비와 태그 강조
5. 글로벌 블로그 트렌드 반영
   • Ghost, Medium, Substack 스타일 혼합
   • Flat한 컬러, 가벼운 그림자, 대형 타이포 중심

🎨 Color Tokens

| Token | HEX | Description | |——-|——|————-| | --color-bg | #FAFAFA | 기본 배경 | | --color-fg | #1E2A3A | 본문 텍스트 | | --color-accent | #FF7B54 | CTA 및 하이라이트 | | --color-muted | #A0A7AF | 서브텍스트 | | --color-card | #FFFFFF | 카드형 배경 | | --color-border | #E5E7EB | 섹션 구분선 |

Dark Theme 변환

• --color-bg: #0F141A
• --color-fg: #F3F4F6
• --color-card: #1E2A3A

확장 테마 예시

• theme-sand: 베이지 + 그린 (캠핑/라이프 감성)
• theme-forest: 다크그린 + 아이보리 (자연, DIY 감성)

🔠 Typography

| Type | Font | Size | Line Height | Weight | |——|——|——|————–|———| | Heading | Poppins / Pretendard | clamp(1.8rem, 2.5vw, 2.8rem) | 1.2 | 700 | | Subheading | Outfit / Pretendard | 1.4rem | 1.3 | 600 | | Body | Inter / Pretendard | 1rem | 1.7 | 400–500 | | Meta | Inter | 0.875rem | 1.5 | 400 |

✅ 영어는 Inter, 한글은 Pretendard로 렌더링
✅ lang="en" 속성 시 자동 폰트 스위칭 지원

📱 Responsive Layout

• 모바일(≤768px): 1단 카드형, 16px 패딩
• 태블릿(768–1024px): 2단 리스트, 24px 패딩
• 데스크톱(≥1024px): 3단 카드형 + 사이드바
• 헤더·GNB는 sticky, 56px 이하 유지
• 푸터는 SNS·저작권·테마 토글 포함

🧠 Content Design

• 대표 이미지: 16:9, radius 12px
• 본문 폭: 70–80ch
• 코드 블록, 수식, 이미지 캡션 스타일 일관
• 다국어 번역 섹션(.translation)은 얇은 border-top으로 구분
• 포스트 끝 CTA: “더 보기 / Subscribe / 댓글 남기기” 블록 포함

🌈 Theme Management

• 모든 색상과 폰트는 :root 변수로 선언
• 테마 전환 시 body에 .theme-xxx 클래스 변경
• 다크모드 자동 감지 + 수동 토글 병행
• 새 테마 추가 시 themes/ 디렉토리 하위에 partial CSS 추가

💬 Language Handling

• HTML 태그에 lang="ko" / lang="en" 자동 감지
• i18n 지원을 위해 구조: ```html

  기술로 인생을 즐겁게 만드는 법.

  How to make life fun with technology.

  GOFUNWITH 로고 및 웹사이트 디자인 가이드라인

이 문서는 GOFUNWITH 브랜드의 로고 및 웹사이트 전반에 걸친 디자인 원칙과 세부 지침을 제공하여, 일관되고 매력적인 사용자 경험을 구축하고 브랜드 아이덴티티를 명확히 하는 데 목적이 있습니다.

1. GOFUNWITH 브랜드 개요

• 사이트명: GOFUNWITH
• 슬로건: Explore. Create. Share.
• 브랜드 핵심 가치: “Go have fun with tech, tools, and life.” 기술 중심이 아닌 ‘경험 중심, 도전과 실험, 즐거운 창작’을 지향합니다. 테크·DIY·캠핑·자동화·생활 실험 등 다양한 영역을 포괄하며, 그 과정 자체에서 오는 ‘여정(Journey)’과 ‘실험(Experiment)’의 즐거움을 강조합니다. 전문적인 감성으로 깊이 있는 내용을 다루면서도, 모든 과정이 ‘재미’로 귀결되는 브랜드를 목표로 합니다.
• 브랜딩 컨셉: ‘유쾌한 호기심으로 시작하는 즐거운 탐험과 창조의 빛’

2. GOFUNWITH 로고 디자인 가이드

로고는 GOFUNWITH 브랜드의 얼굴이며, ‘즐거움의 빛’이라는 컨셉을 시각적으로 구현합니다.

2.1. 로고 구성 요소

GOFUNWITH 로고는 워드마크, 심볼, 슬로건의 세 가지 핵심 요소로 구성됩니다.

1. 워드마크 (Wordmark): gofunwith.
   • 형태: 모든 글자는 소문자로 표기하며, 단어 뒤에 마침표를 포함합니다.
   • 의미: 소문자는 친근하고 접근하기 쉬운 이미지를, 마침표는 ‘완성된 이야기’이자 ‘멈추지 않는 탐험’을 동시에 상징하며 GOFUNWITH만의 독특한 아이덴티티를 부여합니다.
   • 서체: 모서리가 부드럽고 가독성이 높은 산세리프 서체(예: Baloo 2, Quicksand, Nunito)를 사용합니다. 너무 딱딱하거나 기계적인 느낌의 서체는 피하여 ‘즐거움’과 ‘친근함’을 전달합니다.
   • 자간 (Letter Spacing): 글자 간격을 균일하게 조절하여 시원하고 정돈된 느낌을 유지합니다.
2. 심볼 (Symbol): ‘아이디어/즐거움의 빛’
   • 형태: 워드마크 gofunwith. 위에 배치되는 미니멀한 그래픽 요소입니다. (첨부 이미지 참고) ‘반짝임’, ‘불꽃’, ‘전구의 빛’을 상징하는 3~5개의 단순한 선 또는 점으로 구성됩니다.
   • 의미: ‘새로운 아이디어’, ‘즐거운 발견’, ‘영감’을 직관적으로 전달하며, 브랜드 컨셉인 ‘즐거운 탐험과 창조의 빛’을 시각적으로 구현합니다.
3. 슬로건 (Slogan): Explore. Create. Share.
   • 형태: 워드마크 gofunwith. 아래 중앙에 배치됩니다.
   • 서체: 워드마크와 동일하거나 유사한 산세리프 계열의 얇은 굵기(Light/Regular) 서체를 사용하여 간결함과 가독성을 확보합니다.
   • 의미: GOFUNWITH의 핵심적인 비전과 사용자 가치를 명확하게 전달합니다.

2.2. 로고 컬러 팔레트 및 활용

로고는 배경색에 따라 두 가지 주요 조합으로 사용됩니다.

1. 어두운 배경용 로고:
   • 워드마크 컬러: #FFFFFF (화이트)
   • 심볼 컬러 (Accent Color): #FFC107 (밝고 활기찬 오렌지 옐로우)
   • 슬로건 컬러: #FFFFFF (화이트)
   • 권장 배경 컬러: #1A3258 (짙은 네이비) 또는 #212C3C (다크 차콜)
   • 주요 사용처: 웹사이트 헤더, 푸터, 다크 모드 UI, 브랜드 배경.
2. 밝은 배경용 로고:
   • 워드마크 컬러: #333333 (진한 그레이) 또는 #000000 (블랙)
   • 심볼 컬러 (Accent Color): #FFC107 (밝고 활기찬 오렌지 옐로우)
   • 슬로건 컬러: 워드마크와 동일하거나 #666666 (중간 그레이)
   • 권장 배경 컬러: #F5F0E5 (옅은 베이지) 또는 #FFFFFF (화이트)
   • 주요 사용처: 웹사이트 본문 영역, 라이트 모드 UI, 인쇄물.

2.3. 로고 최소 사이즈 및 여백

• 최소 사이즈: 로고의 가독성을 위해 워드마크의 높이 기준 최소 24px 이상 사용을 권장합니다.
• 여백 (Clear Space): 로고 주변에는 로고 높이의 최소 0.5배에 해당하는 안전 여백을 확보하여 다른 요소로부터 시각적 방해를 받지 않도록 합니다.

2.4. 로고 오용 금지

로고의 브랜드 아이덴티티를 훼손하는 다음 행위를 엄격히 금지합니다:

• 로고를 기울이거나 회전시키는 행위.
• 로고 색상을 임의로 변경하는 행위 (정의된 컬러 팔레트 외 사용 금지).
• 로고의 비율을 왜곡(늘리거나 줄이는 등)하는 행위.
• 로고 위에 다른 텍스트나 그래픽을 겹쳐 사용하는 행위.
• 배경색과 로고 색상의 대비가 충분하지 않아 가독성이 떨어지는 곳에 로고를 사용하는 행위.
• 심볼과 워드마크, 슬로건의 위치 및 크기 비율을 임의로 변경하는 행위.

3. GOFUNWITH 웹사이트 디자인 가이드

로고를 넘어 웹사이트 전반에 적용되는 디자인 원칙과 세부 요소를 정의합니다.

3.1. 웹사이트 디자인 컨셉: ‘직관적이고 즐거운 탐험의 플랫폼’

• 전문성: 깔끔하고 정돈된 레이아웃과 일관된 디자인 요소로 ‘전문가 감성’을 전달합니다.
• 즐거움: 액센트 컬러와 미니멀한 아이콘, 충분한 여백으로 ‘탐험과 창조의 즐거움’을 시각적으로 표현합니다.
• 명확성: 사용자가 원하는 정보를 쉽고 빠르게 찾을 수 있도록 직관적인 UI와 명확한 콘텐츠 위계를 제공합니다.

3.2. 컬러 팔레트 (웹사이트 전용)

로고 컬러를 기반으로 웹사이트 전반에 사용될 확장된 팔레트입니다.

• 프라이머리 컬러 (Primary Color): #1A3258 (짙은 네이비)
  • 사용처: 메인 헤더/푸터 배경, 주요 내비게이션, 핵심 UI 요소 (카드 배경 등).
  • 의미: 브랜드의 전문성과 안정감을 대표합니다.
• 액센트 컬러 (Accent Color): #FFC107 (밝고 활기찬 오렌지 옐로우)
  • 사용처: 로고 심볼, 주요 CTA (Call To Action) 버튼, 중요 아이콘, 링크 호버 상태, 시각적 강조 요소.
  • 의미: ‘즐거움’, ‘아이디어’, ‘에너지’를 상징하며, 사용자의 시선을 유도합니다.
• 보조 컬러 (Secondary Color): #327ECB (중간 톤 로열 블루)
  • 사용처: 보조 버튼, 특정 섹션의 타이틀, 탭, 배지.
  • 의미: 프라이머리 컬러와 조화를 이루며 다양성을 제공합니다.
• 중성 컬러 (Neutral Colors):
  • 기본 배경: #FFFFFF (화이트) - 본문 및 콘텐츠 영역
  • 보조 배경: #F5F0E5 (옅은 베이지) - 특정 섹션 배경, 카드 배경 (밝은 테마)
  • 다크 배경: #212C3C (다크 차콜) - 다크 테마 배경, 특별 강조 섹션
  • 본문 텍스트: #333333 (진한 그레이)
  • 보조 텍스트/링크: #666666 (중간 그레이)
  • 구분선/테두리: #E0E0E0 (밝은 그레이)

3.3. 타이포그래피 (Typography)

가독성과 브랜드 컨셉을 최우선으로 합니다.

• 메인 헤딩 (H1, H2): 산세리프 계열 (예: Pretendard Bold, Montserrat Bold)
  • 사용처: 페이지 제목, 섹션 타이틀.
  • 특징: 강하고 명확한 인상으로 정보 위계를 확립합니다.
• 서브 헤딩 (H3, H4, H5, H6): 산세리프 계열 (예: Pretendard SemiBold, Montserrat SemiBold)
  • 사용처: 콘텐츠 내 소제목, 카드 타이틀.
  • 특징: 메인 헤딩과 조화를 이루며 안정적인 정보 구조를 제공합니다.
• 본문 텍스트 (Body Text): 산세리프 계열 (예: Pretendard Regular, Noto Sans Regular)
  • 사용처: 블로그 본문, 상세 설명.
  • 특징: 장시간 읽기에도 편안한 가독성을 제공하며, 웹 환경에 최적화된 서체를 선택합니다. 줄 간격(Line-height)은 1.6em 이상으로 확보하여 여유를 줍니다.
• 링크/버튼 텍스트: 본문 서체 또는 서브 헤딩 서체를 활용하되, 액센트 컬러를 적용하여 시인성을 높입니다.

3.4. 아이콘 및 일러스트레이션

• 아이콘 스타일: 미니멀한 라인 아이콘(Line Icon) 또는 플랫(Flat) 스타일 아이콘.
  • 특징: 첨부 이미지의 아이콘처럼 단순하고 직관적인 형태를 유지합니다. 복잡한 디테일보다는 핵심 개념 전달에 집중하며, 모든 아이콘은 통일된 선 굵기와 스타일을 가집니다.
  • 컬러: 주로 액센트 컬러 또는 중성 컬러(화이트/진한 그레이)를 사용하며, 배경색에 따라 대비를 이룹니다.
• 일러스트레이션: 필요한 경우, 브랜드 컬러 팔레트를 활용한 단순하고 현대적인 스타일의 일러스트레이션을 도입할 수 있습니다. 로고 심볼의 ‘빛’ 컨셉과 연결되는 모티프를 활용하여 통일감을 줍니다.

3.5. 레이아웃 및 그리드 시스템

• 반응형 그리드: 데스크톱, 태블릿, 모바일 등 모든 디바이스에 최적화된 유연한 그리드 시스템을 기반으로 레이아웃을 구성합니다. 콘텐츠는 각 해상도에 맞춰 자동으로 재배열되어야 합니다.
• 충분한 여백 (Whitespace): 콘텐츠 블록, 섹션, 이미지, 텍스트 사이사이에 충분한 여백을 두어 시각적 복잡성을 줄이고, 콘텐츠에 대한 집중도를 높입니다. 이는 미니멀리즘의 핵심 원칙입니다.
• 콘텐츠 배치:
  • 카드형 레이아웃: 블로그 게시물, 카테고리 미리보기 등 다양한 콘텐츠를 카드 형태로 구성하여 시각적인 매력과 정보 접근성을 높입니다.
  • 수평/수직 정렬: 주요 요소들은 그리드 라인에 맞춰 수평 및 수직으로 정렬하여 정돈되고 전문적인 인상을 줍니다.

3.6. 이미지 및 미디어 활용

• 고품질 이미지: 블로그에 사용되는 모든 사진과 이미지는 고해상도여야 하며, 브랜드의 전문적인 이미지를 손상시키지 않아야 합니다.
• 톤앤매너: GOFUNWITH의 ‘탐험’, ‘창조’, ‘즐거움’이라는 가치를 반영하는 이미지를 우선적으로 사용합니다. 첨부 이미지의 블루 톤과 조화로운, 약간 차분하면서도 선명한 색감의 이미지를 선호합니다. 과도하게 화려하거나 채도가 높은 이미지는 지양합니다.
• 관련성: 각 콘텐츠의 주제와 직접적으로 관련된 이미지를 사용하여 이해도를 높이고 몰입감을 부여합니다.
• 대체 텍스트 (Alt Text): 모든 이미지에는 검색 엔진 최적화(SEO) 및 웹 접근성을 위해 적절한 대체 텍스트를 포함해야 합니다.

3.7. UI/UX 요소

• 내비게이션:
  • 상단 내비게이션: 로고, 주요 카테고리 메뉴, 검색창, 사용자 계정(선택 사항)으로 구성됩니다. 스크롤 시에도 고정되어 사용자가 언제든 주요 기능에 접근할 수 있도록 합니다.
  • 사이드바/푸터: 보조 메뉴, 태그 클라우드, 소셜 미디어 링크, 저작권 정보 등을 배치하여 추가적인 정보를 제공합니다.
• 버튼 스타일:
  • 주요 CTA 버튼: 액센트 컬러를 배경으로 하고 흰색 텍스트를 사용하며, 둥근 모서리로 친근함을 더합니다.
  • 보조 버튼: 프라이머리 컬러 또는 보조 컬러를 배경으로 사용하거나, 테두리만 있는(Outline) 형태로 디자인합니다.
  • 호버/액티브 상태: 색상 변화, 그림자 효과, 미세한 애니메이션 등을 적용하여 사용자에게 시각적 피드백을 제공합니다.
• 검색 기능: 강력하고 사용하기 쉬운 검색 기능을 제공합니다. 검색 바는 상단 헤더에 명확하게 배치하고, 자동 완성 기능을 제공하여 사용자 편의성을 높입니다.
• 상호작용: 로딩 애니메이션, 스크롤 효과 등 미니멀하지만 의미 있는 상호작용 요소를 도입하여 사용자 경험을 풍부하게 합니다.