← 포트폴리오로 돌아가기 알마로꼬 Project · Designer Project

공룡동산

국립광주과학관 상설전시 · 화면설계서

작업기간

2024. 8. 5 ~ 2024. 11. 11

Tool

Photoshop, Illustrator, Zeplin

본인 기여도

100%

산출물

키오스크 UI, 패널디자인, 배경그래픽

공룡동산 프로젝트 개요 - 공룡백과사전 키비주얼

디자인 시스템

톤앤 매너
이전 특별 전시와 연결되는 무드, 전시되는 곳의 특성에 맞춤. 공룡 모형 전시에 맞는 배경과 어울리는 UI 제작.
색채 계획
서식지의 무드인 풀숲을 살리는 화사한 컬러 사용. 주 사용층이 어린이인 점을 고려하여 단순하면서 컬러풀한 컬러감 사용.
Point Color
Base Color
폰트타입
파셜산스 · 태나단체 본문 격동고딕2 · 영문 Acumin Variable Concept
타이틀은 판화 스타일의 서체로 빈티지한 노트 느낌 강조, 본문은 깔끔하고 직각적인 고딕 계열로 정보 전달에 초점, 영문 학명은 명칭표기 특성을 고려해 이탤릭 고딕체 사용.

배경그래픽

Tool: Photoshop, ChatGPT — 화산과 야자수, 공룡이 어우러진 서식지 무드의 대형 배경 그래픽을 제작해 키오스크 존의 실제 벽면 그래픽으로 시공했다.

공룡동산 배경그래픽 - 화산과 야자수, 공룡이 있는 서식지 무드 벽면 그래픽
공룡동산 배경그래픽 실제 전시 공간 설치 사진
Kiosk

공룡백과사전

공룡 탐구(도감) → 공룡 퀴즈(실루엣 맞추기) — 다이노월드 특별전 키오스크 콘텐츠에 대한 호평으로, 내용과 단계를 수정해 상설전시로 재구성

Keyword
미니게임, 백과사전
Design Direction
공룡시대 어린이를 타겟으로 한 게임 모드 구성. 육식 공룡과 초식공룡의 배경을 다르게 하여 확실한 구분과 시각적 재미를 줌.
Visual Elements
유휴화면을 벽 실사와 같은 이미지로 설정, 탐구모드에서 공룡 배치 순서와 패널의 이미지를 일치시켜 아이들이 쉽게 공룡 이름과 특징을 연결 지을 수 있도록 설계.
공룡백과사전 키오스크 대기 화면 - 공룡 탐구, 공룡 퀴즈 모드 선택
대기(유휴) 화면 · 모드 선택

화면설계서 · 전체 플로우

  1. 공룡 탐구 도감 카드 예시 - 코엘로피시스
    ①-1 공룡 탐구
    도감 카드 (왼쪽 선택 시)
  2. 공룡백과사전 키오스크 대기 화면 - 공룡 탐구, 공룡 퀴즈 모드 선택
    ① 대기(유휴) 화면
    모드 선택
  3. 공룡 퀴즈 시작 안내 화면 (버튼 · 팝업 노출 전/후 상태 전환)
    ①-2 공룡 퀴즈
    시작 안내 (오른쪽 선택 시)
  4. 공룡 퀴즈 실루엣 문제 화면 - 스피노사우루스, 안킬로사우루스, 디메트로돈 중 선택 (1/4)
    ② 실루엣
    문제 화면
  5. 오답 시 피드백 팝업 - 다시 한 번 맞춰볼까요
    ②-1 오답
    피드백
  6. 힌트 카드 - 공룡의 특징 텍스트 설명 제공
    ②-2 힌트
    카드
  7. 공룡 퀴즈 정답 확인 카드 - 스피노사우루스 정답 공개
    ③ 정답 확인
    카드
  8. 공룡 퀴즈 실루엣 문제 화면 - 브라키오사우루스, 스테고사우루스, 우에르호사우루스 중 선택 (2/4)
    ④ 다음 문항
    (4문항까지 반복)
  9. 공룡 퀴즈 전체 완료 알림 팝업 - 4문항 모두 맞힘
    ⑤ 퀴즈 전체
    완료

1회 실행 시 총 4문항으로 구성. 오답 시 피드백 팝업을 보여주고, 힌트 버튼으로 정답을 유추할 수 있도록 하여 아이들이 끝까지 몰입할 수 있게 구성. 정답을 확인한 뒤에는 다음 문항의 실루엣 화면으로 이어지며 이 과정을 4문항까지 반복.
탐구모드에서 본 공룡 배치 순서와 패널 이미지를 퀴즈 실루엣에 그대로 연결해 학습 효과를 높임.