프로젝트 상담 신청 프로젝트 소개로 건너뛰기

365일 아동의 날 · 국가아동권리보장원RENEWAL PROPOSAL

하루를365일로 잇다

기념일 홈페이지 리뉴얼 제안
365 CALENDAR · HAND IN HAND, 두 가지 방향

케이스 읽기

365일 아동의 날 · CASE STUDY기념일 홈페이지 리뉴얼 제안
스크롤을 내리면 1년 365일이 켜집니다

POINT · 점점 하나가 하루입니다
그 가운데 다섯 날에 이름이 있습니다

LINE · 선다섯 날을 선으로 이으면
5월의 네 날과 11월의 하루가 이어집니다

PLANE · 면면을 채우면 다섯 친구가 됩니다
네모 · 육각형 · 별 · 타원 · 긴 네모

01 / OVERVIEW프로젝트 개요

한 해에 다섯 번,
문을 여는 사이트

「365일 아동의 날」은 보건복지부와 국가아동권리보장원의 기념일 홈페이지입니다. 어린이날과 입양의 날, 가정위탁의 날, 실종아동의 날, 아동학대예방의 날의 뜻과 기념식, 이벤트, 도움 정보를 한곳에 모아 둡니다. 다섯 날에는 저마다 네모 · 육각형 · 별 · 타원 · 긴 네모 모양의 캐릭터가 있고, 캐릭터마다 「365일 함께하는 ○○의 날」이라는 이름표를 달고 있습니다.

블루캔버스는 지금의 기념일 홈페이지를 만든 제작사입니다. 그사이 기념식 인사말과 갤러리, 포상 소식이 해마다 연도 탭으로 쌓였고, 2026년 5월 12일에는 기관 이름이 아동권리보장원에서 국가아동권리보장원으로 바뀌었습니다. 이번에는 지금 화면의 틀을 내려놓고, 처음부터 다시 그린다면 어떤 사이트가 될지 두 가지 시안으로 제안했습니다. 이 페이지는 그 과정을 정리한 기록입니다.

CLIENT
국가아동권리보장원
보건복지부
WEBSITE
dayforchild.ncrc.or.kr
365일 아동의 날
OUR ROLE
지금 사이트 구축, 리뉴얼 리서치,
브랜드 해석, 정보 구조, UI, 모션
DELIVERABLE
메인 시안 2종, 모바일 화면,
컬러 · 서체 · 움직임 기준
  • 5개기념일5월 5일 어린이날부터 11월 19일 아동학대예방의 날까지
  • 4번5월의 기념일가정의 달 한 달 동안 기념일이 네 번 돌아옵니다
  • 35개지금의 하위 메뉴1뎁스 메뉴 일곱 개 아래에 놓인 2뎁스 메뉴
  • 6개갤러리의 연도 탭2021년부터 2026년까지 해마다 쌓인 기록
보건복지부, 국가아동권리보장원, 365일 아동의 날 로고
지금 사이트의 머리 로고입니다. 보건복지부와 국가아동권리보장원, 웃는 탁상 달력을 그린 「365일 아동의 날」이 한 줄에 놓입니다.
02 / CHALLENGE출발점

5.5어린이날8개

  1. 어린이날 이야기
  2. 인사말
  3. 유공자 포상
  4. 그림 전시회
  5. 갤러리
  6. 아동단체 캠페인
  7. 이벤트
  8. 전국행사지도

5.11입양의 날5개

  1. 입양 이야기
  2. 인사말
  3. 상영관
  4. 유공자 포상
  5. 공지사항 및 이벤트

5.22가정위탁의 날6개

  1. 가정위탁 이야기
  2. 상영관
  3. 유공자 포상
  4. 전국 가정위탁지원센터
  5. 이벤트
  6. FAQ

5.25실종아동의 날9개

  1. 실종아동의 날 이야기
  2. 기념사 및 인사말
  3. 온라인 기념식
  4. 실종 관련 제도
  5. 실종 예방·대처방법
  6. 실종아동 정보
  7. FAQ
  8. 이벤트
  9. 공모전 온라인 전시관

11.19아동학대예방의 날7개

  1. 아동학대예방의날 이야기
  2. 인사말
  3. 상영관
  4. 유공자포상
  5. 이벤트
  6. 전국 아동보호전문기관
  7. FAQ
