seoulnational university web site renewalprojecthongsi.x-y.net/2016_d14/oej_c/pdf/process_1.pdf ·...

국립

�서울

대학

교�웹

사이

트�리

뉴얼

�프로

젝트

프로

젝트

�작업

과정

�안내 SEOUL NATIONAL UNIVERSITY WEBSITE RENEWAL PROJECT

e-m

ail : k

ingka

ng__

@gm

ail.co

m20

16. 0

2. 0

2 - 2

016.

03.

04

INDEX

1. 서울대학교�브랜드�파악2. 서울대학교 SWOT 분석3. 서울대학교�웹사이트�분석4. 클라이언트�요구사항�분석5. 경쟁사�분석

6. 우수사�분석7. 분석을�통한�컨셉�및�전략�도출8. 스타일�가이드 9. 리뉴얼�사이트�디자인10. 리뉴얼�결과�예측

SEOUL NATIONAL UNIVERSITY

서울대학교�웹사이트�리뉴얼�프로젝트

WEB SITE RENEWAL PROJECT

국립�서울대학교�웹사이트�리뉴얼�프로젝트프로젝트�작업과정�안내

e-mail : [email protected]. 02. 02 - 2016. 03. 04

서울대학교는 대한민국의 국립대학법인으로, 서울대 혹은 SN U라고 불립니다.1895년 고종에 의해 설립된 법관양성소를 기 원으로 하여 1946년에 공포된 법령에 따라 경성대학을 중심으 로 여러 전문학교들이 통합되어 만들어진 대한민국 최초의 국 립 종합 대학입니다. 1948년 서울대학교로 명칭이 바뀐 후, 201 1년에는 국립대학법인으로 전환되었습니다. 법인화로 전환된 이후 치러진 첫 간선제 총장 선거에서는 제 26대 총장으로 성낙 인이 선출되어 현재 재임 중입니다.서울대는 9개의 단과대학, 1개의 대학원으로 출발하여 현재 16개의 단과 대학, 일반대학원 및 10개의 전문대학원으로 확장되 었습니다. 단과대학들은 곳곳에 나뉘어 있었으나 종합화 계획 을 토대로 관악, 연건, 평창캠퍼스로 이전 및 통합하였습니다.대학수학능력시험의 수석들이 주로 서울대에 입학할 정도로 국내에서 높은 위상을 보유하며, 세계 대학 평가 순위에서도 빠 르게 상승하는 등 세계적으로 도약을 준비하고 있습니다.

1. 서울대학교�브랜드�파악

서울대학교�내�미술관미술관

2. 서울대학교 SWOT 분석

서울대의�강점



대한민국 최초의 국립종합대학으로 개 교 70주년으로 깊은 역사를 갖고 있습 니다 선한인재를 인재상으로 학문적 기 반을 지원하는 프로그램이 있으며, 꾸준 하고 창의적인 융복합 연구로 세계적인 성과를 창출합니다. 글로벌 네트워크를 구축하는 등 국제화 사업을 통해 활발하 게 세계와 교류하고 세계대학평가 순위 에서 상위권 자치하고 있습니다.

서울대의�약점친근함 보다는 딱딱하고 정적이며 공부 에만 전념하는 것 같은 첫인상이 있습니 다. 일반적으로 이성적이고 차가운 느낌 을 주며, 창의적 인재상에 걸맞는 크리에 이티브한 인상이 부족합니다. 학문적 외 다양한 활동을 하고 있음에도 대중에 어 필되는 측면이 적고, 국내 1위라는 명성 외 서울대의 독자 적인 향후 목표에 대한 홍보가 부족가 부족한 편입니다.ST

RENG

THW

EEKNESS

서울대의�위협서울대학교는 국내 교육에서는 부동의 1 위를 유지하고 있지만 한국이라는 나라 의 세계적 인식 부족으로 인해 이러한 점 이 시장에서의 위협이 될 수 있습니다. 하지만 점차 인지도가 올라가고 있 는 한 국의 위상을 발판 삼고 세계적으로 혁신 적인 연구를 보여줌으로써 서울대학교 자체의 위신을 부각시킬 수 있는 방법을 강구해야 할 것입니다.

