첫 화면이
한 문장으로 말하게
지금의 메인 화면에서는 팝업과 슬라이드 배너가 먼저 보입니다. 처음 온 사람이 교육원이 무엇을 하는 곳인지 한 문장으로 알 수 있도록, 첫 화면의 역할을 다시 정했습니다.
교육원을 소개하는 한 문장을 첫 화면에
KOREAN EDUCATION CENTER IN MALAYSIA · WEBSITE RENEWAL PROPOSAL
말레이시아 한국교육원 홈페이지 리뉴얼 제안
천지인 · 코럴 저니, 두 가지 방향
말레이시아 한국교육원은 대한민국 교육부가 2020년 12월 30일 쿠알라룸푸르에 세운 재외교육기관입니다. 말레이시아에 사는 누구나 들을 수 있는 한국어 강좌를 열고, 한국어를 가르치는 중등학교와 주말 한글학교를 지원하며, 정부초청장학생(GKS)을 비롯한 한국 유학을 안내합니다.
지금의 홈페이지를 만든 블루캔버스는 첫 화면부터 다시 설계하는 두 가지 방향을 제안했습니다. 한글을 만든 세 획의 원리로 두 나라를 잇는 「천지인」과, 사람과 사람이 가까워지는 장면을 따라가는 「코럴 저니」입니다. 이 페이지는 두 시안이 나오기까지 고민한 내용과 과정을 정리한 기록입니다.
교육원이 닿는 범위를 숫자로 먼저 정리했습니다.
교육원이 문을 연 해
2020년 12월 30일 교육기관 등록
정규 한국어반이 있는 중등학교
65개 반에서 약 1,500명이 배웁니다
교육원이 지원하는 한글학교
페낭에서 코타키나발루까지
쿠알라룸푸르에서 서울까지
두 도시 사이의 직선거리
숫자 출처: 말레이시아 한국교육원 홈페이지(2026년 10월 확인). 중등학교 수치는 홈페이지에 안내된 2021년 4월 기준입니다.
한국어를 한 글자도 모르는 사람에게, 교육원의 홈페이지는 어떤 첫인사를 건네야 할까요?
답은 교육원이 가르치는 글자 안에 있었습니다.
공지와 강좌 안내, 채택학교와 한글학교, 유학 정보까지 교육원이 알려야 할 내용은 이미 홈페이지에 있었습니다. 처음 찾아온 사람의 눈으로 메인 화면을 다시 읽으며, 첫 화면부터 강좌 신청까지 이어지는 순서를 세 가지로 정리했습니다.
지금의 메인 화면에서는 팝업과 슬라이드 배너가 먼저 보입니다. 처음 온 사람이 교육원이 무엇을 하는 곳인지 한 문장으로 알 수 있도록, 첫 화면의 역할을 다시 정했습니다.
교육원을 소개하는 한 문장을 첫 화면에한국어를 배우려는 방문자에게 가장 중요한 강좌 신청은 메뉴의 두 번째 단계에 있습니다. 두 시안 모두 헤더와 첫 화면, 강좌 소개의 끝에 같은 이름의 버튼을 두었습니다.
어느 화면에서든 「강좌 신청」 한 번중등학교 11곳과 한글학교 8곳, 한국 유학까지 교육원의 일은 말레이시아 곳곳에 닿아 있습니다. 메인 화면에서 카드 세 장으로만 소개되던 이 범위를 숫자와 지도, 여정으로 보여 주기로 했습니다.
숫자 · 지도 · 4,600km 여정교육원 홈페이지에는 한국어를 처음 배우려는 시민부터 한국어 교사, 유학을 준비하는 학생, 재외동포 가족까지 서로 다른 이유로 사람들이 찾아옵니다. 방문자를 찾아온 이유로 나누고, 저마다 가장 먼저 봐야 할 화면을 정했습니다.
Is the class free?
When does it start?시안에서는 헤더의 강좌 신청과 1~6단계 계단
교재와 연수 소식은
어디서 볼 수 있나요?
시안에서는 교육원이 하는 일 카드와 공지 목록
GKS 장학금은
어떻게 준비하나요?
시안에서는 쿠알라룸푸르에서 서울까지의 여정
우리 동네에도
한글학교가 있을까요?
시안에서는 말레이시아 지도 위의 한글학교
교육원이 하는 모든 일은 한글에서 시작합니다. 그래서 브랜드의 언어도 한글이 만들어진 원리에서 찾았습니다. 한글의 모음은 하늘을 본뜬 점(·)과 땅을 본뜬 가로획(ㅡ), 사람을 본뜬 세로획(ㅣ)으로 만들어졌습니다.
훈민정음은 하늘과 땅과 사람을 본떠 모음의 기본 획을 만들었습니다. 한글을 배우는 사람이 처음 만나는 모음도 모두 이 세 획에서 나옵니다.
세 획을 어디에 놓느냐에 따라 ㅏ, ㅓ, ㅗ, ㅜ가 되고, 자음과 만나 글자가 됩니다. 한 사람의 첫 수업이 학교와 지역으로 넓어지고 다시 한국 유학으로 이어지는 교육원의 일과 닮았습니다.
땅을 본뜬 가로획을 길게 늘이면 쿠알라룸푸르와 서울을 잇는 수평선이 됩니다. 천지인 시안은 이 장면을 첫 화면의 모션 필름으로 만들었고, 코럴 저니 시안은 「한글에서 시작되는 새로운 세계」라는 첫 문장으로 받았습니다.
한글로 잇고,
배움으로 가까워집니다.
Connected by Hangeul, closer through learning.
한국어를 모르는 방문자도 교육원이 무엇을 하는 곳인지 알 수 있도록, 첫 화면의 문장을 짧게 줄이고 영어 자막을 함께 둡니다.
가장 중요한 행동인 강좌 신청을 헤더와 첫 화면, 강좌 소개의 끝에 같은 이름으로 둡니다.
쿠알라룸푸르와 서울, 붕아 라야와 무궁화, 「Apa khabar」와 「안녕하세요」처럼 두 나라가 함께 나오는 장면으로 교류를 말합니다.
깊은 밤하늘 위에 금빛 획을 그어 한글이 만들어진 원리부터 보여 줍니다. 한국어를 가르치는 기관이라는 정체성을 가장 먼저 전합니다.
함께 공부하는 사람들의 장면에서 시작해, 첫인사와 첫 문장을 지나 한국 유학으로 이어지는 여정을 따라갑니다.
천지인 시안은 쿠알라룸푸르의 밤하늘 같은 네이비 위에 획을 비추는 골드를 썼습니다. 코럴 저니 시안은 한지의 아이보리 위에 두 나라의 국화에서 가져온 코럴과 열대의 잎을 닮은 짙은 초록을 놓았습니다.