지금 사이트의 2뎁스 메뉴 35개를 날마다 세로로 늘어놓았습니다. 색은 메뉴가 하는 일입니다. 위의 단추를 누르면 같은 일을 하는 메뉴가 어디에 흩어져 있는지 보입니다.
  1. 01
    다섯 날, 다섯 가지 차림

    메뉴 수가 날마다 다섯 개에서 아홉 개까지 다르고, 같은 일을 하는 메뉴도 「인사말」과 「기념사 및 인사말」, 「상영관」과 「온라인 기념식」처럼 이름이 다릅니다. 「공지사항 및 이벤트」는 맨 위 메뉴에도, 입양의 날 메뉴 안에도 있습니다.

  2. 02
    한 번에 한 날만 보이는 첫 화면

    넓은 화면의 첫 화면은 한 번에 한 장씩 넘어가는 전체 화면 다섯 장입니다. 장마다 주소 끝에 #05.05부터 #11.19까지 날짜가 붙지만, 한 날을 보는 동안 나머지 네 날은 화면에 보이지 않습니다.

  3. 03
    해마다 늘어나는 연도 탭

    인사말과 갤러리, 유공자 포상이 해마다 연도 탭으로 쌓이고, 페이지 주소에도 sub3_2_2024 · sub4_4_2025 · sub2026_painting처럼 해가 제각각 붙습니다. 지난 기록을 보려면 날마다 다른 페이지에서 해를 다시 골라야 합니다.

  4. 04
    안쪽에 있는 도움 정보

    아동학대 신고 방법(112와 아이지킴콜 앱)은 아동학대예방의 날 이야기 페이지의 아래쪽에, 실종아동을 발견했을 때 알릴 곳은 실종아동의 날 FAQ에 있습니다. 가장 급한 정보가 기념일 소개 뒤에 놓여 있었습니다.

03 / FIVE DAYS다섯 개의 날

날짜에 이미
이야기가 들어 있습니다

리뉴얼을 시작하기 전에 다섯 날의 뜻을 사이트 문구에서 다시 모았습니다. 날짜를 왜 그날로 정했는지, 며칠 동안 이어지는지, 올해가 몇 번째인지를 정리하자 다섯 날이 달력 위에서 서로 어떻게 놓여 있는지가 보였습니다.

5월2026

날짜 · 주간 · 회차 출처: 국가아동권리보장원 기념일 홈페이지의 날마다 「이야기」와 인사말

  1. 05.05 · 어린이날

    어린이가 씩씩하게 자라도록

    어린이가 옳고 슬기로우며 씩씩하게 자라도록, 어린이의 권리를 존중하는 사회 인식을 높이는 날입니다. 1922년에 처음 선포되었고, 1923년의 「어린이선언」은 1924년 국제연맹의 제네바 아동권리선언보다 1년 넘게 앞섰습니다. 5월 1일부터 7일까지는 어린이주간이고, 2026년은 제104회였습니다.

  2. 05.11 · 입양의 날

    1가정이 1아동을

    가정의 달 5월에 한 가정이 한 아이를 입양해 새로운 가정(1+1)으로 거듭난다는 뜻에서 날짜를 11일로 정했습니다. 그날부터 1주일이 입양주간이고, 2026년은 제21회였습니다. 2025년 7월부터는 입양 절차를 공공이 직접 맡는 공적입양체계로 바뀌었습니다.

  3. 05.22 · 가정위탁의 날

    2가정이 2아이를

    친가정과 위탁가정, 두 가정이 우리 아이와 이웃 아이, 두 아이를 행복한 가정에서 함께 키우자는 뜻에서 날짜를 22일로 정했습니다. 가정위탁은 친부모의 사정으로 친가정에서 자랄 수 없는 아이를 일정 기간 위탁가정이 보호하고 양육하는 제도이고, 2026년 가정위탁의 날은 제23회였습니다.

  4. 05.25 · 실종아동의 날

    함께 찾는 희망

    실종아동에 대한 사회의 책임을 되새기고, 실종을 예방해 안전한 사회를 만들자는 날입니다. 1983년 미국에서 처음 지정되었고, 우리나라는 2007년부터 기념식을 열어 2020년에 법정 기념일로 지정했습니다. 2026년 제20회의 슬로건은 「함께 찾는 희망, 다시 만나는 기적」이었습니다.

  5. 11.19 · 아동학대예방의 날

    모두가 지켜야 할 약속

    아동복지법 제23조에 따라 아동학대 예방과 방지에 관한 관심을 높이는 날이고, 그날부터 1주일이 아동학대예방주간입니다. 다음 날인 11월 20일은 1989년 유엔 총회에서 유엔아동권리협약이 채택된 날입니다. 2026년 11월 19일은 제20회입니다.

  6. OUR READING

    달력이 곧 길잡이입니다

    다섯 날 가운데 네 날이 5월에 모여 있고, 세 날은 1주일짜리 주간을 함께 달고 있습니다. 입양의 날과 가정위탁의 날은 날짜의 숫자에 뜻을 담았습니다. 그래서 두 시안은 날짜를 장식으로 쓰지 않고, 사이트를 돌아다니는 길잡이로 썼습니다.

04 / POINT · LINE · PLANE점 · 선 · 면

다섯 친구는
점과 선과 면으로
그려져 있습니다