TH

REAT

서울대의�기회서울대학교는 세계 대학 순위에서 빠르 게 순위가 올라가고 있습니다. 아시아에 서는 10위 내를 유지하고 있으며, 세계적 으로는 50위 안으로 발돋움하는 등 약진 하는 것을 기회로 삼아 더욱 추진력있게 나아가는 것이 중요할 것 같습니다. 국내 의 위상은 확보된 바 있으므로 이제 글로 벌로 나아가는 서울대학교의 목표를 전 면에 내세워 강조해야 할 것입니다.OP

PORT

UNITY

3. 서울대학교�웹사이트�분석

서울대학교�기존�웹사이트



상단에 위치한 가로형 내비게이션으로 타이포로 구성된 메뉴 항목들로 표현하고 있습니다.

사용자에게 많은 메세지를 전달할 수 있는 메인 비 주얼 영역에 4장의 고화질 이미지를 롤링시켜 현재 서울대의 주요한 뉴스를 전달합니다.

서울대에서 진행 중인 기부성의 캠페인을 제목과 배너 형태로 노출시키고 있습니다.

개인정보처리방침, 이메일무단수집 거부 등 기본 적으로 푸터에 필요한 정보들과 함께 강조하고 접 근을 높일 수 있는 컨텐츠들을 노출시켰습니다.

상단 내비게이션 영역에 검색바를 위치시켜 사용 자가 쉽게 정보를 탐색할 수 있도록 하였습니다.

컨텐츠 영역으로 접을 수 있는 메뉴를 제공하여 교 내 주요 게시판을 노출하고 있습니다.

이미지와 간단한 타이틀로 게시물을 표현하였고, 선택적으로 4가지 게시물을 노출시켰습니다.

서울대학교와 연관된 웹사이트 및 주요 서비스 항 목들을 펼친 형태로 메인 페이지 하단에 노출시켜 사용자들이 선택적으로 접근하도록 하였습니다.

글로벌�내비게이션

메인�비주얼

캠페인�컨텐츠

푸터

검색바

서브�메뉴

컨텐츠�영역

푸터�영역

4. 클라이언트�요구사항�분석



클라이언트가 요구한 가장 중요한 사안으로, 서울 대가 가지고 있는 명실상부한 국내 최고의 대학교 라는 이미지를 다시 한 번 환기시켜 대중에게 각인 시키기 위해 비주얼화합니다. 또한 세계적으로 발 돋움하는 모습을 주목성 높은 전면에 내세워 직

간접적으로 노출시키고자 합니다.

1국내 1위�대학교의�위상과�세계�속의�서

울대를�보여�줄�것미래 서울대가 나아가고자 하는 방향을 표현하기 위해 학교의 장기목표, 단기목표, 인재상, 현재 목표 달성 상태 등을 파악합니다. 이를 사용자에게 다각 적인 측면으로 전달할 수 있도록 여러 가지 컨텐츠 를 활용하여 제공하도록 하면서 직관적인 이해를

도울 수 있도록 정보를 가시화합니다.

2미래�서울대학교가�나가아가야�할�방향

을�제시할�것서울대학교 웹사이트를 주로 이용하는 타겟층을 파악하고, 각 타겟층 별로 자주 이용하는 메뉴들을 정보 분류합니다. 타겟층이 쉽게 접근할 수 있도록 타겟층의 분류명을 직관적으로 전달하고 상단으 로 위치시켜 접근성을 높입니다. 또한 타겟층들의 원츠와 니즈를 파악한 컨텐츠 설계를 추가합니다.

3타겟을�위한�유용한�컨텐츠를�제안하고

정보�설계를�할�것기존의 대학교들에서 보여지는 인덱스 방식의 초 기 화면 구성에서 탈피하여 많은 정보를 다각적으 로 전달하는 방식을 고려합니다. 또한 많은 정보들 속에서 원하는 방향으로의 접근을 용이하게 만들 기 위해 지속적으로 내비게이션을 노출하는 등 디

자인과 사용성을 동시에 고려합니다.

4다른�대학교들과�차별화된�디자인을�제

시하여�보여줄�것

5. 경쟁사�분석