말레이시아의 국화 붕아 라야(Bunga Raya)와 한국의 국화 무궁화는 모두 무궁화속(Hibiscus)에 속합니다. 붕아 라야의 붉은 꽃잎과 무궁화 가운데의 붉은 단심처럼, 두 꽃이 함께 가진 붉은빛을 코럴로 옮겼습니다.
천지인 시안은 이 이야기를 교육원 소개 옆에 사진으로 담았습니다. 두 나라를 잇는다는 문장을 색과 사진에서도 한 번 더 말하기 위해서입니다.
첫 화면과 대부분의 장면을 받치는 바탕입니다. 금빛 획이 가장 또렷하게 보이는 깊이로 골랐습니다.
카드와 지도처럼 바탕 위에 한 겹 올라오는 면에 씁니다.
필름의 획과 강좌 신청 버튼, 지금 위치를 알리는 표시에만 씁니다.
골드가 넓게 번질 때 쓰는 보조색입니다. 지도의 경로와 숫자 단위에 씁니다.
어두운 바탕 위의 글자색입니다. 순백보다 따뜻해서 금빛과 잘 어울립니다.
기본 바탕입니다. 사진과 카드가 그 위에 놓입니다.
글자와 가로로 흐르는 이야기 구간의 바탕에 씁니다. 검정보다 부드럽게 읽힙니다.
붕아 라야와 무궁화의 붉은빛입니다. 제목의 마지막 말과 다음 행동을 부르는 자리에 씁니다.
인사말 띠와 첫 번째 이야기 카드처럼 차분한 면에 씁니다.
사람들의 장면을 담은 카드처럼 따뜻한 면에 씁니다.
두 시안은 같은 디자인 토큰에서 출발했습니다. 바탕과 글자, 강조색의 자리를 먼저 정해 두었기 때문에 팔레트만 바꾸면 같은 카드가 다른 표정을 갖습니다. 아래 버튼으로 강좌 안내 카드의 팔레트를 바꿔 보세요.
surface바탕ink글자accent강조soft보조 면말레이시아에 사는 사람이라면 누구나 신청할 수 있습니다. 교재비와 행정 비용만 본인이 부담합니다.
두 시안 모두 한국어와 영어가 고르게 읽히는 Pretendard 한 가족으로 정리했습니다. 같은 글꼴이라도 굵기와 자간, 강조하는 방식을 다르게 정해 밤과 낮의 목소리를 만들었습니다. 인사말 띠에는 한국어와 말레이어, 영어를 함께 놓았습니다.
한국을 배우고,
한글로 소통해요
교육원의 슬로건을 굵은 제목으로 세웠습니다. 금빛 획이 지나가는 화면 위에서도 흔들리지 않도록 굵기와 크기를 넉넉하게 잡았습니다.
한글에서
시작되는
새로운 세계.
자간을 좁힌 큰 제목으로 사진과 대등하게 맞서고, 마지막 말만 코럴로 바꿔 문장의 끝을 강조합니다.
둥근 점(·)은
하늘을 본떴습니다.The round dot represents heaven.
천지인 필름의 자막은 한국어 아래에 영어를 함께 붙였습니다. 한국어를 배우기 시작한 말레이시아 방문자도 같은 장면을 따라갈 수 있습니다.
천지인 시안의 첫 화면은 스크롤에 맞춰 재생되는 18초 길이의 모션 필름입니다. 점 하나가 수평선을 긋고, 세 획이 모여 「한글」이 되고, 그 획이 쿠알라룸푸르의 트윈타워와 서울의 남산을 그린 뒤 두 도시를 하나의 선으로 잇습니다.
실시간 3D 대신 미리 렌더링한 프레임을 스크롤 위치에 맞춰 그립니다. 휴대폰에서는 세로 화면용 프레임을 따로 불러오고, 같은 장면을 영상으로도 만들어 「영상으로 보기」 버튼으로 재생합니다.
01점 하나 · 하늘
02수평선 · 땅
03세로획 · 사람
04모음
05한글
06두 도시스크롤하지 않아도 처음부터 끝까지 볼 수 있도록 18초 영상으로 렌더링했습니다. 가로 화면용과 세로 화면용을 함께 준비해 기기에 맞는 영상을 엽니다.
같은 교육원 자료와 같은 정보에서 출발했지만, 무엇을 먼저 보여 주느냐에 따라 홈페이지의 성격은 크게 달라집니다. 한글의 원리를 앞세운 천지인과, 사람과 만남을 앞세운 코럴 저니를 메인 페이지 끝까지 완성했습니다.
아래 화면은 실제로 제작한 시안을 녹화한 것입니다. 장면 이름을 누르면 그 구간으로 이동하고, 휴대폰 화면도 같은 장면을 따라갑니다.
한글을 만든 세 획의 원리로 교육원을 소개하는 방향입니다. 스크롤에 맞춰 재생되는 모션 필름으로 시작해, 교육원이 하는 일과 말레이시아 곳곳의 한글학교, 쿠알라룸푸르에서 서울까지의 유학 여정, 1단계부터 6단계까지의 강좌를 차례로 보여 줍니다.
공개용 녹화에서는 교육원 행사 사진을 비슷한 장면의 이미지로 바꾸고 연락처를 가렸습니다.
함께 배우는 사람들의 장면으로 교육원을 소개하는 방향입니다. 아치 모양의 사진이 스크롤에 따라 화면 가득 펼쳐지며 「배움으로, 더 가까이」라는 문장을 보여 주고, 첫인사와 첫 한국어, 가로로 이어지는 교류와 유학 이야기, 최근 소식으로 이어집니다.
공개용 녹화에서는 교육원 행사 사진을 비슷한 장면의 이미지로 바꾸고 연락처를 가렸습니다.
두 시안은 같은 내용을 담고 있지만 이야기를 꺼내는 순서와 분위기가 다릅니다. 교육원이 첫 화면에서 가장 먼저 전하고 싶은 말이 무엇인지에 따라 고를 수 있도록 차이를 정리했습니다.
교육원의 일은 지금의 홈페이지에서 표와 목록으로 정리되어 있었습니다. 시안에서는 그 내용을 지도와 여정, 계단 같은 장면으로 바꾸었습니다. 아래 장면은 시안의 구성을 이 페이지에 맞게 다시 만든 것입니다.
교육원이 지원하는 한글학교 여덟 곳은 페낭과 세렘반, 조호바루를 지나 보르네오섬의 쿠칭과 코타키나발루까지 이어집니다. 스크롤을 내리면 교육원에서 각 도시로 선이 이어집니다.
말레이시아 정부가 한국어를 제2외국어로 도입했습니다.
중등학교 두 곳에서 첫 한국어 수업이 열렸습니다.
교원양성대학에 현지인 한국어교원 양성과정이 생겼습니다.
말레이시아 한국교육원이 교육기관 등록을 마쳤습니다.
중등학교 열한 곳에서 한국어 수업이 이어지고 있습니다.
출처: 말레이시아 한국교육원 홈페이지의 주요업무 · 중등한국어 채택학교 · 주말한글학교 안내(2026년 10월 확인). 중등학교 수치는 2021년 4월 기준입니다.
정부초청장학생(GKS)은 대한민국 교육부 국립국제교육원이 주관하는 장학 프로그램입니다. 장학생은 한국에서 1년 동안 한국어 연수를 마친 뒤 학위 과정을 시작합니다.
교육원이 여는 GKS 설명회와 한국유학박람회에서 대학과 전공 정보를 얻습니다.
교육원은 정부초청장학생 프로그램의 홍보와 선발 과정을 지원합니다.
학위 과정을 시작하기 전에 한국의 대학에서 1년 동안 한국어를 배웁니다.
학사는 4년, 석사는 2년, 박사는 3년 동안 공부합니다.
장학생은 왕복 항공권과 월 생활비(학부 90만 원, 대학원 100만 원), 의료보험료와 정착지원금을 받습니다.
출처: 말레이시아 한국교육원 홈페이지 정부초청장학생(GKS) 안내(2026년 10월 확인)
교육원의 한국어 강좌는 말레이시아에 사는 누구나 신청할 수 있습니다. 천지인 시안은 강좌 단계를 계단으로 쌓아 지금 단계에서 다음 단계와 TOPIK 등급이 함께 보이게 했습니다. 계단을 눌러 보세요.
TOPIK Ⅰ · 1급
정규과정의 첫 단계입니다. 15주 동안 TOPIK Ⅰ 1급 수준을 목표로 배웁니다.
TOPIK Ⅰ · 1급
2단계 수료증은 법무부 사증 발급에 쓰는 한국어 능력 입증 서류의 기준 단계입니다.
TOPIK Ⅰ · 2급
TOPIK Ⅰ 2급 수준을 목표로 하는 단계입니다.
TOPIK Ⅰ · 2급
3단계에 이어 TOPIK Ⅰ 2급 수준을 다지는 단계입니다.
TOPIK Ⅱ · 3급
TOPIK Ⅱ 3급 수준으로 올라가는 단계입니다.
TOPIK Ⅱ · 3급
정규과정의 마지막 단계입니다. 다음은 회화와 유학을 준비하는 심화 과정으로 이어집니다.
TOPIK Ⅱ · 4~6급
심화 회화와 유학 대비 과정을 학습자 수준에 맞춰 편성합니다.
출처: 말레이시아 한국교육원 홈페이지 한국어강좌 안내(2026년 10월 확인)
교육원 홈페이지를 휴대폰으로 처음 여는 방문자도 많습니다. 천지인 필름은 세로 화면용 프레임을 따로 렌더링했고, 가로로 흐르던 이야기와 지도는 세로로 쌓이도록 바꾸었습니다.