다섯 캐릭터를 겹겹이 나눠 보았습니다. 맨 아래에는 날마다 다른 색의 도형이, 그 위에는 같은 먹색으로 그린 팔과 손글씨가, 맨 위에는 같은 모양의 눈과 볼이 놓입니다. 캐릭터는 지금 사이트의 캠페인 그림에서 바탕만 지워 그대로 옮겼습니다.

  1. POINT점같은 눈과 볼

    네 친구는 흰 테두리를 두른 같은 눈을, 긴 네모는 감은 눈을 가졌습니다. 볼은 동그란 노랑이고, 노란 별과 파란 긴 네모만 분홍 볼을 달았습니다.

  2. LINE선같은 먹색의 팔과 글씨

    팔과 손, 머리 위의 손글씨, 다리 윗선은 모두 같은 먹색 #231815로 그렸습니다. 순검정이 아니라 인쇄용 먹(K100)을 화면 색으로 옮겼을 때 나오는 값입니다.

  3. PLANE면날마다 다른 도형과 색

    몸통은 네모 · 육각형 · 별 · 타원 · 긴 네모이고, 날마다 색이 다릅니다. 다섯 친구가 서로 달라 보이는 것은 면 때문이고, 한 가족처럼 보이는 것은 점과 선이 같기 때문입니다.

happy하트를 손에 들고 걸어갑니다

두 시안은 여기서 갈라졌습니다.

  1. 점 = 하루A · 365 CALENDAR

    점 하나를 하루로 읽고, 1년 365일을 점으로 찍은 달력 위에 다섯 날을 올렸습니다.

  2. 선 = 손B · HAND IN HAND

    먹색 팔을 한 줄의 선으로 이어, 어른의 손이 아이의 하루를 잇는다는 이야기로 그렸습니다.

  3. 면 = 날의 얼굴두 시안이 함께 쓰는 것

    다섯 도형과 다섯 쌍의 색은 두 시안이 그대로 나눠 씁니다. 날을 알아보는 얼굴이기 때문입니다.

05 / COLOR컬러

밝은 색은 면으로,
글자는 짙은 짝 색으로

캠페인 그림 다섯 장의 화소를 세어 보니, 날마다 밝은 색 하나가 채색된 부분의 91~93%를 차지하고, 「365일 함께하는」 글자에 쓴 짙은 짝 색이 6~7%를 차지했습니다. 날마다 색이 두 가지씩, 모두 다섯 쌍입니다.

밝은 색은 도형으로는 눈에 잘 띄지만, 흰 바탕의 글자로 쓰면 대비가 1.2~3:1에 그쳐 읽기 어렵습니다. 그래서 글자에는 짙은 짝 색을 쓰고, 4.5:1에 못 미치는 초록과 노랑은 글자용 색을 따로 정했습니다.

  1. 5.5 어린이날
    밝은 색 · 면
    흰 바탕 1.6:1
    짙은 짝 색
    흰 바탕 4.1:1
    흰 바탕 글자
    4.7:1
  2. 5.11 입양의 날
    밝은 색 · 면
    흰 바탕 3.0:1
    짙은 짝 색
    흰 바탕 5.0:1
    흰 바탕 글자
    5.0:1
  3. 5.22 가정위탁의 날
    밝은 색 · 면
    흰 바탕 1.2:1
    짙은 짝 색
    흰 바탕 1.7:1
    흰 바탕 글자
    5.2:1
  4. 5.25 실종아동의 날
    밝은 색 · 면
    흰 바탕 4.4:1
    짙은 짝 색
    흰 바탕 10.0:1
    흰 바탕 글자
    10.0:1
  5. 11.19 아동학대예방의 날
    밝은 색 · 면
    흰 바탕 2.7:1
    짙은 짝 색
    흰 바탕 5.0:1
    흰 바탕 글자
    5.0:1
YELLOW IS A MARKER

노랑은 글자가 아니라
형광펜입니다

