주님의교회 디자인 시스템
일관된 사용자 경험과 교회의 정체성을 위한 UIUX가이드
주님의교회 디자인 스타일 소개
1. 스타일 가이드
일관성
포용성
영성 표현
2. 적용 항목
색상
- 색상 팔레트
- 색상 시스템
- 주요 색상
- 투명도
- 강조 색상
- 그래픽 색상
- 시스템 색상
- 색상 적용
- 전체 색상 팔레트
- 사용 가이드
타이포그래피
- 서체
- 글자 두께
- 줄 간격
- 기본 사이즈
- 표현 단위
- 글자 스케일
- 특정 역할의 토큰
- 계층
- 글자 색상 (접근성)
- 사용 가이드
형태
- 형태가 주는 이미지
- 래디어스
- 래디어스 적용
- 사용 가이드
레이아웃
- 그리드 요소
- 브레이크포인트
- 콘텐츠 영역
- 서브 페이지 레이아웃
- 간격
- 간격 적용
- 사용 가이드
아이콘
- 시스템 아이콘
- 사이즈
- 키라인
- 두께
- 둥글기 값
- 디테일 요소
- 아이콘 색상
- 사용 가이드
엘리베이션
- 엘리베이션
- 표준형 스타일 엘리베이션
- 그림자로 엘리베이션 표현
- 색사용으로 엘리베이션 표현
- 딤드 효과
- 경계라인을 이용
- 엘리베이션 적용
- 사용 가이드
3. 자체검증
디자인 원칙
주님의교회의 디자인 원칙은 ‘예배 · 양육 · 섬김’ 사명을 더 쉽게, 더 따뜻하게 경험하도록 돕는 공통 기준입니다.
이 원칙은 웹/모바일 홈페이지, 배너·주보·카드뉴스 같은 디지털 콘텐츠, 오프라인 안내물까지 모든 접점의 일관성·가독성·접근성을 보장합니다.
본 문서는 왜(목적) 와 어떻게(구현 방법) 를 함께 제시하며, 디자이너·개발자·사역자·외주 협력사가 같은 기준으로 일합니다.
*적용 범위: 홈페이지 전 페이지, 온라인 예배·헌금·상담·새가족 등록, 사역/부서 페이지, 이벤트·집회 홍보물, 다운로드 자료 등.
1. 예배자 중심의 서비스
이 원칙이 중요한 이유
이 원칙을 따르기 위한 주요 방안
- 메인 첫 화면에 예배 시간/장소/온라인 예배 진입을 최우선 배치.
- 설교(영상/오디오/원고) 아카이브는 날짜·시리즈·본문로 쉽게 찾도록 필터 제공.
- 주보/주간소식은 최신 순 노출 + PDF/이미지 다운로드 제공.
- 예배 참여 후 바로 새가족 등록·양육 신청으로 연결되는 CTA 배치.
- 예배 관련 용어는 간단한 설명을 함께 제공(예: “헌금: 온라인으로 드릴 수 있어요”).
2. 모든 성도를 포용하는 서비스
이 원칙이 중요한 이유
이 원칙을 따르기 위한 주요 방안
- 텍스트는 충분한 크기와 대비를 적용(본문 기준 16px/1rem 이상, 명도 대비 권장 준수).
- 핵심 기능(예배·양육·섬김·상담)은 한 번의 클릭으로 접근.
- 모바일·태블릿·PC 반응형 디자인 기본.
- 이미지에 대체 텍스트, 아이콘에는 텍스트 라벨 병기.
- 필요한 경우 다국어(EN/中文) 요약 제공.
3. 공통된 경험 안에서 개별 특성을 고려한 서비스
이 원칙이 중요한 이유
이 원칙을 따르기 위한 주요 방안
- 공통 규칙(로고, 색상, Pretendard 폰트, 버튼/카드 컴포넌트)은 전 부서 공용.
- 부서별 특성은 배너 컬러·아이콘·사진 톤으로만 변주(브랜드 본색은 유지).
- 일정/공지 형식은 템플릿 표준화(제목–요약–일시–장소–문의).
- ‘예배·양육·섬김’ 축으로 내비게이션 동일 구조 유지.
4. 빠르고 간단한 서비스
이 원칙이 중요한 이유
이 원칙을 따르기 위한 주요 방안
- 메인 동선: 공동체 → 예배 → 양육 → 선교 → 섬김 → 소통
- 이미지 최적화(웹P/적절한 용량), 불필요한 애니메이션 최소화.
- 폼은 필수 항목만 남기고, 자동완성·실시간 유효성 검증 제공.
- 자주 찾는 기능은 상단 고정 메뉴 + 퀵 메뉴로 중복 제공.
5. 쉽게 이해하고 사용할 수 있는 서비스
이 원칙이 중요한 이유
이 원칙을 따르기 위한 주요 방안
- 버튼은 동사형으로 명확히: “새가족 등록하기”, “기도 요청하기”.
- 한 블록엔 한 메시지. 문장은 짧고 쉬운 어휘 사용.
- 카드·버튼·배지 등 컴포넌트 규격/상태(기본·호버·비활성) 문서화.
- 폼 필드는 레이블 + 예시 플레이스홀더 제공(예: “연락처(010-1234-5678)”).
6. 다양한 상황을 고려하는 서비스
이 원칙이 중요한 이유
이 원칙을 따르기 위한 주요 방안
- 온라인 라이브 예배·유튜브 채널 멀티 채널 제공.
- 새가족·양육·봉사 신청은 모바일 최적화 + 제출 후 확인 안내/후속 링크 제공.
- 행사/집회는 캘린더·지도·등록 버튼을 한 화면에서 제공.
- 오프라인 안내물(배너/포스터/주보)도 웹 가이드 색·폰트 준수.
7. 신뢰할 수 있는 서비스
이 원칙이 중요한 이유
이 원칙을 따르기 위한 주요 방안
- 예배/행사/공지 업데이트 시각 표기, 지난 자료는 아카이브로 분리.
- 온라인 헌금: 안전 안내(계좌/수단/영수증), 개인정보 최소 수집.
- 상담·기도 요청은 비공개 기본, 처리 과정과 보관 정책 명시.
- 저작권(설교/음원/사진) 표기 준수, 외부 인용은 출처 명확히.
색상 원칙
1. 기본 색상 체계
주요 색상 (Primary Colors)
- 브라운 베이지 (Primary)
- HEX: #d2c4ba | RGB: (210, 196, 186)
- 사용처: 로고, 버튼, 주요 포인트 영역
- 딥 네이비 (Secondary)
- HEX: #0e2439 | RGB: (14, 36, 57)
- 사용처: 헤더, 푸터, 배경 강조
- 웜 그레이 (Background)
- HEX: #f5f5f5 | RGB: (245, 245, 245)
- 사용처: 카드/섹션 배경, 구분 영역
텍스트 색상 (Text Colors)
- 본문: #333333 (짙은 회색)
- 보조: #666666 (중간 회색)
- 반전/밝은 텍스트: #ffffff (어두운 배경 위 사용)
2. 보조 색상
- 레드 오렌지 (강조)
- HEX: #c84b31 | RGB: (200, 75, 49)
- 사용처: CTA 버튼, 경고 알림, 행사 배너
- 골드 베이지 (강조2)
- HEX: #d4a373 | RGB: (212, 163, 115)
- 사용처: 특별 행사, 포스터, 하이라이트 요소
3. 상태 색상
- 성공 (Success) → #4CAF50 (그린)
- 경고 (Warning) → #FFC107 (옐로우)
- 위험 (Error/Danger) → #F44336 (레드)
- 정보 (Info) → #2196F3 (블루)
4. 확장 색상 팔레트
- 가을 행사: 브라운·골드 계열
- 성탄절/부흥회: 레드·그린 조합
- 청년부/다음세대: 블루·민트 톤
5. 사용 가이드
- 일관성: Primary와 Secondary 색상을 중심으로 전체 디자인을 구성합니다.
- 포인트 절제: Accent는 중요 알림이나 행사 배너에만 제한적으로 사용합니다.
- 가독성: 텍스트 대비율은 WCAG 2.1 기준 준수(최소 4.5:1).
- 확장성: 특별 집회/행사에는 테마 색을 추가할 수 있으나, 기본 팔레트와 조화를 유지해야 합니다.
6. 색상 팔레트
- 표준 팔레트는 Gray Scale을 기준으로 0(White)부터 100(Black)까지 단계별로 나누어 사용합니다.
- 브라운, 네이비, 골드 등 주요 색상은 11단계 명도 체계를 적용하여, UI 요소(버튼, 배경, 아이콘 등)에 맞게 적절히 활용됩니다.
- 이를 통해 교회 홈페이지 전반에서 통일성 있는 비주얼을 제공하면서도, 상황과 맥락에 따라 색상의 깊이와 변화를 줄 수 있습니다.
7. 접근성과 매직넘버
주님의교회 디자인은 모든 성도가 쉽게 보고, 읽고, 이해할 수 있도록 접근성을 최우선으로 합니다.
이를 위해 색상 대비를 일정한 기준으로 관리하는데, 이를 매직넘버(Magic Number)라 부릅니다.
매직넘버는 색상 단계 간의 명도 차이를 수치화하여, WCAG(Web Content Accessibility Guidelines) 기준에 따른 명도 대비 비율(Contrast Ratio)을 쉽게 계산할 수 있게 도와줍니다. 이를 통해 글자, 배경, 아이콘, 그래픽 등 교회 홈페이지의 모든 요소가 명확히 구분되고, 누구나 불편 없이 이용할 수 있습니다.
- 매직넘버 40 – 명도 대비 3:1
- 매직넘버 50 – 명도 대비 4.5:1
- 매직넘버 70 – 명도 대비 7:1
- 매직넘버 90 – 명도 대비 15:1
8. 색약자를 위한 고려
주님의교회 디자인은 모든 성도가 차별 없이 동등하게 정보와 은혜를 누릴 수 있도록 접근성을 중요하게 생각합니다.
특히 색약(색각이상)을 가진 분들도 홈페이지와 콘텐츠를 불편 없이 사용할 수 있어야 합니다.
- 색상만으로 의미를 전달하지 않는다
→ 항상 텍스트, 아이콘, 패턴을 함께 사용하여 보완합니다. - 혼동을 줄이는 색상 조합을 선택한다
→ 특히 적색과 녹색의 직접적인 조합은 피하고, 명도 차이를 크게 두어 구분합니다. - 상태(성공/경고/위험/정보)를 표현할 때는 색상 + 텍스트(예: “성공”, “오류”)를 함께 표기합니다.
- 아이콘 사용 → ✔, !, × 등 직관적인 심볼로 의미를 강화합니다.
(1) 색각이상자가 명확히 구분할 수 있는 색상
(2) 색각이상자가 구분하기 어려운 조합
9. 색상 비율
(1) 배경 및 중립적 색상 : 60%
- 주로 웜 그레이(#f5f5f5), 화이트(#ffffff) 계열을 사용
- 페이지의 전반적인 분위기를 안정적으로 유지
- 예: 섹션 배경, 카드 배경, 넓은 레이아웃 영역
(2) 보조 색상 : 30%
- 브라운 베이지(#d2c4ba), 네이비(#0e2439) 등 브랜드 아이덴티티 컬러 사용
- 교회만의 정체성을 드러내면서도 과하지 않게 균형 유지
- 예: 헤더, 푸터, 주요 버튼, 구분선, 콘텐츠 하이라이트 영역
(3) 강조 색상 : 10%
- 레드 오렌지(#c84b31), 골드 베이지(#d4a373) 등 포인트 컬러
- 사용자 시선이 머물러야 하는 중요 기능, 알림, CTA 버튼에 적용
- 예: 온라인 헌금 버튼, 공지 알림 배너, 이벤트 포스터 포인트
10. 색상 적용
(1) 배경, 표면 색상 (background, surface)
주님의교회 홈페이지의 색상 적용은 일반 모드와 선명한 화면 모드를 기준으로 나누어, 배경과 표면의 레이어(elevation)를 단계적으로 표현합니다.
이 원칙은 교회의 따뜻한 분위기를 유지하면서도, 정보와 기능을 명확하게 구분할 수 있도록 돕습니다.
(2) 기본 모드
- 배경색은 주로 웜 그레이(#f5f5f5) 또는 화이트(#ffffff)를 사용하여 차분하고 안정적인 화면을 제공합니다.
- 표면(surface)은 레이어가 쌓일 때 화이트 surface → 색상 surface → 화이트 surface를 번갈아 사용합니다.
- 구분을 위해 border(Gray 200)나 shadow(2~4px soft shadow)를 함께 사용하여 깊이감을 표현합니다.
(3) 레이어 단계
레이어의 깊이에 따라 Gray 톤을 조정해 시각적인 층위를 만듭니다.
- elevation 0 → Gray 0 (#ffffff, 기본 표면)
- elevation -1 → Gray 10 (#f9f9f9, 배경과의 미세 차이)
- elevation +1 → Gray 50 (#f5f5f5, 카드/박스 배경)
- elevation +2 → Gray 0 (#ffffff, 팝업/상위 레이어)
(4) 적용 예시
- 배경 (Background): 전체 페이지 기본 바탕 – 웜 그레이/화이트
- 카드 (Card Surface): elevation +1 – Gray 50 (#f5f5f5)
- 모달/팝업 (Modal Surface): elevation +2 – 화이트 (#ffffff)
- 푸터/Footer: Secondary 컬러 네이비(#0e2439) 사용, 텍스트는 White(#ffffff)
11. 글자 색상
주님의교회 홈페이지의 텍스트 색상은 배경과의 명도 대비(Contrast Ratio)를 기준으로 설정합니다.
특히 Gray-0(White) 배경 이외의 컬러 배경에서는 대비가 충분히 확보되어야 성도 누구나 읽기 편합니다.
(1) 기본 원칙
- 글자 색상은 배경과의 매직넘버 기준 대비를 충족해야 한다.
- 본문과 안내문은 최소한의 접근성을 보장할 수 있는 대비 값을 유지한다.
- 강조 텍스트(제목, 버튼, 링크)는 더 높은 대비로 설정하여 시각적으로 명확하게 전달한다.
(2) 매직넘버 기준
- 기본 모드: 최소 매직넘버 40 확보 (명도 대비 3:1)
- 본문 텍스트: 최소 매직넘버 50 확보 (명도 대비 4.5:1)
(3) 적용 예시
- 화이트(#ffffff) 배경 → 본문 텍스트 #333333 (충분한 대비)
- 네이비(#0e2439) 배경 → 본문 텍스트 #ffffff (매직넘버 50 이상)
- 브라운 베이지(#d2c4ba) 배경 → 본문 텍스트 #0e2439 (명도 대비 확보)
타이포그래피
타이포그래피는 교회가 전하고자 하는 예배, 말씀, 소식을 성도와 방문자에게 명확하고 따뜻하게 전달하기 위한 핵심 요소입니다.
글꼴, 크기, 두께, 간격, 계층 구조를 정의함으로써, 홈페이지 어디에서나 일관된 경험과 높은 가독성을 제공합니다.
가이드에 따른 타이포그래피는 성도들이 말씀에 집중할 수 있도록 돕고, 다양한 기기와 화면 환경에서도 안정적으로 읽히도록 설계되었습니다.
1. 서체 (Font Family)
표준형 스타일
국문과 영문 모두 Pretendard 서체를 기본으로 사용합니다.
Pretendard는 화면과 인쇄 모두에서 안정적인 가독성을 제공하며, 교회의 정체성을 담기에 충분한 현대적이고 깔끔한 서체입니다.
확장형 스타일
특별한 이벤트, 배너, 포스터 등에는 가독성이 높은 고딕 계열 서체 사용을 권장합니다.
단, 본문과 제목은 반드시 고딕 계열(예: Pretendard, Noto Sans, Spoqa Han Sans 등)을 유지하여 일관성을 지킵니다.
2. 글자 두께 (Font Weight)
- Regular (400) → 본문용. 기본적인 가독성을 보장하며 장문의 텍스트에 적합합니다.
- Medium (500) → 부제목이나 강조가 필요한 본문 내 텍스트에 적합합니다.
- Bold (700) → 제목이나 중요한 메시지를 강조할 때 사용합니다.
*너무 얇은 Light/Thin은 배경과의 대비가 떨어져 가독성을 해치고, 지나치게 두꺼운 Extra Bold는 시각적 피로를 줄 수 있으므로 사용을 제한합니다.
3. 글자 두께 사용 원칙
- 텍스트 두께는 최대 3~4가지 수준으로 제한합니다.
- 여러 단계의 굵기를 과도하게 사용하면 정보의 중요도가 혼동될 수 있습니다.
- 주님의교회 홈페이지에서는 Regular(400) / Medium(500) / Bold(700) 조합을 기본으로 합니다.
4. 적용예시
- 본문 (Regular 400)
→ 예배 안내, 교회 소식, 설교 본문 텍스트 - 소제목 (Medium 500)
→ 섹션 타이틀, 카드 제목, 안내문 - 제목 (Bold 700)
→ 페이지 타이틀, 배너 문구, 주요 CTA 버튼
5. 줄 간격
주님의교회 홈페이지의 텍스트는 성도 누구나 편안하게 읽을 수 있도록 줄 간격을 충분히 확보합니다.
줄 간격은 단순한 디자인 요소가 아니라, 가독성과 접근성을 보장하는 중요한 기준입니다.
(1) 기본 원칙
- 줄 간격은 글자 크기의 최소 150% 이상으로 설정합니다.
- 시각적 피로를 줄이고, 시각장애나 난독증 사용자의 읽기 편의를 높입니다.
- 고정된 px 단위 대신, em 또는 % 같은 상대 단위를 사용하여 다양한 글자 크기에 대응합니다.
(2) Figma에서의 Vertical Trim 설정
Standard 모드 권장
- 폰트 전체 높이를 기준으로 CSS의 line-height와 구조적으로 유사합니다.
- 디자인과 개발 환경 간의 불일치를 줄여 일관성을 확보할 수 있습니다.
- 글자의 상단·하단 요소가 모두 포함되므로 여백 조정에 유의합니다.
Cap height to baseline 모드
- 대문자의 상단(cap height)과 기준선(baseline)만을 기준으로 계산됩니다.
- 컴포넌트나 그리드에 맞추기 유리하지만, 실제 개발 환경과 달라 보일 수 있으므로 주의가 필요합니다.
*표준형 스타일에서는 Standard 모드를 사용하여 교회 웹사이트 전반의 안정성을 보장합니다.
6. 기본 글자 크기
- 본문 폰트 크기는 최소 16px 이상으로 설정합니다.
- 디지털 취약계층도 쉽게 읽을 수 있도록 기본 크기를 넉넉히 잡습니다.
- Pretendard는 다른 서체보다 약간 작아 보이므로, 17px을 기본 본문 크기로 권장합니다.
서체별 특성 (Font Characteristics)
- 같은 px 크기의 글자라도 서체의 디자인 특성에 따라 실제로 보이는 크기와 무게감은 다르게 느껴질 수 있습니다.
- 이 차이를 이해하고 조정하는 것이 교회 홈페이지의 시각적 균형과 가독성을 유지하는 데 매우 중요합니다.
7. 표현 단위 (rem)
- 반응형 디자인과 접근성을 위해 개발 시 rem 단위를 사용합니다.
- rem은 루트 요소 크기에 따라 조정되는 단위이므로, 브라우저 설정에 따라 사용자가 텍스트 크기를 직접 조절할 수 있습니다.
- rem 기본값은 보통 62.5% = 10px 기준으로 설정하여, px 단위를 직관적으로 변환할 수 있게 합니다.
| 기준 | % 값 | px 값 |
|---|---|---|
| 시스템 기본 크기 | 100% | 16px |
| 62.5% (권장) | 62.5% | 10px |
| 50% (축소 기준) | 50% | 8px |
8. Display
디스플레이(Display)는 화면에서 가장 큰 크기의 텍스트 스타일로, 배너·행사 포스터·히어로 섹션과 같이 성도들의 시선을 끌어야 하는 영역에서 사용합니다.
크고 강렬한 메시지를 전달할 수 있으나, 과도한 크기 사용은 화면의 균형을 깨뜨릴 수 있으므로 주의해야 합니다.
(1) 사용 원칙
- 예배 주제, 행사 타이틀, 교회 비전 선언 등 중요한 메시지를 강조하는 데 사용
- 본문이나 일반 안내문에는 사용하지 않음
- 반응형 환경(PC/모바일)에 맞춰 크기를 다르게 설정하여 가독성과 비율을 유지
| Style | Size (PC) | Size (Mobile) | Font weight | Line height | Letter spacing |
|---|---|---|---|---|---|
| Large | 60px | 44px | 700 (Bold) | 150% | 1px |
| Medium | 44px | 32px | 700 (Bold) | 150% | 1px |
| Small | 36px | 28px | 700 (Bold) | 150% | 1px |
(2) 적용 예시
- Large (60/44) → 주일 예배 비전 슬로건, 홈페이지 메인 히어로 영역
- Medium (44/32) → 특별 집회나 행사 타이틀, 배너 제목
- Small (36/28) → 부서/사역 소개 페이지의 메인 타이틀
9. Navigation (내비게이션)
내비게이션은 교회 홈페이지에서 성도들이 원하는 정보를 쉽게 찾을 수 있도록 안내하는 이정표 역할을 합니다.
헤더, 메인 메뉴, 사이드 메뉴, 페이지 내 탐색 등 다양한 컴포넌트에 적용되며, 사용자가 길을 잃지 않고 빠르게 접근할 수 있도록 직관적이어야 합니다.
(1) Navigation 적용 영역
- Header: 사이트 상단의 메인 메뉴 (예배, 양육, 섬김, 교회소개 등)
- Main menu: 주요 섹션으로 이동하는 1차 내비게이션
- Side menu: 부서별/세부 페이지 전환용 메뉴
- In-page navigation: 한 페이지 안에서 빠른 이동을 돕는 앵커 링크
(2) Navigation 스타일 가이드
| Style | Size (PC) | Size (Mobile) | Font weight | Line height | Letter spacing |
|---|---|---|---|---|---|
| title-large | 24px | 22px | 700 (Bold) | 150% | 0px |
| title-small | 19px | 17px | 700 (Bold) | 150% | 0px |
| depth-medium-bold | 17px | 17px | 700 (Bold) | 150% | 0px |
| depth-medium | 17px | 17px | 400 (Regular) | 150% | 0px |
| depth-small-bold | 15px | 15px | 700 (Bold) | 150% | 0px |
| depth-small | 15px | 15px | 400 (Regular) | 150% | 0px |
(3) 적용 예시
- title-large (24/22 Bold) → 헤더의 메인 메뉴 (예배, 양육, 섬김, 교회소개 등)
- title-small (19/17 Bold) → 서브 메뉴 타이틀 (예: “양육 과정”, “섬김 사역”)
- depth-medium-bold (17 Bold) → 활성화된 메뉴 항목
- depth-medium (17 Regular) → 일반 메뉴 항목
- depth-small-bold (15 Bold) → 사이드 메뉴나 모바일 드롭다운의 강조 항목
- depth-small (15 Regular) → 보조 메뉴, 하위 링크
10. 타이포그래피 계층 (Hierarchy)
타이포그래피의 계층 구조는 Display, Heading, Body 세 단계로 구성되며, 정보의 중요도를 시각적으로 구분하는 핵심 역할을 합니다.
계층이 명확히 설정되면 사용자는 자연스럽게 중요한 정보부터 보조 정보까지 순차적으로 이해할 수 있습니다.
(1) 콘텐츠 영역
(2) 정보 구조가 깊은 경우
(3) 목록이 있는 경우
(4) 배너에 사용되는 경우
형태 (Shape)
형태는 주님의교회의 시각적 아이덴티티를 표현하는 중요한 요소입니다. 특히 UI 요소에 적용되는 둥글기 값(radius)은 버튼, 카드, 컨테이너, 이미지 등 다양한 컴포넌트에서 교회의 고유한 분위기와 따뜻한 인상을 만들어냅니다.
1. 형태가 주는 이미지
디자인 시스템에서 컴포넌트의 형태(Shape)는 단순한 장식이 아니라, 브랜드의 시각적 아이덴티티를 형성하는 핵심 요소입니다.
- 둥근 모서리(Rounded radius)
→ 부드럽고 따뜻한 이미지를 전달하며, 공동체적이고 친근한 교회의 성격을 표현합니다. - 각진 모서리(Sharp edge)
→ 단정하고 전문적인 이미지를 주지만, 지나치게 사용하면 딱딱하고 차가운 느낌을 줄 수 있습니다.
형태의 변형에 따라 사용자가 교회 홈페이지를 통해 느끼는 감정과 인식이 달라질 수 있기 때문에, radius 설정은 디자인 정체성을 유지하는 데 중요한 역할을 합니다. 따라서 주님의교회 홈페이지는 적당한 둥글기(8px~16px radius)를 기본으로 사용하여, 따뜻함과 안정감을 주면서도 전문성을 유지하는 방향을 권장합니다.
2. 래디어스 (Radius)
래디어스는 버튼, 카드, 컨테이너, 이미지 등 모든 UI 컴포넌트의 모서리 형태를 정의하는 요소로, 주님의교회 홈페이지의 일관된 시각적 아이덴티티를 만들어줍니다.
(1) 표준형 스타일
주님의교회 래디어스 시스템은 xsmall – small – medium – large – xlarge의 5단계로 구성됩니다.
각 레벨은 주로 함께 사용되는 컴포넌트 묶음에 적용되어, 시각적 통일감과 따뜻한 브랜드 이미지를 유지합니다.
(2) 값의 범위
- 표준형 스타일은 2px ~ 12px 범위의 래디어스를 사용합니다.
- xsmall (2px) → 작은 아이콘 버튼, 뱃지 등
- small (4px) → 일반 버튼, 입력창 등
- medium (8px) → 카드, 작은 컨테이너 등
- large (10px) → 이미지 썸네일, 섹션 카드 등
- xlarge (12px) → 모달, 메인 배너, 대형 카드 등
(3) 적용 원칙
- 과도하게 둥근 형태는 교회의 전문성과 안정감을 해칠 수 있으므로 최대 12px까지만 사용합니다.
- 작은 컴포넌트일수록 작은 래디어스, 큰 컴포넌트일수록 큰 래디어스를 적용해 비율의 조화를 유지합니다.
- 전체 페이지에서 동일한 단계 규칙을 적용해 브랜드 일관성을 확보합니다.
(4) 확장형 스타일
레이아웃 (Layout)
레이아웃은 교회 홈페이지의 정보 구조와 시각적 흐름을 체계적으로 구성하여, 성도와 방문자가 콘텐츠를 쉽게 이해할 수 있도록 돕는 기본 틀입니다.
일관된 레이아웃은 교회의 메시지를 명확하게 전달하고, 다양한 디바이스에서 편안한 사용자 경험을 제공합니다.
1. 레이아웃의 역할
- 정보 전달의 흐름을 단순하고 명확하게 유지
- PC, 태블릿, 모바일 등 다양한 환경에서 동일한 경험 제공
- 시각적 일관성을 바탕으로 교회의 신뢰성과 전문성 강화
2. 그리드 요소 (Grid System)
주님의교회 홈페이지는 질서 있고 균형 잡힌 레이아웃을 위해 그리드 시스템을 사용합니다. 그리드 시스템은 화면 내에서 요소의 배치와 정렬을 돕고, 시각적 일관성과 안정감을 제공하여 성도와 방문자가 콘텐츠를 쉽고 편안하게 탐색할 수 있도록 합니다.
Screen margin (화면 여백)
- 화면 양쪽 가장자리에 있는 공간을 의미합니다.
- 여백을 충분히 확보하면, 콘텐츠가 답답하지 않고 안정적이고 시원한 레이아웃을 만듭니다.
- 예: PC에서는 좌우 24px~40px, 모바일에서는 16px 권장
Column (컬럼)
- 콘텐츠 영역을 수직으로 분할한 기본 단위입니다.
- PC에서는 12컬럼, 태블릿은 8컬럼, 모바일은 4컬럼을 기준으로 설정합니다.
- 컬럼 단위로 콘텐츠를 배치하면, 화면 크기가 달라져도 일관된 정렬과 비율을 유지할 수 있습니다.
Gutter (가터)
- 컬럼과 컬럼 사이의 간격을 의미합니다.
- 적절한 가터 간격은 요소 간의 관계를 명확히 하고, 가독성과 시각적 균형을 높입니다.
- PC에서는 24px, 모바일에서는 16px을 기본으로 권장합니다.
3. 브레이크포인트 (Breakpoint)
브레이크포인트는 화면 크기에 따라 레이아웃이 전환되는 지점을 의미합니다.
주님의교회 홈페이지는 PC, 태블릿, 모바일 등 다양한 기기에서 성도들이 불편 없이 사용할 수 있도록, 브레이크포인트를 기준으로 반응형 디자인을 적용합니다.
4. 간격 (Spacing)
간격은 UI 디자인에서 요소와 요소 사이의 공간을 의미하며, 사용자가 교회 홈페이지의 정보를 쉽게 탐색하고 직관적으로 이해할 수 있도록 돕습니다.
일관된 간격 시스템은 화면의 흐름을 자연스럽게 이어주고, 콘텐츠를 더 편안하게 읽을 수 있게 합니다.
(1) 갭 (Gap)
- 정의: 컴포넌트와 컴포넌트 사이의 바깥 여백
- 사용 목적: 카드, 리스트 항목, 그리드 레이아웃 등에서 요소 간의 간격을 조절하여 정보의 밀도와 시각적 균형을 유지합니다.
(2) 패딩 (Padding)
- 정의: 컴포넌트 내부의 여백으로, 콘텐츠와 경계선 사이의 공간
- 사용 목적: 텍스트와 아이콘이 너무 붙지 않도록 하여 가독성을 높이고, 명확한 콘텐츠 구분을 제공합니다.