KAIST (한국과학기술원) (포항공과대학교)POSTEC

STRENGTH



이미지와 타이포로 전략 노출자주찾는 링크 모음의 편리성탭 형식으로 많은 게시물 노출다각적인 컨텐츠 구성

WEAKNESS간략화된 브랜드의 목표 방향글줄로 표현된 많은 게시물브랜드 고유의 특징 어필 부족많은 컨텐츠의 불분명한 카테고리

DIFFERENTIATION학교의 이미지 전면 활용다양한 컨텐츠 노출타겟층을 고려한 카테고리화검색 기능의 활용

STRENGTH타겟층을 고려한 서비스 메뉴이미지를 함께 활용한 컨텐츠강점을 비주얼 영역에 타이포로 노출SNS를 퀵서비스로 지속적 노출

WEAKNESS메인 비주얼의 너무 많은 정보불분명한 정보 분류컨텐츠들의 직관성 부족긴 글줄로 표현된 게시물

DIFFERENTIATION많은 정보를 노출하는 비주얼 영역SNS의 적극적인 활용이미지를 활용한 메세지 전달타겟층을 고려한 카테고리

(하버드대학교) (MIT공과대학교)

5. 경쟁사�분석

HARVARD UNIVERSITY MASSACHUSETTS INSTITUTE OF TECHNOLOGY

STRENGTH



최상단 타겟층 네비게이션 위치이미지, 미디어의 다양한 활용교지 받아볼 수 있는 폼 컨텐츠SNS 컨텐츠 적극 활용

WEAKNESS카테고리별 타이틀 부재모호한 정보 분류메인 비주얼의 적은 정보 전달량직관성이 부족한 많은 게시물

DIFFERENTIATION타겟층을 위한 컨텐츠의 주목성다양한 미디어의 활용교지를 통한 브랜드의 홍보SNS 컨텐츠 적극적 활용

STRENGTH카테고리 별 검색 기능한 눈에 많은 정보 볼 수 있음주목받는 연구를 전면에 노출명확하게 카테고리화된 항목들

WEAKNESS학교의 전략/특성 노출 부족타이틀과 하위 메뉴 통일성 부족불분명한 정보 분류긴 글줄로 표현된 게시물

DIFFERENTIATION학교의 특성을 다르게 접근한 점한 눈에 파악할 수 있는 페이지 구성검색 기능의 다양화카테고리화 된 항목들

건강보험심사평가원

6. 우수사�분석

KCC

STRENGTH



스퀘어를 이용한 명확한 정보 분류픽토그램을 활용한 메세지 전달비주얼과 타이포의 균형이미지를 활용한 컨텐츠 디자인

WEAKNESS컨텐츠 간의 강약 대비 부족특정 컨텐츠 타이틀 부재비주얼 이미지의 활용 부족타겟층을 위한 서비스 미비

DIFFERENTIATION명확하게 정보 분류된 컨텐츠픽토그램을 이용한 UI 고려스퀘어를 이용한 그리드감비주얼을 활용한 디자인 구성

STRENGTH사용성이 용이한 좌측 내비게이션컬러 마케팅을 통한 아이덴티티 노출넓은 영역의 메인 비주얼포인트 컬러를 활용한 디자인

WEAKNESSUX에 익숙치 않은 우측 스크롤버튼 및 항목들의 직관성 부족비주얼 영역의 낮은 가독성이미지의 메세지 전달 부족

DIFFERENTIATION이동에 용이한 좌측 내비게이션컬러를 통한 브랜딩큰 영역을 통한 메세지 전달신뢰를 주는 구성과 컬러

(네이버�벤처스)

6. 우수사�분석

TREPECTA NAVER VENTURES

STRENGTH



넓은 영역의 메인 비주얼무채색 대비로 느껴지는 세련미고화질 이미지가 주는 압도감반응형 웹사이트일의 넓은 스케일

WEAKNESS넓은 영역의 GNB가 주는 답답함상품 정보의 노출 부족브랜드의 직관적 메세지 부족UX에 익숙치 않은 항목들

DIFFERENTIATION넓게 사용한 비주얼 영역반응형 웹사이트 활용 스케일감고화질 이미지로 메세지 전달세련되고 감각적인 룩앤필