가정위탁의 날 노랑(#FFED0A)을 흰 바탕 글자로 쓰면 대비가 1.2:1입니다. 같은 노랑을 글자 밑에 띠로 깔고 먹색 글자를 올리면 14.3:1이 됩니다. 단추를 눌러 두 방법을 바꿔 보세요.

두 가정이 두 아이를
함께 키우는 날

1.2:1흰 바탕 위 노란 글자 · 읽기 어려움

  1. 01밝은 색은 면으로

    다섯 날의 밝은 색은 도형과 바탕, 띠에만 씁니다. 흰 바탕 글자로 쓰면 대비가 1.2~3:1이라 읽기 어렵습니다.

  2. 02글자는 짙은 짝 색으로

    그림 속 「365일 함께하는」의 짙은 색을 글자에 씁니다. 초록과 노랑은 4.5:1에 못 미쳐 글자용 색을 따로 정했습니다.

  3. 03노랑은 형광펜

    노랑 위에는 먹색 글자를 올립니다. 노란 글자 대신 글자 밑에 노란 띠를 깝니다.

  4. 04무거운 날은 낮게

    실종아동의 날과 아동학대예방의 날 구역은 밝은 색을 바탕 전체에 깔지 않고, 옅게 낮춘 색과 남색으로 차분하게 둡니다.

06 / TYPOGRAPHY서체

둥근 제목 글자와
반듯한 본문

캠페인 그림의 「365일 함께하는 ○○의 날」은 굵고 둥근 손글씨에 가까운 글자입니다. 이 글자는 캠페인 그림의 일부로 두고, 기념일의 뜻과 신고 방법처럼 정확하게 읽혀야 하는 글은 두 시안 모두 반듯한 Pretendard로 짰습니다.

그 위에 시안마다 글자 하나씩을 더했습니다. A안은 날짜를 굵은 숫자로 크게 세워 달력처럼 읽히게 했고, B안은 캐릭터 머리 위의 손글씨 단어를 Caveat로 이어 써서 먹색 선과 같은 손맛을 냈습니다.

캠페인 그림의 「365일 함께하는 ○○의 날」 글자. 날마다 밝은 색과 짙은 짝 색 두 가지로 칠했습니다.
Pretendard 800 · 제목 · 두 시안 공통

아동이 행복한 세상

Pretendard 400 · 본문 17px 이상 · 두 시안 공통

아동학대가 의심되면 국번 없이 112에 신고하거나, 「아이지킴콜」 앱을 이용할 수 있습니다. 아동이나 학대행위자의 정보를 다 알지 못해도 신고할 수 있고, 신고한 사람의 신분은 법으로 보장됩니다.

A안 · 굵은 숫자로 세운 날짜

05.0505.1105.2205.2511.19

B안 · Caveat 손글씨 단어

dreamhappytogetherhopesave

  • 17px본문은 휴대폰에서도 16px 아래로 내리지 않습니다.
  • 14px날짜와 라벨, 저작권 표기까지 가장 작은 글자는 14px입니다.
  • 48px단추와 칩, 날짜 칸은 손가락 하나로 누를 수 있게 48px 이상으로 둡니다.
07 / STRUCTURE정보 구조

35개의 메뉴를
다섯 날 × 다섯 갈래로

먼저 이 사이트를 찾는 사람들이 무엇을 하러 오는지 적었습니다. 축하하러 오는 어린이와 보호자도 있지만, 해마다 포스터를 내려받는 담당자와 급하게 신고 방법을 찾는 어른도 같은 사이트에 들어옵니다.

그래서 날마다 메뉴의 순서와 이름을 맞췄습니다. 어느 날에 들어가도 이야기 · 기념식 · 참여 · 도움 · 자료가 같은 자리에 있고, 신고와 기관 찾기는 날을 고르기 전에도 헤더의 단추 하나로 열립니다.

  • 01어린이와 보호자

    어린이날 이벤트와 그림 전시회를 보고, 우리 동네에서 열리는 행사를 찾습니다.

  • 02선생님

    수업에서 쓸 기념일 이야기와 영상, 아동권리 자료를 찾습니다.

  • 03지자체 · 기관 담당자

    해마다 포스터 원본(AI · PNG)과 홍보물 제작 가이드를 내려받습니다.

  • 04현장 종사자와 유공자

    기념식 인사말과 포상 소식을 확인하고, 온라인 기념식을 다시 봅니다.

  • 05실종아동 가족

    실종 관련 제도와 예방 · 대처 방법, 실종아동 정보를 확인합니다.

  • 06신고하려는 어른

    학대가 의심될 때 어디에, 어떻게 알려야 하는지 곧바로 찾아야 합니다.

지금 · 날마다 다른 메뉴 35개제안 · 다섯 날 × 다섯 갈래

도움이 필요할 때 112 · 아이지킴콜 · 기관 찾기

이야기날의 뜻과 발자취

어린이날 이야기
입양 이야기
가정위탁 이야기
실종아동의 날 이야기
아동학대예방의날 이야기

기념식인사말 · 온라인 기념식 · 영상 · 포상

인사말 유공자 포상
인사말 상영관 유공자 포상
상영관 유공자 포상
기념사 및 인사말 온라인 기념식
인사말 상영관 유공자포상

참여이벤트 · 공모전 · 전시 · 갤러리

그림 전시회 갤러리 아동단체 캠페인 이벤트 전국행사지도
공지사항 및 이벤트
이벤트
이벤트 공모전 온라인 전시관
이벤트

도움기관 찾기 · 제도 · 예방 · FAQ

도움이 필요할 때
입양기관 안내
전국 가정위탁지원센터 FAQ
실종 관련 제도 실종 예방·대처방법 실종아동 정보 FAQ
전국 아동보호전문기관 FAQ

자료포스터 · 홍보물 가이드 · 연도별 기록

포스터 · 홍보물 가이드
포스터 · 연도별 기록
포스터 · 연도별 기록
포스터 · 연도별 기록
포스터 · 연도별 기록

회색 테두리 칸은 지금 메뉴에 없던 자리입니다. 포스터와 홍보물 가이드는 어린이날 이야기 페이지 안에 있던 것을 자료로, 입양기관 목록은 입양 이야기 페이지 안에 있던 것을 도움으로 옮겼습니다.

08 / MOTION모션

날마다
다른 속도

같은 사이트 안에 축하하는 날과 기다리는 날, 지키는 날이 함께 있습니다. 그래서 움직임의 원칙을 세 가지로 정했습니다. 앞의 두 가지는 두 시안이 각자 고른 움직임이고, 세 번째는 두 시안이 함께 지키는 약속입니다.

  1. 01

    점이 켜지면 날이 열린다

    A안에서는 달력의 작은 점이 그날의 도형으로 커지며 화면을 채우고, 그 도형이 다음 구역의 바탕이 됩니다. 날짜가 곧 문입니다.

  2. 02

    선은 끊기지 않는다

    B안에서는 먹색 선 한 줄이 구역과 구역 사이를 이어 그리며 내려갑니다. 선이 지나간 자리에 다음 이야기가 놓입니다.

  3. 03

    무거운 날은 천천히

    어린이날의 도형은 통통 튀어도 되지만, 실종아동의 날과 아동학대예방의 날 구역에서는 튀는 움직임을 빼고 천천히 밝아지게 했습니다. 기기에서 「동작 줄이기」를 켜면 큰 움직임은 모두 멈춥니다.

제안 A안 · 점 = 하루

365 CALENDAR하루를 기념하고, 365일을 지킵니다

캠페인 로고가 탁상 달력이라는 데서 출발해, 사이트 전체를 1년 365일을 점으로 찍은 달력으로 다시 그린 방향입니다. 첫 화면에는 12줄의 점 위로 다섯 기념일의 캐릭터가 자기 날짜에 서 있고, 오늘 날짜의 점이 노랗게 켜집니다. 그 아래로 다음 기념일까지 남은 날, 옆으로 넘기는 다섯 장의 날짜 카드, 세 주간이 지나가는 5월 달력, 차분한 11월 19일, 아이 그림 전시, 1922년부터 이어진 연표와 자료실이 이어집니다.

  • 1년 365일을 12줄의 점으로 찍고 다섯 날짜 위에 캐릭터를 세운 첫 화면
  • 오늘 날짜로 다음 기념일까지 남은 날을 계산하는 D-day
  • 날마다 이야기 · 기념식 · 참여 · 도움 · 자료가 같은 자리에 있는 날짜 카드 다섯 장
  • 112를 가장 크게 쓰고 신고자 보호를 함께 적은 11월 19일 구역
Pretendard · 굵은 숫자
시안 A 직접 보기
DIRECTION NOTES

시안 A의 장면 가운데 연출에 공을 들인 순간을 골랐습니다. 사진을 누르면 장면별 화면을 크게 볼 수 있습니다.

  1. 하루를 기념하고, 365일을 지킵니다

    첫 화면입니다. 1년 365일을 12줄의 점으로 찍고, 다섯 기념일의 날짜 위에 캐릭터를 세웠습니다. 오늘 날짜의 점은 노랗게 켜집니다.

  2. 다음 약속까지 D-26

    오늘 날짜로 다음 기념일까지 남은 날을 셉니다. 2026년 10월 24일에는 11월 19일 아동학대예방의 날까지 26일이 남았다고 알려 주고, 지금 할 수 있는 일 세 가지를 붙였습니다.

  3. 다섯 개의 날, 하나의 마음

    화면이 고정된 채 큰 날짜 카드 다섯 장이 옆으로 넘어갑니다. 카드마다 이야기 · 기념식 · 참여 · 도움 · 자료가 같은 자리에 있습니다.

  4. 1가정 + 1아동, 2가정 · 2아이

    입양의 날과 가정위탁의 날 카드는 날짜 숫자에 담긴 뜻을 카드 첫 줄에 풀어 썼습니다.

  5. 5월에는, 더 자주

    2026년 5월 달력 위로 어린이주간 · 입양주간 · 실종아동주간 세 띠가 지나갑니다. 날짜를 누르면 오른쪽 설명이 바뀝니다.

  6. 아이의 작은 신호에 귀 기울여 주세요

    아동학대예방 구역은 옅은 파랑 바탕에서 112를 가장 크게 쓰고, 정보를 다 몰라도 신고할 수 있다는 것과 신고자의 신분이 보장된다는 것을 함께 적었습니다.

  7. 아이의 눈으로 본 매일의 행복

    그림 전시회 구역입니다. 크레파스로 그린 그림 여섯 장을 크게 열어 볼 수 있고, 소식은 날과 해로 골라 봅니다.

  8. 하루에서 시작해, 100년을 이어 온 약속

    1922년 첫 어린이날 선포부터 2026년 국가아동권리보장원까지, 확인된 해만 골라 가로 연표로 이었습니다.

A · 365 CALENDAR흰 종이와 남색 글자, 날마다 한 번씩 켜지는 색

365 CALENDAR점 하나가 하루라면

HAND IN HAND선 하나는 잡은 손입니다

제안 B안 · 선 = 손

HAND IN HAND손을 잡으면, 하루가 365일로 이어집니다

다섯 캐릭터의 팔이 모두 먹색 선으로 그려져 있다는 데서 출발해, 그 선을 한 줄로 이어 어른의 손이 아이의 하루를 잇는다는 이야기로 다시 그린 방향입니다. 첫 화면에서는 선 하나가 고리를 지날 때마다 캐릭터가 하나씩 나타나고, 다섯이 서면 손과 손 사이가 한 줄로 이어집니다. 선은 끊기지 않고 내려가 다섯 친구의 손을 잡고, 연줄과 「1 + 1」 하트, 두 집을 잇는 줄, 불 켜진 창문, 감싸 안는 두 팔을 차례로 그립니다. 그 뒤로 그림 전시회의 빨랫줄과 2026년 타임라인의 축이 되었다가, 푸터에서 작은 하트로 끝납니다.

  • 선이 고리를 지날 때마다 캐릭터가 하나씩 나타나 손을 잡는 첫 화면
  • 선이 연줄 · 「1 + 1」 하트 · 두 집을 잇는 줄 · 창문 · 감싸는 팔을 차례로 그리는 다섯 장면
  • 빨간 경고색 없이 남색 판에 큰 노란 숫자로 적은 112와 아이지킴콜
  • 선이 빨랫줄이 되어 아이 그림을 거는 그림 전시회와 2026년 타임라인
Pretendard · Caveat
시안 B 직접 보기
DIRECTION NOTES

시안 B의 장면 가운데 연출에 공을 들인 순간을 골랐습니다. 사진을 누르면 장면별 화면을 크게 볼 수 있습니다.

  1. 손을 잡으면, 하루가 365일로 이어집니다

    첫 화면입니다. 왼쪽에서 들어온 선이 고리를 지날 때마다 캐릭터가 하나씩 나타나고, 다섯이 서면 손과 손 사이가 한 줄로 이어집니다. 그 위로 제목과 다음 기념일까지 남은 날이 나타납니다.

  2. 5.5 · 하늘로 올라가는 연줄

    어린이날 장면에서 선은 연줄이 되어 노을 하늘의 연까지 올라가고, 끝에 초록 네모 꼬리를 답니다.

  3. 5.11 · 「1 + 1」을 감싸는 하트

    입양의 날에는 날짜에 담긴 1가정 1아동의 뜻대로, 선이 「1」「+」「1」을 그린 뒤 하트로 감쌉니다.

  4. 5.22 · 두 집을 잇는 줄

    가정위탁의 날에는 친가정과 위탁가정, 두 집 사이를 줄로 잇고 그 위에 별 모양의 두 아이를 띄웠습니다.

  5. 5.25 · 불이 켜지는 창문

    실종아동의 날에는 선이 먼 길을 따라와 창문의 테두리와 지붕이 되고, 어둡던 창 사진이 끝에 밝아집니다. 바탕색을 낮추고 움직임도 느리게 했습니다.

  6. 11.19 · 감싸 안는 두 팔

    아동학대예방의 날에는 선이 사진을 아래에서 감싸 안는 두 팔이 됩니다. 이 장면도 색과 속도를 낮췄습니다.

  7. 혼자 고민하지 말고 지금 알려 주세요

    도움 구역은 빨간 경고색 없이 남색 판에 큰 노란 숫자로 112를 두 번 적었습니다. 아동학대가 의심될 때와 실종아동을 발견했을 때입니다.

  8. 빨랫줄에 건 아이 그림

    그림 전시회에서는 선이 빨랫줄이 되고, 아이 그림이 노란 집게로 걸립니다. 마우스로 끌거나 손가락으로 밀어 넘깁니다.

B · HAND IN HAND흰 바탕에 날마다 옅게 깐 색, 먹색 한 줄

09 / PROCESS과정

네 갈래에서
두 방향으로

첫 화면을 무엇으로 시작할지 정하려고 네 방향을 먼저 스케치로 비교했습니다. 두 방향은 시안이 되었고, 나머지 두 방향은 버리지 않고 시안 안의 규칙으로 옮겼습니다.

  1. 01

    365일 달력

    1년 365일을 점으로 찍은 달력 위에 다섯 날을 올리는 방향입니다. 날짜가 곧 길잡이가 됩니다.

    A안 365 CALENDAR로 발전
  2. 02

    손에 손을

    캐릭터의 먹색 팔을 한 줄의 선으로 이어, 어른의 손이 아이의 하루를 잇는다는 이야기로 그리는 방향입니다.

    B안 HAND IN HAND로 발전
  3. 03

    다섯 개의 방

    날마다 색이 다른 방을 하나씩 두는 방향입니다. 날마다 차림이 달라지는 지금의 문제를 되풀이할 수 있어, 방 대신 날마다의 색 테마로 남겼습니다.

    날마다의 색 테마로 옮김
  4. 04

    도움 먼저

    첫 화면을 신고와 기관 찾기로 시작하는 방향입니다. 기념일을 함께 축하하는 사이트의 성격이 흐려져, 첫 화면 대신 모든 화면의 「도움이 필요할 때」 단추로 옮겼습니다.

    헤더의 도움 단추로 옮김
  1. 01지금 사이트 다시 읽기

    메뉴 35개와 첫 화면의 다섯 장, 연도 탭과 주소 규칙, 도움 정보의 위치를 정리했습니다.

  2. 02다섯 날 정리

    날마다의 뜻과 주간, 법 근거, 올해의 회차와 슬로건을 사이트 문구에서 모았습니다.

  3. 03캐릭터 해석

    다섯 캐릭터를 점 · 선 · 면으로 나눠 보고, 무엇이 같고 무엇이 다른지 살폈습니다.

  4. 04색과 대비

    캠페인 그림에서 다섯 쌍의 색을 재고, 흰 바탕 글자로 쓸 수 있는 색을 따로 정했습니다.

  5. 05정보 구조

    방문자 여섯 부류가 찾는 것을 적고, 메뉴를 다섯 날 × 다섯 갈래로 다시 묶었습니다.

  6. 06네 갈래 스케치

    달력 · 손 · 방 · 도움 먼저, 네 방향을 첫 화면 스케치로 비교했습니다.

  7. 07두 가지 시안

    두 방향을 실제로 스크롤할 수 있는 메인 페이지로 만들고, 사진은 아이 얼굴 대신 손과 뒷모습, 아이 그림으로 새로 준비했습니다.

  8. 08모바일과 정리

    390px 화면에서 장면을 다시 짜고, 컬러 · 서체 · 움직임 기준을 정리했습니다.

그래서 정한
네 가지

두 시안은 첫 화면과 움직임이 다르지만, 아래 네 가지는 똑같이 지킵니다. 어느 시안을 고르더라도 사이트를 운영하는 방식은 같아야 했기 때문입니다.

  1. 01다섯 날을 같은 틀로

    날마다 이야기 · 기념식 · 참여 · 도움 · 자료를 같은 순서, 같은 이름으로 둡니다. 어느 날에 들어가도 같은 자리에서 같은 것을 찾을 수 있습니다.

  2. 02도움은 언제나 한 번에

    아동학대 신고(112 · 아이지킴콜)와 실종아동을 발견했을 때 알릴 곳, 기관 찾기는 어느 화면에서든 헤더의 단추 하나로 엽니다.

  3. 03밝은 색은 면으로

    다섯 날의 밝은 색은 도형과 바탕에만 쓰고, 글자는 짙은 짝 색이나 먹색으로 씁니다. 노랑은 글자가 아니라 형광펜입니다.

  4. 04해마다의 기록은 한 서랍에

    인사말과 갤러리, 포상 소식은 날마다 흩어진 연도 탭 대신 자료실 한곳에서 날과 해를 골라 봅니다.

아이 얼굴 대신
손과 뒷모습을

아동을 다루는 사이트라 사진 한 장에도 기준이 필요했습니다. 두 시안의 사진에는 아이의 얼굴이 나오지 않습니다. 어른과 아이가 맞잡은 손, 멀리서 본 뒷모습, 불 켜진 창문과 아이가 그린 그림으로 장면을 채웠고, 사진 안에는 글자와 상표를 넣지 않았습니다.

A · 공원에서 맞잡은 어른과 아이의 손
A · 공원에서 맞잡은 어른과 아이의 손
A · 5월 잔디 위의 작은 운동화와 노란 풍선
A · 5월 잔디 위의 작은 운동화와 노란 풍선
A · 크레파스로 그린 우리 집
A · 크레파스로 그린 우리 집
B · 노을 하늘로 올라가는 연
B · 노을 하늘로 올라가는 연
B · 해 질 녘 불 켜진 창문과 현관
B · 해 질 녘 불 켜진 창문과 현관
B · 우산 하나를 함께 쓴 두 아이 그림
B · 우산 하나를 함께 쓴 두 아이 그림
10 / MOBILE모바일

주머니 속의
365일

기념일 소식은 문자와 메신저, 학교 알림장으로 전해지는 일이 많아 첫 방문이 휴대폰에서 시작될 때가 많습니다. 두 시안 모두 390px 화면에서 장면을 다시 짰고, 「도움이 필요할 때」는 휴대폰에서도 화면 맨 위에서 한 번에 열리게 했습니다.

시안 A · 첫 화면 모바일 화면
A · 첫 화면
시안 B · 손을 잡으면 모바일 화면
B · 손을 잡으면
시안 A · 날짜 카드 모바일 화면
A · 날짜 카드
시안 B · 다섯 친구 모바일 화면
B · 다섯 친구
시안 A · 5월의 달력 모바일 화면
A · 5월의 달력
시안 B · 두 집을 잇는 줄 모바일 화면
B · 두 집을 잇는 줄
시안 A · 11월 19일 모바일 화면
A · 11월 19일
시안 B · 도움이 필요할 때 모바일 화면
B · 도움이 필요할 때
COMPARE두 방향은 어떻게 다를까요

같은 다섯 날을 여는
점과 선

두 시안은 같은 다섯 날과 같은 색을 다루지만, 첫 화면에서 먼저 건네는 말이 다릅니다. A안은 1년 달력을 펼쳐 놓고 다음 기념일까지 남은 날을 알려 주고, B안은 다섯 친구의 손을 이어 어른이 할 일을 먼저 이야기합니다. 국가아동권리보장원이 이 사이트에서 가장 먼저 건네고 싶은 말에 따라 고를 수 있도록 차이를 정리했습니다.

구분A · 365 CALENDARB · HAND IN HAND
첫 화면1년 365일을 12줄의 점으로 찍은 달력 위에 선 다섯 친구선 하나가 고리를 지날 때마다 나타나 손을 잡는 다섯 친구
첫 문장하루를 기념하고, 365일을 지킵니다손을 잡으면, 하루가 365일로 이어집니다
캐릭터에서 가져온 것점 = 하루(눈과 볼의 동그라미)선 = 손(먹색 팔과 손글씨)
색흰 종이와 남색 글자, 날마다 한 번씩 켜지는 색흰 바탕과 날마다 옅게 깐 색 띠, 먹색 한 줄
서체Pretendard와 굵은 숫자Pretendard와 Caveat 손글씨
다섯 날을 보여 주는 방식옆으로 넘기는 날짜 카드 다섯 장과 5월 달력날마다 화면에 고정되는 다섯 장면과 선이 그리는 그림
도움 정보11월 19일 구역의 큰 112와 헤더의 도움 단추남색 판의 112 두 개와 헤더의 도움 단추
움직임점이 켜지고 도형이 커지는 달력끊기지 않고 이어 그려지는 한 줄의 선
무게를 둔 곳다음 기념일까지 남은 날과 1년의 흐름어른이 지금 할 수 있는 일과 서로의 손
11 / CREDITS365 · BLUECANVAS WORKS 2026

365일 아동의 날 RENEWAL PROPOSAL

하루를
365일로 잇다

국가아동권리보장원 기념일 홈페이지 리뉴얼 제안 · 365 CALENDAR · HAND IN HAND

  1. Client국가아동권리보장원 · 보건복지부
  2. Website365일 아동의 날 · 기념일 홈페이지
  3. Project리뉴얼 제안 · 2026년 10월
  4. Research메뉴 35개, 첫 화면 다섯 장, 연도 탭, 도움 정보의 위치
  5. Brand Reading다섯 캐릭터의 점 · 선 · 면
  6. Color다섯 쌍의 색과 글자용 색, 먹색 #231815
  7. Structure다섯 날 × 다섯 갈래, 「도움이 필요할 때」
  8. Direction A365 CALENDAR · 점으로 찍은 1년 달력
  9. Direction BHAND IN HAND · 한 줄의 선으로 잇는 손
  10. Mobile390px 화면 장면 재구성
  11. TypefacesPretendard · Caveat(B안 손글씨)
  12. Studio블루캔버스

    Contact

    막연한 아이디어도 괜찮습니다.
    프로젝트를 함께 정리해 보세요

    현재 상황과 목표를 남겨 주시면 가능한 작업 범위와 진행 방식, 예상 견적을 정리해 안내드립니다.

    질문 4개 · 약 2분

    작업 범위

    어떤 작업을 함께 하면 좋을까요?

    여러 개 선택할 수 있습니다. 아직 정하지 못했다면 ‘기타’를 눌러 주세요.

    예산

    생각하시는 예산 범위는 어느 정도인가요?

    범위만 알려주셔도 제안 구성에 큰 도움이 됩니다.

    프로젝트 설명

    어떤 상황인지 들려주세요.

    다듬어지지 않아도 괜찮습니다. 아래 항목을 누르면 작성 틀이 채워집니다.

    0

    RFP, 참고 문서 등을 최대 2개까지 업로드할 수 있습니다. 지원 형식: PDF, PPT, Word, Excel, JPG, PNG, ZIP

    연락처

    어디로 회신드릴까요?

    작업 범위 · 예산 · 프로젝트 설명 · 연락처를 채워 주세요.