당원가입과 후원, 소식을 한곳에 모은 정당 웹사이트

사회민주당의 국가비전과 당 소식을 알리고 당원가입과 후원으로 이어지는 참여 동선을 제공하기 위해 구축한 공식 정당 웹사이트입니다. 메인 화면에서 “정치를 새롭게 복지를 강하게” 메시지와 당원가입 버튼으로 시작해 공지 슬라이드 → 소개 메뉴 → SNS 채널 → 후원하기 순으로 방문자의 관심과 참여가 단계적으로 이어지도록 구성했습니다. 특히 소개·소식·소통·후원하기의 네 가지 메뉴로 정보를 나누고 오렌지와 틸 컬러 포인트로 정당의 활력과 따뜻한 인상을 만들었으며, 로그인 기반의 당원 서비스와 게시판 기능도 함께 구성했습니다.

#사회민주당
#정당홈페이지
#당원가입
#정당후원
#정치웹사이트
#공지게시판
#당원게시판
#정당브랜딩
#반응형웹
#UIUX

Client: 사회민주당
Category: 기타

Design Concept

참여로 이어지는 정당 홈

정당 사이트는 방문자가 원하는 정보를 찾는 곳이자 직접 참여하는 곳이라는 점에서, 정보 열람과 참여가 끊기지 않고 이어지는 구조를 디자인의 출발점으로 삼았습니다.
밝은 오렌지를 메인 컬러로 하고 틸 컬러를 보조로 더해 딱딱한 정치 사이트가 아닌 활력 있고 따뜻한 인상을 만들었으며, 굵은 제목 서체와 넉넉한 여백으로 메시지가 먼저 읽히도록 했습니다.
또한 소개, 소식, 소통, 후원하기의 네 가지 메뉴와 당원가입·로그인 버튼을 같은 규칙으로 정리해 방문자가 필요한 정보를 빠르게 찾고 참여로 이어지도록 설계했습니다.

Design Elements

01

당원가입 중심의 메인 히어로

“정치를 새롭게, 복지를 강하게” 메시지 바로 아래에 당원가입하기 버튼을 두었습니다.
첫 화면에서 가장 중요한 참여 동선이 바로 보입니다.
02

최신 공지 슬라이드

메인에서 최근 공지 다섯 건을 날짜와 함께 슬라이드로 보여줍니다.
방문자가 별도 이동 없이 당의 최신 소식을 확인할 수 있습니다.
03

소개·소식·소통 메뉴 체계

강령과 당헌, 공지와 브리핑, 게시판과 FAQ를 세 갈래 메뉴로 나눠 정리했습니다.
정보의 성격에 따라 원하는 곳을 빠르게 찾을 수 있습니다.

Responsive

디바이스 대응

PC · 태블릿 · 모바일 전 환경에서 정보의 순서와 사용성이 동일하게 유지되도록 반응형으로 설계했습니다.

Desktop
1920 × 1080
데스크톱
Tablet
768 × 1024
태블릿
Mobile
375 × 812
모바일

Design System

컬러 팔레트와 타이포그래피를 시스템으로 정의해 화면 전반에 일관된 규칙을 적용했습니다.

Colors

Main Color#F58400

Sub Color#0E716F

Point Color#C46A00
Signature Orange#F58400
Deep Orange#C46A00
Deep Teal#0E716F
Cream#FFFAF5
Soft Gray#F5F5F5
Slate Gray#7A7A7A
White#FFFFFF

Typography

Aa 가나다 Pretendard

가나다라마바사아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789

Weight

가나다 Aa
가나다 Aa

Regular · Bold

Aa 가나다 SBAggroB

가나다라마바사아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789

Weight

가나다 Aa
가나다 Aa

Regular · Bold

Aa 가나다 LINESeedKR

가나다라마바사아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789

Weight

가나다 Aa
가나다 Aa

Regular · Bold

Main Page

메인 페이지

첫 화면에서 브랜드와 핵심 서비스를 먼저 보여주고,
스크롤 흐름에 따라 필요한 정보로 자연스럽게 이어지도록 구성했습니다.

www.example.com

스크롤하여 전체 보기 ↓

Sub Page

서브 페이지

주요 서브 페이지를 같은 규칙으로 설계했습니다.

02 Pages

당원가입과 후원, 소식을 한곳에 모은 정당 웹사이트 서브 페이지 1 — Sub Page 혁신적 복지국가 페이지 01

당원가입과 후원, 소식을 한곳에 모은 정당 웹사이트 서브 페이지 2 — Sub Page 공지사항 페이지 02

Note

소개, 소식, 소통 페이지를 같은 규칙으로 일관되게 확장할 수 있도록 설계했습니다.

서브 페이지는 상단 메뉴와 좌측 서브 메뉴, 제목 영역이 같은 구조를 따릅니다. 게시판은 공지사항과 브리핑, 자료실, 당원게시판 등 같은 목록 규칙으로 통일했습니다.

Grid: 소개, 소식, 소통 정보를 카드와 목록 형태로 나눠 같은 간격 규칙으로 정리했습니다.
Header: 소개, 소식, 소통, 후원하기 메뉴와 당원가입·로그인 버튼을 상단에 함께 두었습니다.
CTA: 당원가입하기와 후원하기 버튼을 메인 화면 곳곳에 반복 배치했습니다.

Mobile

모바일 환경에서 자주 쓰는 기능을 손이 닿는 곳에 배치했습니다.

Bottom Bar

모바일 메뉴 버튼오렌지 메뉴 버튼으로 전체 메뉴를 여는 모바일 내비게이션

공지 슬라이드손가락으로 넘겨 보는 최신 공지 슬라이드

Optimization

Menu

PCMenu · 4개 대메뉴와 하위 메뉴, 당원가입·로그인 버튼

MOMenu · 메뉴 버튼으로 여는 모바일 전용 메뉴
Layout

PCLayout · 공지, 소개, SNS, 후원 블록을 가로로 배치

MOLayout · 블록을 세로 한 열로 쌓아 재배치
Typography

PCTypography · 굵은 제목 서체와 Pretendard 본문

MOTypography · 화면 폭에 맞춰 제목과 본문 크기 조정
Image

PCImage · 캐릭터와 배너 이미지를 크게 사용

MOImage · 배너와 캐릭터를 모바일 비율로 재구성