STRENGTH채도가 낮아 편안한 컬러 배색친근한 이미지 활용한 브랜딩고화질 이미지의 메인 비주얼인포그래픽 형식 차용

WEAKNESS브랜드 성격 직관적 노출 부족메인에서 적은 컨텐츠 노출컬러와 이미지의 대비 부족네이버 브랜드의 활용 부족

DIFFERENTIATION시각적으로 편안한 컬러 배색친근한 이미지를 이용한 브랜딩메인 비주얼의 고화질 이미지그래픽 차용한 부가 설명

7. 분석을�통한�컨셉�및�전략�도출



서울대학교의 신뢰도 높고 퀄리티 높은 많은 컨텐츠들이 서브 페이지 내부에 감춰져 있고, 특히 메인에 노출 된 컨텐츠 또한 어느 카테고리의 게시물인지 정보 분류가 명확하지 않아 사용자들이 원하는 정보를 쉽게 찾 기 어려웠습니다. 또한 서울대의 아이덴티티가 분명하게 보여지지 않는 점이 아쉽게 느껴졌습니다.

WHY왜�서울대학교�웹사이트가�리뉴얼이�필요한걸까?

클라이언트의 미션들을 분석한 결과, 서울대가 가지고 있는 고유의 목적성과 방향성을 보여줌과 동시에 다양 한 타겟층을 고려한 컨텐츠들이 필요하다는 점을 강조한 것 같습니다. 또한 다른 대학교들이 보여주는 트렌 드를 반영하면서도 디자인적인 차별화를 통해 브랜드 아이덴티티를 노출시키고자 한 것 같습니다.

왜�클라이언트가�이러한�미션을�주었을까?

서울대학교 웹사이트 리뉴얼에서 가장 중요한 점은 브랜드의 아이덴티티를 최대한으로 노출시키며 기존에 보유한 컨텐츠들을 메인에 노출시켜 사용자들의 흥미를 촉구해야 한다는 점이었습니다. 또한 다양한 타겟층 모두를 만족시킬 수 있는 정보들을 설계하고 차별화되면서도 감각적인 룩앤필이 필요하다 생각했습니다.

어떤�방향으로�웹사이트�리뉴얼을�진행해야�할까?

서울대의 국내외적인 위상을 표출함으로써 더욱 많은 사람들이 관심을 갖고 입학을 고려할 것입니다. 사용 자들을 고려한 컨텐츠를 통해 정보에 대한 손쉬운 접근을 하여 웹사이트에 머무르는 시간이 늘어나 서울대 의 브랜드파워가 향상될 것이며 브랜드를 통한 수익 창출을 기대할 수 있습니다.

웹사이트�리뉴얼로�어떤�결과가�발생할까?

RESULT

7. 분석을�통한�컨셉�및�전략�도출



서울대가 향후 목표로 하고 나아가고자 하는 방향을 컨셉으로 잡아 리뉴얼을 계획하였습니다. 국내 최고의 대학교 인 서울대학교는 앞으로 2020년까지 세계 대학 순위 20위 내로 진입을 목표로 하고 있으며, 현재에도 빠른 순위 향 상을 보여주는 등 국내를 넘어 세계로 나아가고자 하는 서울대의 목표를 직관적으로 제시하고자 하였습니다. 또한 이를 통해 서울대의 국제적인 위상을 다각적인 컨텐츠와 이미지 및 타이포로 노출시켜 브랜딩하고자 하였습니다.

CONCEPT세계로�나아가는대한민국�최고의�대학교

국내를 넘어 세계로 나아가고자 하는 서울대의 목표 및 발전 방향을 적극적으로 노출시키기 위해 고화질의 이미지 를 다양하게 활용하고자 합니다. 동시에 서울대를 상징하는 건축물 들을 적절하게 어필함으로써 고유의 아이덴티 티를 놓치지 않으려 노력했습니다. 웹사이트를 접근하는 다양한 타겟층의 원츠와 니즈를 고려하여 필요할 항목들 을 추가적으로 분류하여 접근성을 높이며, 이를 위한 컨텐츠를 추가적으로 노출하고자 합니다.

