01 재조합
무엇이 바뀌었나 — v1 → v2
개편안 v1 의 정보 구조와 실데이터는 그대로 두고, 상위 10 시안에서 반복되는 원리만 입혔다: 파랑빛 색조 바탕 ↔ 흰 밴드 교차(어두운 면은 안내 카드·푸터 2곳), 세리프 디스플레이(h1·h2 3곳), 오버레이 없는 원색 실사진과 큰 둥근 프레임, 알약형 행동 버튼(파랑 채움은 3개 이내), 시맨틱 색을 도트·테두리·틴트로만, 헤어라인·색면으로 띄우는 카드, 칩 → 세리프 h2 → 리드 → 우측 링크의 섹션 헤더 세트.
컬러·표면
바탕·밴드 #1 #7 #9
- v1
#FFFFFF (섹션 교차 #F4F6FA)- v2
- 히어로 밴드 #F2F5FD · 페이지 #F4F6FA · 흰 밴드 교차, 어두운 면은 안내 인셋 카드 + 푸터
- 왜
- 밝은 색조 2종 + 어두운 밴드 1~2곳의 리듬이 10개 중 7개.
헤드라인 잉크 #1
- v1
#0E1320 (중립 검정)- v2
- h1·h2·큰 숫자만 #0B1440, 본문은 #0E1320 유지
- 왜
- 단일 색상군 — 잉크까지 브랜드 색으로 묶되 본문 가독은 유지.
보조 텍스트 #2 #3
- v1
#79839B (캡션·날짜)- v2
- #57617A 로 통일 (흰 바탕 6.2:1)
- 왜
- #79839B 는 흰 바탕 3.8:1 로 본문 AA 미달 — 반증 검토가 잡아냄.
행동 버튼 #1 #4 #7
- v1
#152484 · 8px 모서리- v2
- 전부 알약형 · 파랑 채움은 페이지당 3개 이내(헤더·히어로 온라인 입당 + 예비 1) · 나머지는 1px #152484 아웃라인
- 왜
- 행동색 1개만 채움에, 보조 행동은 아웃라인 — 알약형 CTA 가 10개 중 6개.
컨트롤 경계 #10
- v1
#D6DCE8 (1.4:1)- v2
- select·인풋 #7484BC (3.6:1), 텍스트 라벨 탭은 #D6DCE8 허용
- 왜
- 비텍스트 경계 3:1 — 반증 검토에서 범위를 select·인풋·아웃라인 버튼으로 확정.
시맨틱 색 #4 #10 #7
- v1
배지 글자에 초록·주황- v2
- 글자는 잉크, 시맨틱은 8px 도트 + 1px 테두리 + 4px 좌측 바 + 배경 틴트에만
- 왜
- #2B8A3E·#D9480F 는 흰 바탕 4.3~4.4:1 로 14px 텍스트 AA 미달.
모서리 #1 #8 #9
- v1
4 / 8 / 12px- v2
- 4 / 8 / 12 / 20px + pill — 20 은 히어로 사진·안내 카드 2곳만
- 왜
- 반경이 요소 크기에 비례해 커지는 규칙, 칩·버튼만 pill.
그림자 #4 #10 #8 #6
- v1
3단계, 카드 hover 그림자- v2
- 퀵타일(float)·캡션 카드(soft) 2곳만. 카드 hover 는 테두리 색만 바뀜
- 왜
- 그림자 대신 헤어라인·색면으로 띄우고, hover 로 두께가 생기지 않게.
타이포
| 역할 | v1 | v2 | 출처 |
|---|---|---|---|
| 히어로 디스플레이 | IBM Plex Sans KR 700 · 34~44px | Noto Serif KR 600 · 48 / 40 / 32px (3단) · 1.2 · -0.015em · keep-all | #1 #3 #9 |
| 섹션 제목 | Plex Sans 700 · 26px · 밑줄 2px | Noto Serif KR 600 · 28px(모바일 24) · 밑줄 없음 · 위에 아이브로 칩 | #9 #1 #7 |
| 아이브로 칩 | 없음 | 13px 500 · #E4E9FA 위 #152484 · 알약 28px · 건수는 Mono | #1 #9 #3 |
| 카드 제목·본문 | Plex Sans 16~19px | 카드 제목 20/600 · 리스트 15/500 · 본문 16 / 1.65 — 세리프는 h1·h2·안내 카드 제목까지만 | #2 #8 |
| 숫자 | Plex Mono 21px | Plex Mono tabular · 건수 28px(안내 카드) · 메타 13px · 단위는 작고 연하게 | #8 #2 #7 |
여백 리듬
| 자리 | v1 | v2 | 출처 |
|---|---|---|---|
| 섹션 세로 여백 | 64px | 80px (모바일 48px) | #1 #9 |
| 히어로 | 전폭 진남색 + 사진 겹침, 64/80px 안쪽 | #F2F5FD 밴드 · 5:7 2열 · 거터 48 · 상 56 / 하 40 · 최소 높이 520 · 사진 3:2 반경 20 | #7 #5 #1 |
| 퀵타일 | -44px 겹침, 거터 1px | 겹침 없음 · 같은 밴드 안 6열 · 거터 12 · 높이 96 · 안쪽 20 | #1 #7 |
| 뉴스룸 | 2×2 블록, 거터 40/48 | 780 + 24 + 396 · 행 높이 ≥56 · 행 안쪽 12 24 · 사이드 행 ≥48 | #10 #9 |
| 카드 안쪽 | 16px | 24px (지역위 카드) · 정책 셀 24 · 안내 카드 48(모바일 24) | #9 #8 |
| 그리드 간격 | 16px | 지역위 24 · 사진 12(모바일 8) · 퀵타일 12 | #5 #6 |
섹션별 — 어디서 무엇을
| 섹션 | 가져온 원리 | 출처 |
|---|---|---|
| 헤더 | 흰 바탕 + 하단 헤어라인, GNB 15px 400 에 활성 2px 바, 오른쪽에 텍스트 → 아웃라인 → 채움 3단 위계(검색 · 지역위원회 찾기 · 온라인 입당). 투명 헤더·캡슐 내비는 배제. | #8 #5 #2 |
| 히어로 | 좌 텍스트 / 우 원색 사진(3:2, 반경 20) 2열 분리 — 사진 위에 글을 올리지 않고 캡션만 흰 카드로 사진 가장자리에. 아이브로 칩 → 세리프 h1 → 리드 → CTA 2 → 구 선택 폼(심사위원 접목안, 출처 없음). v1 의 사진·문구·CTA 링크는 그대로. | #7 #5 #1 #2 #9 |
| 퀵타일 6 | 히어로와 같은 밴드 안 흰 부상 카드 한 줄(그림자는 여기와 캡션 카드뿐). 아이콘 원형 + 라벨 + 실측 건수(지역위 8곳 · 서식 6종 · 공지 135건 · 정책 9분야). | #1 #5 #8 #7 |
| 공고 띠 | 전폭 단일 정보 띠 — 좌 4px 바 + 도트 배지(글자는 잉크) + 가장 임박한 공고 1건 + 기간 + 전체 보기. 접수 중이 없으면 최신 공지를 파랑 띠로(v1 규칙). | #10 #4 #1 #8 |
| 소식 뉴스룸 | 메인 780(세그먼트 탭 전체/보도자료/논평 + 보도자료·논평 병합 헤어라인 리스트 7행) + 사이드 396(공지 5행 카드 · 활동 4행 썸네일 카드). 사진 있는 보도자료 1건은 특집 카드로. | #10 #9 #5 #8 #4 |
| 지역위원회 8 | 구 탭 알약(활성 채움) + 4열 흰 카드(무테두리, hover 색만): 구 배지·번호 → 이름 → 라벨/값 2단(국회의원·위원장·관할·주소) → 전화(Mono, 44px) + 원형 자세히(36 + 히트 44). 히어로 폼과 #ju-local 로 연결. | #9 #10 #6 #7 #8 |
| 정책 9 | 카드 9장 → 3×3 헤어라인 리스트(번호·선 아이콘 → 이름 20/600 → 설명 2줄). 표본 상태라 "정책 n건"은 숨기고 0건만 "준비 중". | #1 #9 #10 #6 |
| 사진 5 | 벽돌형 그리드(큰 1 + 소 2×2, 소는 16:10) · 캡션은 카드 안 고정 높이 77 · 오버레이 없이 원색 · 하단 "사진 전체 보기 218" 아웃라인 버튼. | #6 #7 #3 #5 |
| 시당 안내 | 흰 밴드 안 #0B1440 인셋 카드(반경 20, 우상단 파랑 글로우 1개): 세리프 제목 + 오시는 길·카카오맵 링크 + 당원 안내 링크 리스트 / 연락처 stat 2×2 + 등록 건수 4셀(보도자료 203 · 논평 188 · 공지 135 · 사진 218). 지도 임베드 자리 없음. | #9 #2 #1 #3 #6 #10 |
| 푸터 | v1 푸터(#0B1440) 그대로 — 안내 카드가 흰 밴드 안에 있어 어두운 면이 연속되지 않는다. | #7 #9 #5 |
하지 않은 것
- 사진 위에 헤드라인·본문을 올리지 않는다. 오버레이·그라데이션·틴트·비율 늘리기 없음. 사진 위 텍스트는 히어로 흰 캡션 카드 1곳뿐.
- 어두운 면은 시당 안내 인셋 카드 + 푸터 2곳만. 전면 다크 금지, 다크 위 텍스트는 #FFFFFF / #E4E9FA / #C3CCF2 만.
- 파랑 채움 버튼은 페이지당 3개 이내. 시맨틱 색은 텍스트·버튼·면에 쓰지 않는다.
- 명조는 h1·h2·안내 카드 제목까지만, 20px 이하·이탤릭 금지. 서브페이지 645장은 v1 그대로.
- 후기·평점·파트너 로고·성과 %·아바타 스택처럼 실데이터가 없는 장치는 만들지 않는다. 건수·기준일은 전부 데이터 파일 값.
- 겹침 장치 없음(v1 의 퀵타일 -44px 제거). 그림자는 2곳, hover 로 테두리 두께가 변하지 않는다.
- 신규 그래픽 금지 — 일러스트·3D·목업·아이콘 세트, 회전 타일, 워터마크 워드마크, 캐러셀. 지도 임베드 대신 외부 링크.
스펙에서 벗어난 것과 이유
| 무엇 | 왜 |
|---|---|
| 지역위 카드에 국회의원 이름 표기 | 스펙은 memberName 미노출을 권했지만 v1 이 이미 실데이터로 표기하고 있고 선거구별 국회의원은 확정 정보다. 위원장은 v1 과 같이 "확인 중". |
| 사진 5장을 보도자료 evergreen 사진에서 | 스펙은 활동(포토갤러리) 최신 5개를 권했지만, v1 메인·미디어 화면과 같은 선정 기준을 유지해 화면 간 사진이 어긋나지 않게 했다. |
| 접수 중 공고 0건이면 최신 공지를 파랑 띠로 | 스펙은 미렌더를 권했지만 v1 이 "시당이 알리는 공지"로 대체 노출한다. 수집 시점(2026-09-13)에 접수 중 공고가 0건이라 실제로 이 상태가 보인다. |
| 소식 메인 리스트 위에 특집 카드 1장 | 스펙의 메인 780 은 헤어라인 리스트만이지만, 사진 있는 보도자료 1건을 카드로 두면 소식 영역에 실사진이 한 장 들어온다(#5·#7 의 카드 원리). |
심사 기록
어떻게 골랐고 어떻게 심사했나
dribbble.com/search/homepage(및 home page) 인기순 결과 128건을 실제 브라우저에서 읽음 → 최근 2년 내 게시(shot id ≥ 24,000,000) → 좋아요 순 상위 10 (스튜디오당 최대 2개 — 걸린 항목 없음). 시안당 이미지·영상 프레임 최대 12장을 렌즈 3개(구조·표면·타이포)가 직접 읽고, 아트디렉터가 keep / adapt / reject 판정 — 렌즈 30 + 판정 10.
114/ 150
시민 신뢰형 — 기록의 품위
공공기관의 신뢰감 + 편집 디자인의 품위
117/ 150
지면형 뉴스룸
기자·당원이 매일 오는 정보 밀도, 신문사 사이트의 절제
104/ 150
할 일 먼저 — 서비스형
시민이 할 일(입당·지역위 찾기·서식·문의)이 먼저
심사. 심사위원 3인(브랜드·신뢰 / 레퍼런스 충실도 / 구현·사용성) × 5기준(톤 유지·충실도·실현성·차별성·명확함) 각 10점 = 방향당 150점 만점
결과. 합산은 뉴스룸 117 · 시민 신뢰형 114 · 서비스형 104 로 근소했다. 최종 스펙은 시민 신뢰형을 골격으로 두고 심사위원 접목안 7건(히어로 구 선택 폼, 파랑 채움 버튼 3개 한도, 소식 780+396 뉴스룸과 세그먼트 탭, 당원 안내 링크, 근거 띠 분산, 섹션 리드, 정책 설명 2줄)을 흡수한 절충안이다. (워크플로가 승자 이름을 방향 객체와 맞추지 못해 1번 방향으로 떨어진 것을 확인했고, 접목으로 뉴스룸의 핵심이 들어갔으므로 그대로 채택했다)
반증. 반증 검토 2회 — 1차 지적 17건(critical/major 9) → r2 수정, 2차 지적 13건(major 2 · minor 11) → r3 수정. 3차 검토는 하지 않았다. 마지막 지적은 사진 그리드 행높이 계산, 컨트롤 경계 대비 3:1 범위, 터치 44px 개별 규격, GNB 개수(8→7 정정) 등이며 전부 r3 에 반영됐다. (에이전트 51 · 55분 · 도구 호출 334)
02 레퍼런스
상위 10 시안 — 시안별로 가져온 것
좋아요·조회수는 2026-09-13 수집 시점의 목록 표기값입니다. 게시일이 "추정"인 것은 영상 업로드일이 없어 shot id 로 어림한 값입니다. 제목을 누르면 Dribbble 원문이 새 창에서 열립니다.
-
세리프 제목 + 밴드 리듬 + 겹침 카드로 '격식 있는 여백'
KEEP · 그대로
- 어두운 전면 밴드는 1곳(+푸터)만, 나머지는 밝은 색조 2종(#FFFFFF / #F4F6FA) 교차로 섹션을 구분하는 밴드 리듬 → 메인 전체 섹션 순서(히어로 진남색 → 퀵타일/소식 흰 → 지역위 #F4F6FA → 정책…
- 사진 하단 가장자리에 흰 카드 열이 겹쳐 올라타는 구조(겹침 ≈ 60px, 카드 거터 12px, 흰 채움·반경 12·아주 약한 그림자) → 퀵타일 6(히어로 하단 -44px 겹침 → -60px로 키우고 거터 12px). 768p…
- pill 버튼 2단 위계(주 = 진한 채움 / 보조 = 연한 채움) + 오른쪽 원형 아이콘 슬롯, 나란히 배치·간격 8px → 히어로 CTA: '온라인 입당'(--kj-brand-800 채움·흰 글자) / '우리 동…
- 섹션 헤더 세트의 고정 순서: 작은 eyebrow 칩(아이콘+라벨 12px) → h2 → 1줄 설명 → CTA 링크 → 소식 4블록·지역위 8·정책 9·사진 4·시당 안내 각 섹션 상단(칩 배경 --kj-br…
ADAPT · 바꿔서
- 세리프 헤드라인 + 산세리프 본문의 '서체 계열 대비' 위계(굵기 대비 대신) → 제약 7의 1종 한도로 Noto Serif KR 추가. 원본은 Regular 400 단일이지만 한글 명조는 저대비라 500~600으로 올리고 색은 --kj-brand-900 #0B1440. 적용 범위는 메인 h1(히어로 문구)·섹션…
- 히어로 직하 '신뢰 메타 바'(좌 수치·우 문구+CTA, 높이 56px, 아래 1px 헤어라인) → 아바타 스택·'10,000+ Happy employees' 같은 사회적 증거는 실데이터가 없어 제거. 대신 접수 중 공고 띠를 같은 형태로: 왼쪽 IBM Plex Mono '접수 중 공고 n건'(빌드 시 실측) + 오른쪽 가장 임박…
- 큰 숫자 타일(숫자 상단·캡션 하단 양끝 정렬, 거터 12px, 브랜드 틴트 면) + 옆 대형 실사진 → '77%' 같은 성과 지표는 없음 → 콘텐츠 실측 건수(보도자료 203·논평 188·공지 135·사진 218)만 빌드 시 데이터에서 산출. 숫자는 IBM Plex Mono 48~56px #0B1440, 단위 '건'은 40% 크기…
REJECT · 안 가져옴
- 민트·라임·진초록 팔레트 및 라임 대면적 밴드(곡선 아치 상단 에지)
- 기능 3종 + 손·폰 앱 목업 다크 밴드, 앱스토어 배지
- 아바타 4개 겹침 스택 + '10,000+ Happy employees' + 'Trusted by leading companies' 사회적 증거 띠
-
굵기 대신 크기·톤 위계, 사진 위 유리 패널 하나로 히어로 정리
KEEP · 그대로
- 히어로 요소를 좌·우·하단 3개 정렬선에 맞추는 규칙(문구·출처 캡션·퀵타일 좌변 / 검색·패널 우변 / 캡션·패널 하단 기준선 동일) → 히어로
- '라벨 위(작고 회색) / 값 아래(크고 잉크)' 2단 페어 + 2열 그리드 12px 거터. 라벨은 #57617A(#79839B는 흰 바탕 AA 경계라 배제), 값 16px 500, 숫자·전화는 IBM Plex Mono → 시당 안내(주소·대표전화·팩스·이메일 stat), 지역위 8 카드(관할·주소·전화)
- 큰 숫자 + 작은 단위 격하 표기(예: Mono 26~28px 600 '203' + 14px #57617A '건'). 실측 건수(공지 135·보도자료 203·논평 188·사진 218)만 사용 → 소식 4블록 헤더
- 그라데이션은 UI에 넣지 않고 사진 가독용 페이드 1곳만, 버튼·카드·배지는 전부 단색 플랫 + 드롭섀도 최소 → 히어로(좌측 페이드만), 퀵타일·소식 4블록·정책 9 카드(플랫 유지)
ADAPT · 바꿔서
- 헤드라인 3행 스택 + 가운데 행 톤 다운으로 위계(굵기 아닌 크기·톤) → '오월에서 시작해, / 광주의 / 내일로' 3행, 메인 한정 h1 48~56px 300~400, 행간 1.0→1.15~1.2(한글 받침), -0.022em 유지. 투명도 50% 대신 어두운 진남 영역 위에서 --kj-brand-20…
- 좌상 헤드라인 ↔ 우하 실용 패널의 대각선 구성 + 사진 위 반투명 다크 카드 → 예약 카드 → '접수 중 공고' 카드 1장(제목 20px 600 2행, 접수기간 칩 캘린더 선 아이콘+Plex Mono 날짜, 마감임박 #D9480F 배지, 흰 버튼 '자세히'). backdrop-blur 대신 --kj-brand-…
- 사진과 바탕을 한 색군으로 묶는 단일 색조 히어로 + 흰 알파 2단계 잉크 → 청록 안개 → 우리 진남 #0B1440. 사진(5·18 참배 실사진)에 전면 다크 오버레이 대신 좌측 선형 페이드(#0B1440 70%→0%)와 틴트 40% 이하만. 인물·묘지 부분은 원색 유지, 부제는 흰 72% 또는 #C3CCF2
REJECT · 안 가져옴
- 안개 낀 숲 사진과 창문 불빛(청록 바탕 + 주황 온색 보색 포인트) 연출, 프레임 밖까지 이어지는 풀블리드 사진 바탕
- 화면 전체를 감싸는 64px 라운드 흰 반투명 목업 프레임
- 평점 4.7 + 'from 1,800+ stays' 스탯, 별점 노랑 아이콘
-
사진 중앙 비운 히어로 + 좌라벨-우콘텐츠 축 + 밝은 띠로 숨 고르기
KEEP · 그대로
- 히어로에서 헤드라인(좌하)과 설명+CTA 패널(우하)을 분리해 사진 중앙을 비우는 배치 원리. 하단 그라디언트(약 40% 높이)와 반투명 단색 판(블러 없음)만으로 가독을 확보하고 사진 상단은 그대로 노출 → 히어로
- 섹션 공통 헤더의 좌라벨-우콘텐츠 축: 왼쪽 좁은 열에 소형 라벨+숫자, 오른쪽에 h2와 콘텐츠. 숫자는 시안의 장식 인덱스 대신 실측 건수(보도자료 203, 지역위 8 등)를 IBM Plex Mono로 표기 → 지역위 8, 정책 9, 사진(소식 4블록은 라벨을 상단 한 줄로 접는 변형)
- 밝은 밴드를 '낮은 띠'로 짧게 넣어 스크롤 리듬을 만드는 완급 원리(FAQ 띠 약 200~260px). 접수 중 공고 띠를 72~96px 낮은 밝은 경고 띠로 유지하고 섹션 패딩 64 기본/어두운 밴드만 80 → 공고 띠, 그리고 밴드 색조 교차 전체(소식 4블록~시당 안내)
- CTA 시각 무게 위계: 실제 채움 버튼은 소수(히어로 2개·온라인 입당 퀵타일)에만, 섹션별 '전체 보기'는 텍스트 링크로 낮춤. 색은 배경·밴드·사진이 담당하고 UI 컨트롤은 무채색에 가깝게 → 히어로 CTA, 퀵타일, 소식 4블록·지역위·정책·사진의 '전체 보기' 링크
ADAPT · 바꿔서
- 검정+오렌지 방사형 글로우로 사진 없이 '빛'을 만드는 어두운 밴드 → 오렌지→파랑으로 치환: #0B1440 바탕에 radial-gradient(#1D33A8 → #0B1440), 텍스트 영역 쪽은 #0B1440 순색 유지. 어두운 밴드는 히어로·푸터 외 최대 1곳(시당 안내)만 추가하며 다크 3연속…
- 세리프(말하는 문장)/산세리프(정보) 2서체 역할 분리, 굵기 대신 서체·크기로 위계 → 디돈 세리프 400 대신 Noto Serif KR 500~600 1종만 추가하고 히어로 문구 1곳(44~52px/1.25/-0.02em, 2줄 고정) + 사진 섹션 리드 1문장으로 사용처 제한. 행간 1.0은 한글에 불가 → 1.2…
- 소형 대문자·넓은 자간 아이브로 라벨(11px, +0.1em, 낮은 대비) → 한글은 대문자가 없으므로 IBM Plex Mono 12px, letter-spacing +0.06~0.08em, 색 #57617A(AA 확보; #79839B는 12px 이하 금지)로 대체. 영문·숫자(날짜 2025.11.25, 건수…
REJECT · 안 가져옴
- 다크 우선 바탕(#060202 약 55~60%)과 다크 4연속 밴드 구조
- 오렌지레드(#E92404) 계열 강조 팔레트 및 사진 색을 오렌지 단색·흑백으로 종속시키는 처리
- 세리프 이탤릭 괄호 버튼 '(enter to haven)' 반전 박스, '(menu)' 이탤릭 텍스트 메뉴
-
강조색 역할 분리와 섹션 헤더 1행 패턴, 공고 카드 상태 3중 표현
KEEP · 그대로
- 강조색 역할 분리: 행동색 1개(채움 버튼)만 CTA에, 정보색은 숫자·날짜·건수 텍스트에, 보조 행동은 아웃라인 버튼에. 채움 버튼은 페이지당 3~4개로 제한 → 히어로(CTA 2개: '온라인 입당' #152484 채움 / '우리 동네 지역위원회 찾기…
- 섹션 헤더 1행 패턴: 좌 h2 + 인라인 '전체보기 →' 텍스트 링크(밑줄 없음), 우측에 세그먼트 토글 또는 캐러셀 화살표. 같은 베이스라인 양끝 정렬, 모바일은 2행 스택 → 소식 4블록(각 블록 헤더 '보도자료 · 전체보기 →') · 지역위 8(우측 구 탭 pi…
- 세그먼트 탭: 1px 헤어라인 pill 컨테이너 + 활성 탭만 채움(#152484 + 흰 텍스트), 비활성 #57617A, 포커스 #0079C2 2px → 지역위 8의 구 탭 · 소식 4블록 탭 전환(적용 시)
- 공고 카드 상태 3중 표현: 상태 배지(점+텍스트 병기) + 상태별 버튼 종류(접수중=채움 / 마감=아웃라인 '내용 보기') + 하단 D-day 소형 캡션(Mono). 공고 1~2건이면 기존 띠 형태 유지 분기 → 접수 중 공고 띠(3건 이상일 때 카드 3열로 확장) · 소식 4블록 공지 리스트 배지
ADAPT · 바꿔서
- 풀블리드 실사진 + 한쪽 방향 선형 페이드로 텍스트 영역 확보(좌 30~40% 텍스트 / 우 사진) → 다크 전면 대신 히어로 1곳(#0B1440)에만. 5·18민주묘지 참배 사진 object-fit:cover, linear-gradient(90deg, #0B1440 0%, rgba(11,20,64,.85) 30%, transpare…
- 큰 숫자 + 작은 단위 접미 패턴('$25,000 USD' + 'in total prizes') → 상금 대신 실측 건수로 치환: Plex Mono 22px '203' + Plex Sans KR 13px '건'. 숫자는 h2(26px)보다 작게 유지해 위계 역전 방지. 빌드 시 데이터 파일에서 집계(하드코딩 금지). 시당 안내 s…
- 소셜 프루프 한 줄 띠(아바타 스택 + 'Join 34,031 others') → 아바타 스택·참여자 수는 인물 사진 없음·실데이터 아님으로 제거. 대신 실측 콘텐츠 건수 띠 '보도자료 203 · 논평 188 · 공지 135 · 사진 218'을 Plex Mono, 높이 40px, #57617A 한 줄로. 숫자는…
REJECT · 안 가져옴
- 다크 전면 단일 테마(#000102 바탕 + 보라 #201559 카드 표면)
- 네온 그린(#5CF59B 추정) CTA + 보라 방사형 글로우·빛줄기 그라디언트
- 히어로 3D 일러스트(하단 2/3 전폭), 3D 스쿼클 타일, 하단 CTA 3D 오브젝트 산개, Challenges 3D 원근 캐러셀
-
UI는 파랑+무채색만, 색은 실사진이 맡는 절제형 그리드
KEEP · 그대로
- 섹션 헤더 한 줄 패턴: 좌 h2(26px 700) / 우 필터 탭 + '전체보기' 링크, 같은 베이스라인 → 소식 4블록·지역위 8·정책 9 섹션 헤더
- UI 유채색을 브랜드 1색군+무채색으로 억제하고, 색은 실사진(히어로·사진 4·활동 사진)이 담당 → 메인 전체(소식 4블록·지역위 카드·정책 카드는 파랑+잉크만, 시맨틱 색은 공고 띠·배지…
- 정보 행 '좌 명칭 / 우 값(Mono)' 양끝 정렬 + 1px 헤어라인으로 행 구분, 카드 테두리·그림자 없음 → 소식 4블록 미니 리스트 5행(제목 좌 / 날짜 우 Plex Mono #79839B, 행…
- 활성 탭은 색 변화 없이 밑줄 2px 하나로 표시(+굵기 600, aria-selected) → 지역위 8의 구 탭, 소식 4블록 상단 탭, 헤더 GNB 활성 항목
ADAPT · 바꿔서
- '배너(그룹 헤더) + 바로 아래 소형 카드 4열'을 12~16px 간격만으로 묶는 구성 → 사진 섹션을 보도자료 현장사진 1장 리드 배너(1200×~420, object-fit cover) + 아래 사진 카드 3~4장(제목·날짜 Mono)으로. 시안의 밝은 하늘 위 흰 텍스트 대신 캡션을 사진 아래 흰 띠로 내리는 안을…
- 히어로: 텍스트를 사진 위가 아니라 브랜드색 평면 위에 두고 사진은 오버레이 없이 옆에 둠 → 누끼 인물 사진(시안 고유 연출)은 쓰지 않고, 좌 900 단색 패널(문구 44~48px/1.15 700 2줄 + 부제 30자 이내 + CTA 2개 + 출처 캡션) / 우 5·18 참배 실사진 원본 비율(3:2) 무오버레이로 분할.…
- 버튼 2종 체계: 어두운 채움(주) / 흰 채움(어두운 바탕용) → 흑백 대신 brand-800 #152484 채움+흰 글자(주), 다크 밴드 위에서는 흰 채움+800 글자+1px #C3CCF2 테두리. 하드 오프셋 그림자는 제거하고 라운드 4 적용
REJECT · 안 가져옴
- 히어로 브랜드색 평면 위 인물 누끼(배경 제거) 사진 + 인물 위에 흰 대문자 헤드라인 겹침
- 흰 버튼의 블러 없는 하드 오프셋 그림자(스티커 느낌)
- 다크 밴드 뒤 초대형 워터마크 워드마크('STREET')
-
사진은 살리고 글자 뒤만 어둡게, 강조색은 소량으로
KEEP · 그대로
- 풀블리드 실사진 위에 사진이 보이는 정도의 부분 오버레이 + 흰 헤드라인 (사진 밴드 원리) → 히어로
- '강조색은 아이덴티티·가장자리에만, CTA는 명도 대비로' 원리 → 히어로
- 굵기 대비 대신 '크기 + 명도 2단'으로 만드는 섹션 헤더 위계 (제목 흰/진 + 서브 회색) → 소식 4블록, 지역위 8, 정책 9
- 1px 저대비 rim으로 카드·사진 경계를 잡고 드롭섀도를 거의 쓰지 않는 표면 언어 → 지역위 8, 사진, 정책 9
ADAPT · 바꿔서
- 히어로 '2행 헤드라인 → 1행 서브 → pill CTA' 수직 스택과 큰 크기 대비 → 영문 6~7배 배율은 한글 어절 길이상 불가(타이포 렌즈 koreanAdaptation). 중앙 정렬이 아니라 현재 왼쪽 컬럼 유지. 히어로 전용 display 사이즈 44~48px/1.15~1.25/-0.022em 700(h1 3…
- 어두운 밴드 안에 '흰 카드·사진 모자이크'를 놓아 카드로 명암 리듬을 만드는 방식 → 시안은 다크 5:밝음 1로 다크 전면(제약 6 위반). 우리는 어두운 밴드를 히어로 + 시당 안내 2곳으로 제한. 시당 안내를 #0B1440 밴드로 두고 안에 흰 카드(라운드 12, 패딩 32)로 주소·대표전화·팩스·이메일 stat…
- 사진 모자이크: 높이 다른 사진을 벽돌형 그리드, 작은 라운드·좁은 간격, 오버레이 없이 원본 색 노출 → 시안 3열 masonry(간격 8, 라운드 12) → 우리는 '1큰장(2행 span) + 3작은 장' 벽돌형 그리드, radius 8, gap 8, object-fit: cover(늘리기 금지). 제목·날짜는 사진 위 오버레이가 아…
REJECT · 안 가져옴
- 다크 전면 테마(#060403 순흑 바탕 약 70%)와 흰 밴드 1회 삽입 구조
- 히어로 주변에 ±15~45° 회전한 정사각 사진 타일 흩뿌림(bleed 포함)과 중앙 타일이 다음 섹션으로 확장되는 전환
- 기울인 폰 목업·폰 프레임 안 사진, 계단식(staggered) 헤드라인 사이에 끼우는 연출
-
밴드 교차 리듬과 절제된 카드, 3단 섹션 헤더
KEEP · 그대로
- 히어로 하단 걸침 카드 원리(카드가 히어로 바닥 경계를 겹쳐 올라와 히어로와 본문을 잇는 패턴) → 퀵타일(현재 -44px 겹침 그대로 유지)
- 회백 밴드 ↔ 흰 섹션 교차 + 짙은 밴드는 중간 1곳·끝(푸터) 1곳만 두는 명암 리듬 → 페이지 전체 밴드 순서(소식=회백 #F4F6FA → 지역위=흰 → 정책=회백 → 사진=흰…
- 카드 언어의 절제: 작은 라운드·1px hairline·그림자 최소(호버 시 1단계), 회백 바탕 위 흰 카드는 테두리 없이, 흰 바탕 위에서는 hairline → 지역위 8 카드·정책 9 카드·사진 4 카드·소식 4블록 공통
- 주 강조 파랑 1색 = 행동(버튼·활성 탭·링크)에만, 보조색은 보더·아이콘 타일·배지 배경에만 쓰는 역할 분리 → 헤더 CTA·히어로 CTA·지역위 구 탭·소식 블록 링크 / 공고 띠·접수중 배지
ADAPT · 바꿔서
- 섹션 헤더 3단 공식(작은 라벨 → h2 → 짧은 강조선) → 시안은 중앙 정렬 + '//' 글리프 + 곡선 스와시. 우리는 좌정렬로 통일하고, 라벨은 IBM Plex Mono 12px(예: '보도자료 · 203건', 실측 데이터 파일에서만), h2 26px 700, 강조선은 곡선이 아닌 --…
- 히어로 텍스트 스택(좌 45% 텍스트 : 우 55% 사진, 대형 헤드라인 → 서브카피 → CTA, 요소 간 24/40 간격) → 누끼 인물·플로팅 스탯 카드·파란 별 배지는 버림. 좌우 분할과 간격 리듬만 가져와 '오월에서 시작해, 광주의 내일로'를 히어로 한정 40~44px/1.25/-0.02em 700, 2줄(max-width로 의미 단위 줄바꿈, 마침표…
- 사진 가장자리에 걸친 흰 플로팅 카드(약한 그림자 1개) → 수치 카드가 아니라 '사진 출처·촬영일 2024-01-02·보도자료 링크' 캡션 카드로 용도 변경. 사진 좌하단/우하단 여백에 배치해 인물을 가리지 않게, 그림자 1단계만, 4px 라운드 --kj-brand-800 작은 타일에 CS…
REJECT · 안 가져옴
- 누끼 인물 컷아웃 히어로 + 사진 위 '93% Success Rates' 스탯 카드·파란 정사각 별 아이콘 배지
- '1.5M · 87% · 364+' 식 성과·약어 수치와 별점·수강생 수·가격 메타
- 후기(testimonial) 캐러셀 섹션과 원형 아바타 인용 카드
-
크기로 만드는 위계와 3단 버튼·라벨-값 정리법
KEEP · 그대로
- 헤더 우측 3단 위계(텍스트 링크 → 외곽선 → 채움 버튼) 클러스터 → 헤더 — GNB 7 오른쪽에 '검색'(텍스트/아이콘) → '우리 동네 지역위원회'(외곽선…
- 히어로 텍스트 블록의 '헤드라인 → 리드 → CTA 쌍' 3단 순서와 일정한 세로 리듬 → 히어로 — 문구 '오월에서 시작해, 광주의 내일로' 아래 리드 1–2줄(16–18px…
- 라벨 회색 Regular / 값 검정 Semibold의 톤 대비로 마이크로 정보 정리 → 지역위 8 카드(구 라벨·위원장(확인 중)·관할·주소·전화)와 시당 안내 stat(주소…
- 한 숫자 안의 톤 분절(정수 굵게·단위/보조부 연하게) → 소식 4블록 헤더 메타('보도자료 203건' 등 실측 건수), 정책 9 카드 '정책 n건…
ADAPT · 바꿔서
- 디스플레이 헤드라인 크기 위계(리드 대비 4.5~5배, 행간 1.05, 굵기 500, 중앙 정렬) → 굵기 500·중앙 정렬·72–80px는 버리고 원리만: 히어로 전용 display 토큰 44–52px / 1.15 / -0.02em / 600, 2줄 고정(word-break: keep-all, '오월에서 시작해, / 광주의 내일로…
- 지표 카드 3단 구조(제목+상태 배지 / 큰 숫자+작은 보조 / 얇은 진행바) → 예산 분수('45.00 / 100.00')·도넛·라인차트는 버리고, '접수 중 공고 띠'를 alert 한 줄 대신 최대 3행 카드 행으로: 좌 공고 제목 + 우 상태 배지(접수중 #2B8A3E on #E9F5EC / 마감임박 #D9…
- 채움 톤 칩(선 아이콘+라벨, 라운드 6–8)을 필터와 강조 태그로 겸용 → 파스텔 블루·로즈 2색 대신 파랑 계열 1군만: 구 탭(동·서·남·북·광산)은 pill 칩(비활성 흰+#D6DCE8 선, 활성 #E4E9FA+800 글자). 소식 종류 배지는 같은 규격(높이 28–32). 시맨틱 배지(접수중·마감임…
REJECT · 안 가져옴
- 헤드라인 문장 안 인라인 지갑·동전 라인 일러스트
- 중앙 폰 목업 + 좌우 위성 UI 카드 군집(도넛 차트, 칩, 스탯 행 오프셋 겹침)
- 파스텔 라벤더-블루 / 더스티 로즈 2색 틴트 팔레트와 검정 단일 솔리드 강조
-
파랑은 점으로, 위계는 서체 대비로, 구획은 헤어라인으로
KEEP · 그대로
- 섹션 제목 행을 '좌 h2 + 우 보조 정보(건수·전체보기)' 한 줄로 두어 제목 블록 높이를 일정하게(약 40px) 맞추는 원리 → 소식 4블록·지역위 8·정책 9·사진 섹션 헤더. 좌 h2 26px, 우측에 IBM Pl…
- 4열 등분 텍스트 카드 구조(이름 → 톤 낮춘 부가정보 → 본문 2~3줄 → 우하단 원형 화살표), 이미지 없이 성립 → 우리 동네 지역위원회 8카드(4열×2행, 거터 24, 패딩 24, 라운드 8, 흰 표면…
- 강조색을 넓은 면이 아니라 점 단위(아이콘·배지·수치)에만 쓰는 '2톤 골격 + 소량 유채' 배분 → 소식 4블록 배지·첨부 아이콘·건수 숫자(Mono), 정책 9 카드의 선 아이콘 색만 #…
- '칩만 pill, 면은 작은 반경' 이원 라운드 규칙과 비인터랙티브 아이브로 칩(1px 아웃라인 pill) → 배지·태그·보조 CTA는 pill, 카드·사진·퀵타일은 4~8px. 각 섹션 상단 칩(1…
ADAPT · 바꿔서
- 2서체 대비 위계(세리프 디스플레이 vs 산세리프 본문) → 시안은 300급 라이트 세리프·행간 1.05~1.15. 우리는 Google Fonts 한글 1종 Noto Serif KR 400 한 굵기만 로드(font-display: swap, 폴백 'Nanum Myeongjo', serif)하…
- 히어로 텍스트 스택: 아이브로 pill → 헤드라인 → 짧은 서브 → 바닥선에 걸친 요소 → 시안은 중앙 정렬·사진 없음·분자 그래픽. 우리는 좌정렬 실사진 히어로(5·18민주묘지 참배)를 유지하고 텍스트 열 내부 순서만 가져옴: 아웃라인 pill '더불어민주당 광주광역시당'(1px #C3CCF2, 높이 40) → h1 →…
- 어두운 밴드 연속 덩어리 + 밴드 안 한 단계 밝은 인셋 카드(그림자 없이 명도 차) → 시안은 차콜 밴드 3~4개 연속. 우리는 제약 6에 맞춰 어두운 구간을 히어로와 하단 안내 밴드 2곳으로 한정. '시당 안내(주소·대표전화·팩스·이메일 stat + 지도 자리)'를 #0B1440 밴드로, 내부 stat 카드 또는 C…
REJECT · 안 가져옴
- 라임→그린→틸→블루 '분자 그라데이션' 3D 렌더와 플래시 타일
- 크림/아이보리 바탕 + 차콜 잉크의 검정·크림 2톤 팔레트 자체
- 다크 밴드 3~4개 연속(팀·자문·가치·CTA)으로 페이지 중반 전체를 어둡게 하는 리듬
-
흰 바탕·1px 선 카드와 '라벨 위/값 아래' 메타 셀로 조용한 정보 위계
KEEP · 그대로
- 섹션 헤더 통일 규격: 좌 h2 / 우 '전체 보기 n건' 링크(화살표 동반), 헤더→콘텐츠 24px, 섹션 간 일정 리듬 → 소식 4블록·지역위 8·정책 9·사진 4 섹션 헤더 전체
- 상태를 아이콘+색 텍스트로 이중 표기(마감임박 시계+텍스트, 접수중 체크+텍스트), 라벨은 회색 고정·값에만 시맨틱 색 → 공고 띠 및 소식 4블록 미니 리스트의 배지·마감 셀
- '브랜드색 = 링크·활성, 시맨틱색 = 상태' 역할 분리. 배지·상태 텍스트에 파랑 계열 미사용 → 공고 띠·소식 4블록 배지, 지역위/정책 카드 링크
- 메타 정보를 '라벨(작게·회색) 위 / 값(크게·잉크) 아래' 2줄 셀로 열 정렬해 표 없이 표처럼 읽히게 → 지역위 8 카드(관할·주소·전화·위원장 '확인 중'), 공고 띠 행(접수기간·문의)
ADAPT · 바꿔서
- 전폭 단일 공지 밴드(배지 + 제목 1행 / 설명 + 텍스트 링크 2행, 틴트 바탕, 라운드 8) → 현재 경고색 alert 띠를 '접수중' pill(#2B8A3E, bg #E9F5EC) + 공고 제목 600 + 접수기간 인라인 600(Plex Mono) + '공고 보기 →' 잉크색 밑줄 링크 구조로. 바탕 #E9F5EC 또는 #F…
- 인사 헤더의 '좌 텍스트 / 우 stat 타일' 2열 + 숫자 위·라벨 아래 스탯 타일 → 인사말·이모지·개인화는 제거(로그인 없음, 공식 톤). 타일 형식만: 아이콘(원형 #EDF0F7, 파랑 1색 선 아이콘) + 값 IBM Plex Mono 24px 600 + 단위 '건' Plex Sans KR 14px 400 + 라…
- 리스트 행 카드: 썸네일 | 유형 라벨 → 제목 1줄 말줄임 | 메타 열 | 우측 액션 → 보도자료·활동 블록에 원문 실사진 썸네일 112×80(object-fit cover, 왜곡 없음, 라운드 8)로 적용. 사진 없는 논평·공지 행은 아이콘 원형 48로 대체해 열 정렬 유지. 우측 아웃라인 버튼 대신 '원문' #2B4…
REJECT · 안 가져옴
- 전면 순백 단일 평면(밴드 색조 교차 없음)
- 인사말형 개인화('Good morning, 이름 👋')와 이모지, 메시지·알림 아이콘·아바타·이름/직책 계정 영역
- 파스텔 단색 배경의 플랫 일러스트 썸네일(라벤더·피치)
수집 방법. dribbble.com/search/homepage(및 home page) 인기순 결과 128건을 실제 브라우저에서 읽었습니다. "지금 반응 좋은" 조건으로 최근 2년 내 게시(shot id ≥ 24,000,000)만 남기고 좋아요 순으로 10개를 골랐습니다. 같은 스튜디오는 2개까지로 제한했는데 걸린 항목은 없습니다. 10번(Trenning)은 로그인 후 대시보드형 홈이라 공개 사이트에 맞는 부분(행 목록·통계 타일·알림 띠)만 가져왔습니다.