전쟁 날까.정정 제보

어디서, 무엇이.
그다음은 근거.

전쟁 날까 디자인 시스템
큰 한글 제목과 보이는 지도에서 사건과 원문으로 이어집니다. 밝은 종이 바탕 위에 글자와 구분선으로 읽는 순서를 만듭니다.

전쟁 날까.시민을 위한 공개자료 브리핑
디자인 v4 · 지리 아틀라스 · 2026.11.03

먼저 읽히는 것

대표 사건과 장소를 함께 읽고, 목록에서 기록의 흐름을 살펴봅니다.

  1. 장소와 사건을 함께. 큰 제목 다음에 검토한 대표 사건을 두고, 곁에 공개된 장소의 지도를 보여 줍니다.
  2. 근거까지 한 번 더. 사건 제목에서 사실·해석·미확인 내용과 원문으로 이어집니다.
  3. 밀도에 차이를. 넓은 도입부 다음에는 먹색 브리핑 띠와 뉴스 행을 놓습니다. 지도는 바로 보고, 분야·그래프·원문 목록은 필요할 때 펼칩니다.
  4. 숫자의 뜻을 곁에. 등록 건수는 전쟁 확률이나 안전 판정이 아닙니다. 0건도 실제 사건이 없다는 뜻이 아닙니다.

색상

종이색과 먹색을 중심으로, 옅은 올리브색은 선택을 표시합니다. 확인 필요와 정정은 문구로 뜻을 함께 전합니다.

종이 바탕#f5f6f2--paper
보조 면·지도#e9ece3--subtle
본문·주요 행동#20241f--ink
보조 글자#62685d--muted
선택 강조#dce68b--accent
강조 위의 글자#31391e--accent-ink
확인 필요#70551c--amber
정정·철회#754a3c--correction

구분선 #cdd2c7 · 강한 구분선 #909888. 사건 유형의 색은 분류를, 지도 점의 선택색은 조작 상태를 알려 줍니다. 위험 단계는 나타내지 않습니다.

글자와 간격

Pretendard를 자체 제공해 외부 글꼴 연결 없이 읽을 수 있게 합니다.

지금,
한반도.첫 화면 제목 · 기본 64–96px / 모바일 60–84px

사건 탐색

주요 영역 제목 · 32–44px, 예시는 36px
사건과 근거를 함께 읽습니다사건 행 제목 · 21–25px / 모바일 21px

공식 발표와 공개 자료에서 확인한 사실을 정리합니다.

기본 본문 · 16px / 줄 높이 1.7
발생 시각과 수집 확인 시각은 다릅니다.보조 정보 · 13px 이상
공통 배치 규칙
간격4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96px
화면 폭최대 1300px. 좌우 여백은 기본 최소 48px, 1150px 이하 최소 32px, 680px 이하 20px.
모서리버튼과 작은 상태 표시 2px. 기록은 평면의 행으로 이어집니다.
긴 글한글은 어절을 유지하며 긴 주소는 넘치지 않게 줄바꿈합니다. 요약 뒤에는 전체 사실과 출처를 읽는 상세 화면이 이어집니다.

버튼과 상태

아래는 디자인 예시입니다. 현재 상황이나 실제 수집 상태를 나타내지 않습니다.

행동의 우선순위

상황판으로 읽는 방법

자료의 확인 상태

발표·보도 확인자료 부족확인 필요정정·철회

‘발표·보도 확인’은 발표 내용 전체의 독립 검증과 다릅니다. 수집 성공을 안전이나 위험 감소로 표현하지 않습니다.

갱신 안내 예시

최근 수집 확인수집 지연

수집 확인 후 2시간 경과 시 지연, 6시간 경과 시 오래된 수집 자료를 표시합니다. 실제 시각은 각 화면에 별도로 표기합니다.

접힌 정보 열기 기본 접힘 상태 예시

상세 정보는 사용자가 필요할 때 펼칩니다. 키보드 Tab으로 이동하고 Enter 또는 Space로 열고 닫을 수 있습니다.

조건에 맞는 기록이 없습니다

필터를 바꾸거나 원문 자료를 확인하세요. 기록이 없다는 것이 실제 사건이 없다는 뜻은 아닙니다.

기록과 출처

분류·시각 → 제목 → 요약 → 해석 → 근거 순서로 읽습니다. 목록 요약은 두 줄, 대표 사건은 세 줄까지 보여 줍니다.

구성요소 예시 · 실제 사건 아님
외교 대응게시일 기준

공식 발표의 핵심 내용을 한 문장으로

발표 기관, 무엇이 바뀌었는지, 아직 확인되지 않은 부분을 짧게 정리합니다. 출처의 추정이나 조건은 요약에서도 유지합니다.

왜 주목하나요

사실과 해석을 분리해 설명합니다. 발표만으로 실제 긴장의 상승·하락을 확정하지 않습니다.

발표·보도 확인원문 기관의 이름근거를 읽는 방법

모바일과 동작

화면 크기에 따라 배치를 바꾸고, 동작 줄이기 설정을 따릅니다.