STRATEGY세계로�발돋움하는�이미지�활용타겟을�고려한�편리한�사용성�부각

8. 스타일�가이드



COLOR SYSTEM

서울대학교에서는 지정된 고유색과 연관된 푸른톤을 적절히히 이용하여 컬러를 활용하고 있습니다. 이를 반영하여 포인트 컬러로 푸른색의 컬러를 사용하면서 차분하고 강렬하면서도 이지적인 서울대의 이미지를 어필하고자 푸른 톤이 가미된 무채색 컬러들을 활용하였습니다.

목적기존의 웹사이트에서 사용된 푸른톤이 많이 적용된 컬러에서 조금 벗어나 회색톤을 적절히 사용하여 서울대가 가진 차 분한 느낌을 더하며 트렌디하고 감각적인 느낌을 주고자 하였습니다. 포인트 컬러의 푸른색을 밝게 조정함으로써 창의 적인 인재상을 대변하여 활동성을 더해줌으로써 서울대가 가진 기존의 딱딱한 인식에서 탈피할 수 있을 것입니다.

결과예측

PRIMARYCOLOR

COLOR CODE

COLOR TONES

#1e2730R : 30G : 39B : 48

100 / 80 / 50 / 20 (%)

THE GRADIENTDark Gray

POINTCOLOR

COLOR CODE

COLOR TONES

#007ac3R : 0G : 122B : 195

100 / 80 / 50 / 20 (%)

THE GRADIENTBlue

ASSORTCOLOR

COLOR CODE

COLOR TONES

#e3e6ebR : 227G : 230B : 235

100 / 80 / 50 / 20 (%)

THE GRADIENTLight Gray

ASSORTCOLOR

COLOR CODE

COLOR TONES

#2c333bR : 44G : 51B : 59

100 / 80 / 50 / 30 (%)

THE GRADIENTDark Gray




TYPOGRAPHY SYSTEM

한화에너지 리뉴얼에 제작설제작된 2.5D 시설 이미지와 프로세스 영상으로써 매 다소 어렵게 느 껴. 한화에너지 리뉴얼에 제작된 224.5D 시설설 설 이미지와 프로세스 영상으로써 매 다소 어렵게 느껴. 얼에 제작된 224.5D 시설설설 이미지와 프로 세스 영상으로써 매 다소 어렵게 느껴.

목적

KOREAN TYPOGRAPHY

본고딕Noto Sans KR - Bold

Noto Sans KR - Light

Helvetica - Bold

Helvetica - Regular

직관적으로 핵심 전달이 용이한 서체인헬베티카를 사용하여 서울대학교가주는 확실한 아이덴티티를 표현하고,영문을 사용하였을 때 사용자의이해도를 높이도록 하였습니다.

차분하고 신뢰성이 높은 서울대학교라는 브랜드에 걸맞게 곧은 활자를선택하였고, 가독성이 높은 서체를 이용하여 사용자를 고려하였습니다.

ENGLISH TYPOGRAPHY

헬베티카A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

0 1 2 3 4 5 6 7 8 9 0

가�나�다�라�마�바�사�아�자�차� 카� 타�파�하

가�나�다�라�마�바�사�아� 자�차�카� 타� 파� 하

세계로�가는 서울대학교SEOUL NATIONALUNIVERSITY

UNIVERSITY 1946 / 10SEOUL

좌측 내비게이션을 사용하여 세 로로 스크롤을 이동하였을 때에 도 페이지 간 이동이 용이하도록 하였습니다. 내비게이션으로 인 해 좁아지는 컨텐츠 영역을 넓게 사용하기 위해 반응형 웹 구동을 고려하여 디자인하였고, 메인 비 주얼을 시원하게 사용하여 브랜 드의 아이덴티티를 노출시켰습 니다. 컨텐츠를 박스로 구성하여 자연스러운 반응이 가능하도록 하였습니다. 또한 복합형 포털 구 조를 통해 사용자들이 정보를 쉽 게 접근할 수 있도록 하였습니다.

메인과의 통일성을 위해 상단에 넓 은 영역으로 비주얼단을 강조하였 고, 컨텐츠 영역에 이미지를 적극 활용하여 사용자가 직관적으로 이 해하기 쉽도록 구성하였습니다.

