- ⓒ2024 - 2025
- UI, UX Renewal project
Cyber Hankuk University of Foreign Studies
Project overview
사이버한국외국어대학교는 국내 유일의 외국어 특성화 사이버대학교입니다.
사이버한국외국어대학교 및 그 산하 기관 웹사이트 전반에 걸쳐 진행된 전면 리뉴얼 프로젝트를 스케치북과 함께하였습니다.
젊고 활기찬 비주얼 아이덴티티로 탈바꿈하고, 변화하는 사용자 환경에 맞춰 정보 구조 개선, 반응형 웹 구현, 브랜드 톤 강화를 목표로 삼았습니다.
또한, 웹 접근성 인증(WA)과 정보보호 관리체계 인증(ISMS) 통과를 위한 기술적 요소를 함께 설계하였습니다.
Cyber Hankuk University
of Foreign Studies
your future
begins.
What we needs
기존 사이트는 정보가 분산되어 있어 사용자가 원하는 내용을 빠르게 찾기 어려운 구조였습니다.
운영 측은 따뜻하고 친근한 이미지 전달을 필요로 했으며, 사용자들은 모바일 환경을 포함한 다양한 디바이스에서의 편리한 탐색을 요구했습니다.
이러한 요구를 바탕으로 정보 구조, 디자인 톤, 접근성 전반에 걸친 개선이 요구되었습니다.
CUFS- 온라인 캠퍼스의 특성상 차가운 인상을 줄 수 있을 것 같아요.
더 따뜻하고 친근한 이미지로 다가가고 싶어요.기존 사이트 간 디자인 편차를 줄이고, 사이버한국외대만의 브랜드 톤을 유지하고 싶어요.
재학생- 콘텐츠가 많고 분산되어 있어요. 처음 들어와도 한눈에 보일 수 있으면 좋겠어요.모바일 환경에서도 편안한 정보 탐색이 가능하면 좋겠어요.
재학생- 만학도인데, 고령자 학생을 고려해 시인성이 개선되었으면 해요.
재학생- 외국인 재학생이에요.
아직 한국어가 서툴러서, 모국어로도 홈페이지를 탐색하고 싶어요.
신입생- 사이버외국어대학교 입학에 관심이 있는데, 입학 관련 정보는 어디서 얻을 수 있나요?CUFS만의 장점은 뭐가 있을까요?
Project Strategy
사용자와 운영 측의 니즈를 바탕으로, UX 전반의 개선을 위한 네 가지 전략을 수립하였습니다.
정보 구조, 디자인 언어, 반응형 환경, 접근성 측면에서 일관된 경험을 제공하는 데 중점을 두었습니다.
- Information Clarity명확한 정보 구조 설계
- 사용자가 쉽게 이해하고 탐색할 수 있도록 명확한 시각적 계층 구조를 구현
- Visual Language System시각적 언어 시스템 개발
- 언어 장벽을 넘어서는 커뮤니케이션을 가능하게 하고, 이를 통해 대학의 글로벌 아이덴티티 강화
- Responsive Experience반응형 환경 최적화
- 다양한 디바이스에서도 일관된 사용 경험을 제공할 수 있도록 유연한 레이아웃 구성
- Inclusive Accessibility글로벌 사용자를 위한 포용적 설계
- 다양한 문화적 배경 및 장애를 가진 사용자들도 쉽게 접근하도록 WCAG 가이드라인을 준수하여 설계
Visual Identity Concept
사이버 환경에서의 탐색을 상징하는 Cursor, 언어를 매개로 한 소통을 표현하는 Speech Bubble.
두 요소를 결합해, 외국어 특성화 사이버대학만의 시각 언어를 구축했습니다.
브랜드 메시지 ‘Speak your future’를 중심으로, 사용자의 경험과 대학의 정체성을 하나의 비주얼로 연결합니다.
Cursor
Speech Bubble
Character
Driven UI
캐릭터를 통해 정보 탐색의 장벽을 낮추고,
복잡한 절차를 더 쉽고 따뜻하게 전달합니다.
학습의 흐름 속에서 자연스럽게 브랜드 경험을 유도합니다.
- 모집 요강
- 2025학년도 봄학기
모집 요강 확인
- 수강 방법
- 수강 준비부터 강의 수강까지,
수강 방법 알아보기!
- 나의 전형 찾기
- 나에게 맞는 전형이 뭘까?
- 입학에서 졸업까지
- 입학부터 졸업하기까지 안내서
VISION
2030
UI Design System
기존 BI 컬러인 네이비를 중심으로, 밝은 블루와 옐로우를 보조 컬러로 확장하여 시각적 활력을 더했습니다. 이를 통해 정보 전달의 명확성과 브랜드의 친근한 이미지를 동시에 강화하였습니다.
- CUFS Navy
- #002445
- Navy 400
- #002D56
- Navy 300
- #004381
- CUFS Blue
- #1087F5
- Blue 500
- #0475DE
- Blue 50
- #EEF7FF
- CUFS Yellow
- #FFE500
- Yellow 500
- #FFD600
- Yellow 50
- #FFFDE5
SUIT는 정제된 구조와 다양한 굵기를 제공하여, 콘텐츠의 위계와 정보 전달에 최적화 서체입니다. 국문과 영문 모두에 SUIT 폰트를 적용하여, 디지털 및 다국어 환경에서도 일관된 가독성과 감성을 구현하였습니다.
NEXT CUFS;
Speak your future.
외국어 특성화 대학의 특성을 반영해, 다양한 언어 사용자에게 동일한 정보 접근성을 제공하고자 Google Website Translator API를 연동하여 다국어 자동 번역 기능을 적용했습니다. 번역 대상 언어는 학부 커리큘럼과 주요 사용자를 기준으로 설정되었으며, 콘텐츠 일관성을 해치지 않으면서도 글로벌 접근성을 높일 수 있도록 구성하였습니다.
CUFS Admissions Center
쉽고 빠른 정보 탐색을 위해 서브페이지에서는
좌측에 LNB를 달아 페이지를 구성했습니다.
CUFS
Departments
CUFS의 정체성을 공유하며, 전공별 정보를 한눈에 탐색할 수 있도록 설계된
학부 전용 홈페이지입니다. 학과 정보를 비롯해 전공별 맞춤 경험을 제공합니다.
CUFS
Graduate School
CUFS Global
Education Institute
Next CUFS, Where Future Begins.
Speak your future.
Next CUFS, Where Future Begins.
Speak your future.
Next CUFS, Where Future Begins.
Speak your future.
Foreign Studies
Credits
Director
- Baek GwangJong
Product Manager
- Kim SangHoon
- An KyungMin
Design
- Jeon EunJeong
- Lee JiEun
- Kim MiJoo
Development
- Kim YoungKi
- Hwang KyoungHyun
- Race
- Moon SeoHee
- Ahn JungHyun
- 일상이지