신앙과 세계,
두 단어를 한 장면에
GGS를 설명하는 말은 두 갈래입니다. 하나는 기독교 신앙과 여섯 가지 가치이고, 다른 하나는 미국 교육과정과 세계의 대학입니다. 첫 화면에서 두 이야기가 따로 놓이면 학교의 성격이 흐려지므로, 두 단어를 하나의 장면으로 묶어야 했습니다.
뿌리와 지평선을 한 문장으로 묶기
GYEONGGI GLOBAL SCHOOL · WEBSITE RENEWAL PROPOSAL
작은 빛에서,세계의 지평선까지
경기글로벌스쿨 메인 홈페이지 리뉴얼 제안
LUMEN · HORIZON 두 가지 방향
01 / OVERVIEW프로젝트 개요
신앙 위에 뿌리내린 학교가
세계를 향해 자라는 이야기
경기글로벌스쿨(GGS)은 경기도 고양시 일산에 있는 기독교 대안학교입니다. 미국 공통핵심교육과정(CCSS)을 바탕으로 초등부터 고등까지 열두 해를 한 학교에서 가르치고, 졸업생들은 미국을 비롯한 세계의 대학으로 진학합니다.
블루캔버스는 학교의 메인 홈페이지를 새로 설계하는 두 가지 방향을 제안했습니다. 학생 한 명 한 명을 빛으로 그린 LUMEN과, 세계를 향한 가능성을 지구의 지평선으로 펼친 HORIZON입니다. 이 페이지는 두 시안이 나오기까지 고민한 내용과 과정을 정리한 기록입니다.
- #기독교 대안학교
- #초·중·고 통합과정
- #미국 교육과정
- #입학상담 동선
- #브랜드 해석
- #모션그래픽
- #스크롤 인터랙션
- #국문 · 영문
- #반응형
학교가 걸어온 숫자에서 출발했습니다.
1997
교육공동체가 시작된 해
2015년 일산 캠퍼스 이전과 함께 지금의 이름으로
12년
초·중·고가 이어지는 통합과정
G1부터 G12까지 한 학교에서
5개
국제 인증과 회원 자격
MSA-CESS · AI · NCPSA · College Board · ACSI
50개
학생들이 고르는 클럽 활동
코딩부터 오케스트라까지
숫자 출처: 경기글로벌스쿨 홈페이지 공개 자료(2026년 10월 확인)
02 / THE QUESTION
열두 해를 맡길 학교를 찾는 부모는 첫 화면에서 무엇을 확인하고 싶을까요? 이 학교가 무엇을 믿는지, 그리고 아이가 어디까지 갈 수 있는지입니다.
ANALYSIS
메인 화면이
메인 화면이
풀어야 할 세 가지
학교 소개와 교육과정, 입학 안내를 하나씩 다시 읽으며 학부모가 메인 화면에서 확인하고 싶어 하는 내용을 정리했습니다. 정보는 이미 충분했습니다. 필요한 것은 그 정보를 하나의 이야기로 엮는 순서였습니다.
신앙과 세계,
초·중·고 열두 해가
하나의 길로 보이게
교육과정은 초등, 중등, 고등 세 개의 메뉴로 나뉘어 있습니다. 하지만 초등 입학을 고민하는 부모가 궁금한 것은 열두 해 뒤의 모습까지 이어지는 길입니다. 세 과정을 한 줄 위에 올려 처음과 끝이 함께 보이도록 했습니다.
G1부터 G12까지 한 줄로 잇기입학상담까지
망설임 없이
입학 절차는 상담 신청과 1:1 대면상담, 테스트와 인터뷰를 거쳐 입학 등록으로 이어집니다. 이 순서를 메인 화면의 끝에 그대로 보여 주고, 온라인 신청과 전화 상담을 같은 자리에 두었습니다.
네 걸음의 입학 절차를 첫 페이지에메인 화면을 여는
네 사람을 먼저 그렸습니다.
학교 홈페이지에는 입학을 고민하는 가족만 오지 않습니다. 재학생 가족과 학생, 영어로 학교를 찾는 가족과 교사도 같은 첫 화면을 엽니다. 방문자를 홈페이지를 연 이유로 나누고, 저마다 가장 먼저 봐야 할 화면을 정했습니다.
우리 아이에게
맞는 학교일까?
- 교육 철학과 여섯 가지 가치
- 초·중·고 교육과정
- 입학 절차와 상담 신청
시안에서는 가치와 열두 해 과정, 입학 네 걸음
이번 주 학교에서는
무슨 일이 있었을까?
- 최근 소식과 갤러리
- 학사 일정
- 스쿨버스 안내
시안에서는 최근 소식 카드와 바로가기
선배들은 어느 대학에
진학했을까?
- 합격 대학
- AP 과목과 SAT
- 클럽 활동
시안에서는 세계의 대학으로 이어지는 궤적
Is this school
accredited?- 국제 인증과 회원 자격
- 영문 메인
- 채용 안내
시안에서는 국제 인증 카드와 영문 메인
03 / BRAND THINKING
학교의 역사는
학교의 역사는
한 점이 넓어지는 과정이었습니다.
- 1997 · 시작작은 교육공동체
1997년 작은 교육공동체로 시작했고, 2005년에 미국 교육과정을 도입했습니다. 모든 이야기는 이 한 점에서 출발합니다.
- 2015 · 일산일산의 캠퍼스
2015년 일산 캠퍼스로 옮기며 경기글로벌스쿨이라는 지금의 이름을 갖게 되었습니다. 점은 지도 위의 한 자리가 되었습니다.
- 오늘 · 세계세계의 대학으로
졸업생들은 미국을 비롯한 세계의 대학으로 진학합니다. 일산에서 시작한 선이 세계로 뻗어 나가는 셈입니다.
BRAND STATEMENT
Rooted in Faith,
Ready for the World.
신앙 위에 뿌리내리고, 세계를 향해 자랍니다.
학교의 미션과 비전에서두 시안이 함께 쓰는 제안 문장으로
뿌리를 먼저 보여 줍니다.
신앙과 여섯 가지 가치는 학부모가 학교를 고르는 중요한 기준입니다. 성과를 앞세우기 전에 학교가 무엇을 믿는지부터 말합니다.
열두 해를 한 흐름으로 말합니다.
초등과 중등, 고등을 따로 소개하지 않고 한 학생이 자라는 순서대로 이어서 보여 줍니다.
세계로 열린 학교를 보여 줍니다.
국제 인증과 합격 대학, 영문 메인을 갖춰 해외에서 학교를 찾는 가족에게도 같은 이야기를 전합니다.
TWO METAPHORS
같은 문장을
같은 문장을
두 가지 장면으로 그렸습니다.
- LUMEN · 빛학생 한 명 한 명이 빛입니다
작은 빛 하나가 모여 지구를 이루고, 그 빛이 세계의 대학으로 이어집니다. 신앙과 가치, 한 사람의 성장을 따뜻한 빛으로 표현했습니다.
- HORIZON · 지평선가능성은 지평선 너머로 이어집니다
우주에서 바라본 지구의 지평선으로 학교의 시야를 보여 줍니다. 낯선 세계로 나아가는 용기와 가능성을 넓은 화면으로 펼쳤습니다.
- LUMEN × HORIZON빛이 지평선 위로 떠오르는 순간
두 시안은 서로 다른 답이라기보다 같은 장면의 두 순간입니다. 지평선 위로 빛이 떠오르면 새로운 하루가 시작되듯, 아이의 다음 걸음도 그렇게 시작됩니다.
PHOTOGRAPHY DIRECTION
꾸민 장면보다
꾸민 장면보다
빛이 드는 하루를 고릅니다.
학부모는 홈페이지의 사진으로 학교의 하루를 처음 만납니다. 단체 사진을 나열하기보다 배움에 몰입한 손과 창으로 드는 빛, 교실 밖의 활동처럼 실제 하루의 장면을 고르는 기준을 세웠습니다. 최종 화면에는 학교가 확인한 사진만 사용합니다.
- DO배움에 몰입한 손과 뒷모습
- DO자연광과 실제 수업의 순간
- DON'T같은 구도의 단체 사진 나열
- DON'T보정이 과한 연출 사진
04 / COLOR SYSTEM학교의 네이비와 골드를
학교의 네이비와 골드를
밤하늘과 새벽빛으로.
지금의 홈페이지는 깊은 네이비(#00225C)와 골드(#D4B972)를 씁니다. 두 색을 버리지 않고, LUMEN에서는 밤하늘과 빛으로, HORIZON에서는 지구의 푸른빛과 새벽의 살구빛으로 넓혔습니다.
LUMEN밤하늘과 빛
Night Navy#000A1FRGB 0 10 31
밤하늘
첫 화면과 어두운 장면의 바탕입니다. 빛이 가장 또렷하게 보이는 색입니다.
- 흰 글씨
- 19.8:1 AAA
- 짙은 글씨
- 1.1:1 사용 안 함
School Navy#00225CRGB 0 34 92
학교의 네이비
지금의 홈페이지에서 이어 온 학교의 대표색입니다. 헤더와 큰 면에 씁니다.
- 흰 글씨
- 15.2:1 AAA
- 짙은 글씨
- 1.2:1 사용 안 함
Light Gold#D4B972RGB 212 185 114
빛
학교의 골드를 빛의 색으로 씁니다. 지금 위치와 중요한 버튼에만 놓습니다.
- 흰 글씨
- 1.9:1 사용 안 함
- 짙은 글씨
- 9.5:1 AAA
Gold Mist#ECDCAERGB 236 220 174
번진 빛
골드가 넓게 퍼질 때 쓰는 밝은 색입니다. 어두운 바탕의 보조 글자에 씁니다.
- 흰 글씨
- 1.4:1 사용 안 함
- 짙은 글씨
- 13.3:1 AAA
Paper#F7F4ECRGB 247 244 236
종이
밝은 장면의 바탕입니다. 순백보다 따뜻해서 오래 읽어도 편안합니다.
- 흰 글씨
- 1.1:1 사용 안 함
- 짙은 글씨
- 16.5:1 AAA
HORIZON지구의 푸른빛과 새벽
Deep Space#121B32RGB 18 27 50
우주
글자와 어두운 장면의 바탕입니다. 검정보다 푸른 기운이 있어 지구 사진과 이어집니다.
- 흰 글씨
- 17.1:1 AAA
- 짙은 글씨
- 1.0:1 사용 안 함
Ultramarine#244ADCRGB 36 74 220
지구의 푸른빛
링크와 강조, 입학상담 장면의 넓은 면에 씁니다.
- 흰 글씨
- 6.8:1 AA
- 짙은 글씨
- 2.5:1 사용 안 함
Apricot#E9C6A9RGB 233 198 169
새벽빛
초등 과정 카드처럼 따뜻한 면에 씁니다.
- 흰 글씨
- 1.6:1 사용 안 함
- 짙은 글씨
- 10.7:1 AAA
Sky#C2D0E7RGB 194 208 231
하늘
중등 과정 카드처럼 차분한 면에 씁니다.
- 흰 글씨
- 1.6:1 사용 안 함
- 짙은 글씨
- 11.0:1 AAA
Signal Red#E44B39RGB 228 75 57
작은 신호
별표와 진행 막대처럼 아주 작은 표시에만 씁니다.
- 흰 글씨
- 3.9:1 큰 글자
- 짙은 글씨
- 4.4:1 큰 글자
Paper#F6F5EFRGB 246 245 239
종이
기본 바탕입니다. 사진과 카드가 그 위에 놓입니다.
- 흰 글씨
- 1.1:1 사용 안 함
- 짙은 글씨
- 15.6:1 AAA
TRY IT · 같은 화면, 두 가지 팔레트
색을 바꿔도
색을 바꿔도
구조는 그대로입니다.
두 시안은 같은 디자인 토큰 위에서 만들었습니다. 바탕과 글자, 강조색의 자리를 미리 정해 두었기 때문에 팔레트만 바꾸면 같은 부품이 다른 표정을 갖습니다. 아래 버튼으로 입학상담 카드의 팔레트를 바꿔 보세요.
surface바탕ink글자accent강조soft보조 면
Admissions✳
아이의 다음 걸음을
GGS에서 시작하세요
입학상담은 온라인 신청이나 전화로 시작할 수 있습니다. 신청서를 보내 주시면 입학처에서 확인한 뒤 연락드립니다.
- 1상담 신청
- 21:1 대면상담
- 3테스트 · 인터뷰
- 4입학 등록
온라인 입학상담 신청 →입학 절차 보기
TYPOGRAPHY세 가지 목소리
Rooted in
Faith
영문 제목의 목소리
두 시안 모두 영문 강조에 세리프 이탤릭을 씁니다. 오랜 역사를 가진 학교의 차분한 인상을 영문 문장에 더합니다.
신앙 위에
뿌리내리고
한국어의 목소리
LUMEN은 제목부터 본문까지 한국어를 Pretendard 한 가족으로 정리했고, HORIZON은 학교 사이트의 공통 글꼴인 Noto Sans KR을 이어 썼습니다. 제목은 자간을 좁혀 단단하게, 본문은 넉넉한 행간으로 편안하게 씁니다.
A world of
possibilities.
HORIZON의 목소리
기하학적인 산세리프로 큰 영문 문장을 세우고, 마지막 단어만 세리프 이탤릭으로 바꿔 문장에 리듬을 만듭니다.
- Display88 / Pretendard 700 / -0.03em
- Heading58 / Pretendard 700
- Value48 / Cormorant 600 Italic
- Body18 / 400 · 행간 1.78
- Label14 / 600 · 자간 0.16em
05 / MOTION빛 한 점이 지구가 되기까지
스크롤 한 번에
열두 해의 여정을.
LUMEN의 첫 화면은 스크롤에 따라 재생되는 모션그래픽입니다. 빛 한 점이 입자로 퍼져 지구본을 이루고, 일산 캠퍼스에서 합격 대학 열네 곳으로 빛의 궤적이 이어집니다.
실시간 3D 대신 미리 렌더링한 프레임을 스크롤 위치에 맞춰 그립니다. 휴대폰에서는 세로 화면용 프레임을 따로 불러와 같은 장면을 끊김 없이 보여 줍니다.
00빛 한 점
01퍼지는 입자
02지구본
03일산 37.67°N
04열네 개의 궤적
05세계로
TRY IT · 필름 움직이기
- University of Washington시애틀
- UC Berkeley버클리
- UC Davis데이비스
- USC로스앤젤레스
- UC Irvine어바인
- University of Illinois어바나섐페인
- Purdue University웨스트라파예트
- Vanderbilt University내슈빌
- University of Notre Dame노터데임
- Case Western Reserve University클리블랜드
- Penn State스테이트칼리지
- Cornell University이타카
- New York University뉴욕
- Northeastern University보스턴
HORIZON · CAMERA
스크롤을 내리면
스크롤을 내리면
카메라가 지구에 다가갑니다.
HORIZON의 첫 화면은 한 장의 지구 사진을 확대하고 기울이며 카메라가 움직이는 것처럼 보여 줍니다. 무거운 영상 대신 이미지 한 장과 스크롤 계산만으로 장면을 만들었습니다.
06 / DESIGN DIRECTIONS같은 뼈대, 두 가지 표정
하나의 정답을 고르기 전에,
두 가지 가능성을 끝까지 그렸습니다.
같은 학교 자료와 같은 정보 구조에서 출발했지만, 무엇을 먼저 보여 주느냐에 따라 홈페이지의 성격은 크게 달라집니다. 세계를 향한 시야를 앞세운 HORIZON과, 신앙과 가치를 차례로 전하는 LUMEN을 메인 페이지 끝까지 완성했습니다.
아래 화면은 실제로 제작한 시안을 녹화한 것입니다. 장면 이름을 누르면 그 구간으로 이동합니다.
STRUCTURE FIRST
색을 칠하기 전에 회색 상자로 뼈대를 먼저 맞췄습니다. 손잡이를 움직이면 같은 화면의 뼈대와 완성본을 비교할 수 있습니다.
제안 A안
HORIZON나의 가능성이, 세계가 되는 곳
우주에서 바라본 지구의 지평선으로 학교의 시야를 보여 주는 방향입니다. 스크롤에 따라 카메라가 지구에 다가가고, 학교의 태도와 교육과정, 학교생활과 진학, 입학상담이 넓은 화면 위에 차례로 펼쳐집니다.
- 지구의 지평선으로 여는 첫 화면과 카메라 이동
- 가로로 이어지는 초등 · 중등 · 고등 교육과정
- 입자로 그린 지구본과 Faith · Character · Community
Manrope · DM Sans · Cormorant Garamond
제안 B안
LUMEN학생 한 명 한 명이 빛나는 존재
학생 한 명 한 명을 빛으로 그린 방향입니다. 빛 한 점이 지구가 되는 모션그래픽으로 시작해 미션과 여섯 가지 가치, 열두 해의 교육과정, 국제 인증과 합격 대학, 입학상담까지 학부모가 확인할 내용을 차례로 안내합니다.
- 빛 한 점이 지구본이 되는 스크롤 모션그래픽
- 육각형을 따라 하나씩 켜지는 여섯 가지 가치
- 가로로 흐르는 교육과정과 입학상담 네 걸음
Cormorant Garamond · Pretendard
COMPARE두 방향은 어떻게 다를까요
같은 학교를 소개하는
두 가지 순서
두 시안은 같은 내용을 담고 있지만 이야기를 꺼내는 순서와 분위기가 다릅니다. 학교가 첫 화면에서 가장 먼저 전하고 싶은 말이 무엇인지에 따라 고를 수 있도록 차이를 정리했습니다.
구분A · HORIZONB · LUMEN
첫 화면지구의 지평선 사진과 영문 문장빛 한 점이 지구가 되는 모션그래픽
이야기의 순서학교의 태도 → 교육과정 → 가치 → 학교생활 → 진학미션 → 여섯 가치 → 교육과정 → 진학 · 인증 → 학교생활
가치를 보여 주는 방식Faith · Character · Community 세 갈래여섯 가지 가치를 육각형으로
교육과정색이 다른 세 장의 가로 카드사진과 함께 흐르는 가로 패널
진학 정보대표 대학 이름을 큰 글자로합격 대학 로고와 빛의 궤적
입학상담전화와 상담 신청을 한 화면에네 걸음의 절차와 원서 내려받기
화면의 분위기밝고 경쾌한 낮의 화면깊고 따뜻한 밤의 화면
무게를 둔 곳글로벌 비전과 몰입감교육 가치와 정보 전달
두 시안이 함께 지키는 것
- 공통 메뉴와 푸터기존 학교 사이트의 메뉴와 푸터를 그대로 이어 쓰고 서브 페이지와 연결합니다.
- 기존 입학상담상담 신청 버튼은 지금 운영 중인 온라인 입학상담 화면을 그대로 엽니다.
- 동작 줄이기기기에서 동작 줄이기를 켜면 고정 장면과 자동 움직임을 멈추고 내용을 차례로 보여 줍니다.
- 작은 화면휴대폰에서는 가로로 흐르던 구간을 세로로 바꿔 표시합니다.
- 01읽기학교 소개 · 교육과정 · 입학 안내 다시 읽기
- 02나누기방문 이유로 네 사람 정의하기
- 03세우기「한 점에서 세계로」 이야기 정하기
- 04그리기두 방향의 메인 페이지 시안
- 05움직이기히어로 모션그래픽과 스크롤 장면
- 06다듬기모바일 · 동작 줄이기 · 영문 메인
07 / ACADEMICS열두 해를 한 줄로
초등에서 고등까지,
한 학생이 자라는 순서로.
두 시안 모두 교육과정을 세 개의 메뉴가 아니라 하나의 흐름으로 보여 줍니다. 아래 막대에서 학년을 눌러 보세요. 그 학년이 속한 과정과 배우는 내용이 함께 바뀝니다.
Elementary School초등 과정
배움을 즐기는 힘을 기릅니다
학생 한 명 한 명의 흥미와 강점에 맞춰 지도 방식을 달리합니다. 영어·수학·과학·사회를 중심으로 균형 잡힌 기초를 쌓고, 읽기·쓰기·말하기와 미술·음악·중국어·체육 수업으로 자신감을 키웁니다.
Middle School중등 과정
스스로 생각하고 배웁니다
다양한 행사와 클럽 활동으로 비판적 사고와 자기 성찰, 세계를 보는 시야를 넓힙니다. 방과 후 지원 프로그램과 학생 상담이 한 명 한 명의 성장을 곁에서 돕습니다.
High School고등 과정
대학과 세계를 준비합니다
4년 동안 CCSS 기반 학점을 이수하고 AP 과목으로 전문성을 넓혀, 대학 입시에 필요한 수준까지 학습합니다. 봉사와 비교과 활동으로 책임감과 리더십도 함께 기릅니다.
G9English & Lab 9GeometryBiologyWorld History
G10English & Lab 10Algebra IIChemistryEconomics
G11English & Lab 11PrecalculusPhysicsUS History
G12English & Lab 12CalculusAP Env. ScienceUS Government
교과 출처: 경기글로벌스쿨 홈페이지 교육과정 안내(2026년 10월 확인)
08 / VALUES여섯 가지 가치를 하나의 도형으로
가치는 목록이 아니라
서로 이어진 하나입니다.
학교가 지향하는 여섯 가지 가치를 육각형의 꼭짓점에 놓고, 스크롤을 내릴 때마다 하나씩 켜지도록 설계했습니다. 마지막 가치가 켜지면 여섯 꼭짓점이 하나의 선으로 이어집니다. 도형 위의 가치를 직접 눌러 보세요.
01 / 06
Adaptability
적응력
학생 개개인에 맞춘 목표와 자기관리 습관을 바탕으로, 낯선 환경에서도 유연하게 대처하는 힘을 기릅니다.
Global Citizenship
세계시민의식
탐구하고 공감하며 기여하는 경험을 쌓고, 문화와 관점의 다름을 존중하는 세계시민으로 성장합니다.
Integrity
진실성
스스로를 돌아보며 깨닫는 과정을 거쳐, 정직의 가치를 마음 깊이 새깁니다.
Justice
공정성
모든 학생과 교직원을 공정하게 대하고, 모두에게 유익한 해결책을 함께 찾습니다.
Respect
존중
같은 생각과 다른 생각을 모두 존중하며, 누구나 자유롭게 의견을 말할 수 있는 문화를 만듭니다.
Trust
신뢰
교사와 학생 사이에 신뢰가 쌓일 때 배움도 가장 크게 자랍니다.
HORIZON · FAITH · CHARACTER · COMMUNITY
HORIZON은 학교의 가치를 신앙(Faith)과 인성(Character), 공동체(Community)의 세 갈래로 묶어 보여 줍니다. 점 620개로 그린 지구본이 스크롤에 따라 천천히 돌아갑니다.
09 / GLOBAL
선 하나하나가
선 하나하나가
졸업생의 다음 걸음입니다.
LUMEN의 히어로 필름에서 빛의 궤적은 학교의 합격 대학 목록을 따라 그렸습니다. 일산 캠퍼스에서 출발한 선이 시애틀과 캘리포니아를 지나 뉴욕과 보스턴까지 이어집니다.
- 01University of Washington시애틀
- 02UC Berkeley버클리
- 03UC Davis데이비스
- 04USC로스앤젤레스
- 05UC Irvine어바인
- 06University of Illinois어바나섐페인
- 07Purdue University웨스트라파예트
- 08Vanderbilt University내슈빌
- 09University of Notre Dame노터데임
- 10Case Western Reserve University클리블랜드
- 11Penn State스테이트칼리지
- 12Cornell University이타카
- 13New York University뉴욕
- 14Northeastern University보스턴
대학 목록 출처: 경기글로벌스쿨 홈페이지 대학 진학 현황(2026년 10월 확인)
10 / ADMISSIONS입학상담까지 네 걸음
메인 페이지의 마지막 장면은
입학상담입니다.
두 시안 모두 메인 페이지의 마지막 장면을 입학상담으로 정했습니다. 학교의 입학 절차를 네 걸음으로 줄여 보여 주고, 온라인 신청은 기존 입학상담 화면과 그대로 연결했습니다.
국문과 영문 메인이 같은 구조를 쓰도록 문장도 함께 준비했습니다. 아래 카드에서 언어를 바꿔 보세요.
- 1상담 신청온라인 또는 전화로 신청합니다.
- 21:1 대면상담헤드교사와 직접 만나 상담합니다.
- 3테스트 · 인터뷰입학 적합성을 함께 확인합니다.
- 4입학 등록서류를 제출하고 최종 안내를 받습니다.
Admissions아이의 다음 걸음을
아이의 다음 걸음을
GGS에서 시작하세요
입학상담은 온라인 신청이나 전화로 시작할 수 있습니다. 신청서를 보내 주시면 입학처에서 확인한 뒤 연락드립니다.
온라인 입학상담 신청 →입학 절차 자세히 보기
AdmissionsBegin Your Child’s
Begin Your Child’s
Journey at GGS
Start with an online inquiry or a phone call. Our admissions office will review your request and contact you.
Apply for Counseling →Admissions Procedure
같은 자리, 같은 길이를 기준으로 문장을 맞춰 두 언어에서 화면 구조가 흔들리지 않게 했습니다.
11 / MOBILE손안에서도 같은 이야기
작은 화면에서는
가로를 세로로 바꿉니다.
학부모는 휴대폰으로 학교 홈페이지를 처음 여는 경우가 많습니다. 가로로 흐르던 교육과정과 고정 장면은 세로로 바꾸고, LUMEN의 히어로는 세로 화면용 프레임을 따로 준비했습니다.
- 세로 화면용으로 따로 렌더링한 히어로 필름
- 세로로 쌓이는 교육과정과 가치
- 모션을 멈출 수 있는 버튼(HORIZON)
- 작은 화면 폭까지 점검한 레이아웃
DESIGN SYSTEM두 시안이 함께 쓰는
두 시안이 함께 쓰는
부품들
버튼과 꼬리표, 장면 번호와 숫자 표기까지 부품 단위로 정리했습니다. 선택한 시안을 운영하면서 담당자가 바뀌어도 같은 화면을 만들 수 있습니다.
EVERY STUDENT, A LIGHT.
당신의 학교는
당신의 학교는
어떤 빛으로 기억되나요?
학교 홈페이지는 학부모와 학생, 교사 지원자가 학교를 처음 만나는 곳입니다.
학교가 믿는 가치부터 함께 정리하겠습니다.
- Client
- 경기글로벌스쿨
- Scope
- 리서치, 브랜드 해석, 정보 구조, UI 디자인, 모션그래픽, 인터랙션 프로토타입
- Brand
- 엠블럼과 학교 색: 경기글로벌스쿨 · 해석과 웹 적용: 블루캔버스
- Status
- 메인 홈페이지 리뉴얼 제안 · 2026년 10월
다른 프로젝트
-
글로벌 기업
영원무역
라벨에 이름이 붙지 않는 회사를 위한 「옷의 안쪽에서, 세상의 바깥까지」 브랜드 해석, 컬러 시스템과 설산에서 시작하는 홈페이지 시안, 제조 공정 스크롤 인터랙션과 글로벌 네트워크·소재·ESG 화면까지 담은 글로벌 OEM 기업 홈페이지 리뉴얼 제안 과정
-
미디어·출판
문학동네 출판그룹
「동네」라는 이름에서 출발한 브랜드 해석, 종이와 먹과 가름끈의 컬러, 네 가지 시안과 도서 탐색·연재 읽기 경험까지 담은 출판그룹 홈페이지 리뉴얼 제안 과정
-
재단·비영리
푸르메재단
심벌의 세 나무에서 출발한 브랜드 해석, 블루와 새싹 라임 컬러, 접근성 기준과 네 가지 시안까지 담은 비영리 재단 홈페이지 리뉴얼 제안 과정