교육과정/학교소개게시판/사이트맵/회원가입

로고/메인비주얼좌측네비게이션/퀵서비스컨텐츠1단/2단/3단푸터




MAIN LAYOUT

LAYOUT SYSTEMSUB LAYOUT

퀵서비스타겟층에 따라 아이콘 형태를 제작하여 통일과 변화를 주었 습니다.예비서울대인/재학생/교직원/졸업생




ICONOGRAPHY SYSTEM

학교소개서울대학교의 미션을 한 눈에 이해할 수 있도록 아이콘을 활용하였습니다.배움의터전/학문적가치창조/더불어사는지혜

교육과정교육과정을 직관적으로 나타 내는 형태들을 조합하여 각 과의 특성을 살렸습니다.공과대학/자연과학대학/약학대학/법학대학/미술대학

주요서비스/타이틀사용자가 직관적으로 이해할 수 있도록 단순화한 UI로 아 이콘을 구성하였습니다.교통/전화/포털/등록금게시일/뷰/지침.정보소개/입학/소통/교육

회원가입가입의 단계를 명시적으로 보 여줄 수 있도록 아이콘을 활 용하였습니다.이용약관동의/본인인증과정/회원정보입력/회원가입완료

8. 리뉴얼�사이트�디자인 - About Main



1 7

6

5

4

3

2

7. 푸터 - 교내주요사이트 / 학교관련사이트펼쳐진 형태의 푸터에 구성된 내용들을 접을 수 있는 푸터로 구성하여 타겟층에 따라 불필요할 수 있는 영역을 최 소화시켰습니다.

1. 글로벌 네비게이션 - 좌측 네비게이션좌측 내비게이션을 통해 페이지 간 이동의 효율성을 높였으며, 아이덴티티 컬러를 노출하여 브랜드를 강조하였 습니다. 검색바 및 SNS 등의 버튼을 위치시켜 사용 상의 편의성을 고려하였습니다.

2. 메인비주얼 - 4장의 브랜드 관련 이미지 롤링서울대학교의 위상과 목표 방향 등 아이덴티티를 이미지와 타이포그래피로 강조하여 표현하였습니다. 4장의 이 미지를 통해 서울대가 보여주는 다양한 모습을 보여주고자 하였습니다.

3. 퀵서비스 - 타겟층 분류 서비스웹사이트에 접근하는 타겟층을 세분화시켜 각 대상 별로 자주 사용하는 페이지를 카테고리화시켰습니다. 묶는 기준은 다른 대학교들의 타겟층 서비스를 참고하여 분류하였습니다.

4. 컨텐츠 1단 - 학교소개 / 공지사항 / 입학뉴스 / 행사안내 / 주요서비스기존의 메인페이지에 노출된 메뉴를 중심으로 보여주되 직관적으로 내용을 알 수 있도록 게시글을 노출시켰습 니다. 하단에 위치하던 주요서비스를 우선순위를 두어 정보 설계를 한 후 사용자의 UI를 고려하여 아이콘으로 리 디자인하였으며, 서울대학교가 강조하고자 하는 학교의 인재상을 이미지와 함께 메세지로 전달하였습니다.

5. 컨텐츠 2단 - 서울대뉴스 / 홍보동영상서울대에서 진행 중인 여러 뉴스들을 이미지와 타이틀 및 상세 게시글을 일부 보여주어 메세지 전달이 용이하도 록 하였습니다. 서브페이지에 있던 홍보동영상을 이용률이 높은 예비 서울대인을 위해 노출했습니다.

6. 컨텐츠 3단 - SNS / 연구소개서울대에서 활발하게 일어나는 현황을 SNS를 통해 보여주어 다양한 서울대학교를 표현하고자 하였습니다. 연 구를 중심으로 뻗어나가는 서울대이므로 성과를 보여주어 브랜드 이미지를 강화하였습니다.

학교소개 페이지

9. 리뉴얼�사이트�디자인 - About Sub



서브 내비게이션이 펼쳐진 상태로 고정됨으로써 현재 페이지 위치를 알 수 있고, 3depth까지 펼쳐 지는 메뉴로 사용성을 높였습니다.