버튼과 꼬리표, 공지 한 줄과 숫자 표기까지 부품 단위로 정리했습니다. 어느 시안을 고르더라도 운영 담당자가 같은 부품으로 새 화면을 만들 수 있습니다.
기관의 홈페이지는 처음 찾아온 사람이 받는 첫인사입니다.
무엇을 하는 곳인지 한 문장으로 전하는 일부터 함께 정리하겠습니다.
교육·학교
경기글로벌스쿨
신앙과 세계를 「한 점에서 세계로」라는 이야기로 묶은 브랜드 해석, 네이비·골드와 울트라마린의 컬러, 빛(LUMEN)과 지평선(HORIZON) 두 가지 시안과 스크롤 모션그래픽까지 담은 기독교 대안학교 메인 홈페이지 리뉴얼 제안 과정
공공기관
국가신약개발재단
이용자 분석과 CI 해석, 아홉 개의 메인 시안, 파이프라인 시각화까지 담은 공공기관 홈페이지 구축·리뉴얼 과정
재단·비영리
푸르메재단
심벌의 세 나무에서 출발한 브랜드 해석, 블루와 새싹 라임 컬러, 접근성 기준과 네 가지 시안까지 담은 비영리 재단 홈페이지 리뉴얼 제안 과정
Contact
현재 상황과 목표를 남겨 주시면 가능한 작업 범위와 진행 방식, 예상 견적을 정리해 안내드립니다.
DIRECT
문의가 접수되었습니다. 영업일 1일 안에 작업 범위와 예상 견적을 정리해 회신드립니다.