메인 페이지와 통일성을 이루는 부분으로 상단에 넓은 영역으로 이미지와 타이포그래피를 통해 서울대학교의 비전을 보여줍니다.

비전의 일부분을 아이콘화시켜 사용자가 쉽게 이 해할 수 있도록 하였습니다. 또한 표현기법에 통일 성을 주어 연속적인 느낌을 줍니다.

역사가 깊은 서울대학교의 과거 이미지를 적극적 으로 노출시켜 위상을 강조하며, 브랜드의 신뢰도 를 높이는 역할을 합니다.

현재 어느 페이지에 있는지 유틸 메뉴로 확인할 수 있습니다. 픽토그램과 글을 함께 활용하여 직관성 을 높였습니다.

컨텐츠와 관련된 이미지를 적극적으로 활용하여 시각적인 이해도를 높이고 메세지 전달을 효율적 으로 합니다.

연대기가 필요한 역사 부분을 탭으로 간략화하여 노출함으로써 사용자가 선택적으로 원하는 정보 에 접근할 수 있도록 합니다.

메인 페이지와 이어지는 푸터로, 교육관련 사이트 및 학교 관련 사이트를 지속적으로 노출시켜 해당 페이지와의 이동이 용이하도록 돕습니다.

고정�서브�내비게이션

비주얼�영역

아이콘�활용

시각적�자료�활용

유틸�메뉴

관련�이미지�활용

탭�배너�활용

푸터

교육과정 소개페이지

이미지 게시판 페이지




게시물을 관련된 이미지로 함께 노출시킴으로써 사용자가 직관적으로 내용을 유추할 수 있고 미리 메세지를 확인할 수 있도록 합니다.

관련 대학을 상징하는 오브젝트들을 조합하여 아 이콘으로 표현하여 사용자의 UI를 고려하였으며, 롤링되는 배너로 많은 정보 전달에 용이합니다.

해당 교육과정을 카드 디자인 형태로 보여주어 과 정의 속성에 부합하며 정보 전달에 용이한 형태로 보여줍니다.

페이지 하단에 검색 기능을 추가하여 원하는 게시 물을 선택적으로 확인할 수 있도록 하였습니다. 컬 러 또한 통일하여 안정감을 줍니다.

이미지�활용

아이콘�활용

카드�디자인

검색�기능



각 메뉴마다 내용에 적합한 형태로 픽토그램을 달 리 적용하여 항목에 대한 사용자의 이해도를 높이 며 명확한 정보 분류를 도와줍니다.

회원가입의 각 단계를 알려주는 탭 형식을 사용하 여 현재 진행 단계를 알 수 있도록 도와줍니다. 또한 픽토그램을 활용하여 사용자의 UI를 고려합니다.

픽토그램�활용

컬러�변화

선택�폼�이용

버튼�강조

탭�메뉴�사용

e-mail : [email protected]. 2. 02 - 2016. 03. 04 사이트맵 페이지 회원가입 페이지

회원별 다른 정보가 필요하고 이용됨에 따라 카테 고리를 분류하여 미리 선택할 수 있도록 정보 설계 를 다시 하였습니다.

동의 항목을 나타내는 메세지의 컬러 변화를 주어 시각적인 인지를 높이며 중요성을 부각합니다.

회원가입의 진행을 수월하게 도울 수 있도록 기존 의 버튼에 컬러 변화를 주어 선택에 용이하도록 하 였습니다.



PROJECT PUBLISHING제 손으로 직접 코딩을 하면서 프로젝트 웹사이트를 구현시켰습니다! 처음에는 웹표준의 웹도 몰랐지만 하나씩 시도해 보면서 겪어가며 만들어 본 제 처음 웹사이트였습니다. 디자인부터 셋 팅까지 해보면서 정말 많은 것을 느꼈습니다. 셋팅을 고려하지 않고 디자인을 진행한 부분들이 많아서 구현하는 도중 어려움도 많이 겪었지만 깨달은 것이 더 많았습니다. 직접 셋팅을 해본 것은 웹이라는 것을 실질적으로 더 잘 파악할 수 있는 계기가 되었고, 이로 인해 각 디자인에 필 요한 요소들이 왜 중요한지 알 수 있었습니다! 그리고 더욱 중요한 것은 구동 후 사용해 봄으로 써 사용자들의 UI/UX를 더욱 고려해야 한다는 점이었습니다! 디자인을 할 때에는 당연하다고 여겼던 부분이 사용자들에게는 불편하게 느껴질 수 있다는 점을 알았기 때문입니다. 어렵고 힘 든 부분이었지만 그만큼 완성하고나니 많은 보람을 느끼며 뿌듯함을 느낀 과정이었습니다!


Marketing

UI/UX기존의 서울대학교 웹사이트는 숨겨진 많은 컨텐츠가 많아서 메인 페이지로 많이 노출시키려 노력했습니다. 또한 사용자들이 직관적으로 이해하기 쉽도록 이미지와 아이콘, 타이포그래피를 통해 메세지 전달을 노력함으로써 사용에 대 한 편리성이 증가할 것입니다.

BRANDING서울대학교를 기존의 브랜드가 가진 느낌에서 벗어나 세련되게 표현하려 노력했 습니다. 이로 인해 트렌디하고 이지적인 인상을 주며 서울대학교에 대한 고유의 아이덴티티가 부각될 것입니다. 또한 다양한 컨텐츠로 인해 서울대의 다각적인 모습을 노출시킴으로써 변화된 이미지를 어필할 수 있을 것입니다.

많은 학생을 받음으로써 수익이 창출되는 학교의 특성상 사용자의 접근이 늘어 나 서울대학교에 대한 관심도가 올라가 입학을 원하는 사람들이 많아질 것입니 다. 또한 수익으로 인해 교육의 퀄리티가 향상됨으로 인해 서울대학교가 목표하 는 세계 대학 순위 또한 증가할 수 있을 것입니다.

10. 리뉴얼�사이트에�대한�결과�예측


EPILOGUE



웹사이트를 처음부터 끝까지 제 손으로 직접 만들어 본다는 것은 흥분되는 경험이었습니다! 항상 사용자의 입장에 서만 접해 보았던 웹을 하나하나 섬세하게 만들어가는 느낌이란! 마치 아이의 여러 부분이 제 손으로 창조되어가 는 엄마의 마음이 되는 것 같았습니다! 여러 페이지들을 디자인하고 셋팅을 하고 나니 어느새 아이가 훌쩍 자라서 뛰어다니는 것을 보는 엄마 미소가 절로 지어졌던 것 같습니다. 항상 과정은 힘들지만 마지막의 뿌듯함과 그 상쾌 함을 위해 몇날 몇일이고 밤을 새가면서 작업을 하는 것 같습니다! 언젠가 정말 제가 만든 디자인이 디비컷에 올라 올 그 날을 기대하며 만들어 본 저의 첫 웹페이지 디자인은 흥분, 짜릿함 그 자체였습니다!

EXPERIENCE내�손으로�직접�웹사이트를�만들고 구동시켜�본다는�것

메인 페이지가 아닌 여러 서브 페이지들을 모두 디자인 해본다는 것은 생각했던 것보다 즐거운 일이었습니다! 처 음에는 페이지 간의 연결성을 고려하지 못하고 이것저것 말도 안되는 레이아웃과 구성만을 고려했었는데, 점차 페 이지를 진행하다보니 중요한 부분들을 깨달아가며 작업했던 것 같습니다. 특히 가장 많이 배운 것은 통일과 변화! 디자인은 조화가 중요한 것이라 생각하여 통일성만을 많이 생각했었는데 그 사이에서도 변화를 줌으로써 디자인 에 생동감을 주고 오히려 개성을 더해준다는 것을 깨달았습니다! 그리고 처음 접해보는 일반적인 디자인에 대해 접근하는 방법을 배웠습니다! 무엇보다 편집디자인을 배울 수 있어서 많은 경험치가 쌓인 것 같습니다!

LEARNING프로젝트를�통해�배우고�느끼고깨달은�많은�것들

seoulnational university web site renewalprojecthongsi.x-y.net/2016_d14/oej_c/pdf/process_1.pdf ·...

Documents