국립�서울대학교�웹사이트�리뉴얼�프로젝트 프로젝트�작업과정�안내 SEOUL NATIONAL UNIVERSITY WEBSITE RENEWAL PROJECT e-mail : [email protected]2016. 02. 02 - 2016. 03. 04 INDEX 1. 서울대학교�브랜드�파악 2. 서울대학교 SWOT 분석 3. 서울대학교�웹사이트�분석 4. 클라이언트�요구사항�분석 5. 경쟁사�분석 6. 우수사�분석 7. 분석을�통한�컨셉�및�전략�도출 8. 스타일�가이드 9. 리뉴얼�사이트�디자인 10. 리뉴얼�결과�예측 SEOUL NATIONAL UNIVERSITY 서울대학교�웹사이트�리뉴얼�프로젝트 WEB SITE RENEWAL PROJECT
22
Embed
SEOULNATIONAL UNIVERSITY WEB SITE RENEWALPROJECThongsi.x-y.net/2016_d14/oej_c/pdf/process_1.pdf · 2. 서울대학교 SWOT 분석 서울대의 강점 프로젝트 작업과정 안내
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
국립
�서울
대학
교�웹
사이
트�리
뉴얼
�프로
젝트
프로
젝트
�작업
과정
�안내 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. 경쟁사�분석
서울대학교는 대한민국의 국립대학법인으로, 서울대 혹은 SN U라고 불립니다.1895년 고종에 의해 설립된 법관양성소를 기 원으로 하여 1946년에 공포된 법령에 따라 경성대학을 중심으 로 여러 전문학교들이 통합되어 만들어진 대한민국 최초의 국 립 종합 대학입니다. 1948년 서울대학교로 명칭이 바뀐 후, 201 1년에는 국립대학법인으로 전환되었습니다. 법인화로 전환된 이후 치러진 첫 간선제 총장 선거에서는 제 26대 총장으로 성낙 인이 선출되어 현재 재임 중입니다.서울대는 9개의 단과대학, 1개의 대학원으로 출발하여 현재 16개의 단과 대학, 일반대학원 및 10개의 전문대학원으로 확장되 었습니다. 단과대학들은 곳곳에 나뉘어 있었으나 종합화 계획 을 토대로 관악, 연건, 평창캠퍼스로 이전 및 통합하였습니다.대학수학능력시험의 수석들이 주로 서울대에 입학할 정도로 국내에서 높은 위상을 보유하며, 세계 대학 평가 순위에서도 빠 르게 상승하는 등 세계적으로 도약을 준비하고 있습니다.
대한민국 최초의 국립종합대학으로 개 교 70주년으로 깊은 역사를 갖고 있습 니다 선한인재를 인재상으로 학문적 기 반을 지원하는 프로그램이 있으며, 꾸준 하고 창의적인 융복합 연구로 세계적인 성과를 창출합니다. 글로벌 네트워크를 구축하는 등 국제화 사업을 통해 활발하 게 세계와 교류하고 세계대학평가 순위 에서 상위권 자치하고 있습니다.
서울대의�약점친근함 보다는 딱딱하고 정적이며 공부 에만 전념하는 것 같은 첫인상이 있습니 다. 일반적으로 이성적이고 차가운 느낌 을 주며, 창의적 인재상에 걸맞는 크리에 이티브한 인상이 부족합니다. 학문적 외 다양한 활동을 하고 있음에도 대중에 어 필되는 측면이 적고, 국내 1위라는 명성 외 서울대의 독자 적인 향후 목표에 대한 홍보가 부족가 부족한 편입니다.ST
RENG
THW
EEKNESS
서울대의�위협서울대학교는 국내 교육에서는 부동의 1 위를 유지하고 있지만 한국이라는 나라 의 세계적 인식 부족으로 인해 이러한 점 이 시장에서의 위협이 될 수 있습니다. 하지만 점차 인지도가 올라가고 있 는 한 국의 위상을 발판 삼고 세계적으로 혁신 적인 연구를 보여줌으로써 서울대학교 자체의 위신을 부각시킬 수 있는 방법을 강구해야 할 것입니다.
TH
REAT
서울대의�기회서울대학교는 세계 대학 순위에서 빠르 게 순위가 올라가고 있습니다. 아시아에 서는 10위 내를 유지하고 있으며, 세계적 으로는 50위 안으로 발돋움하는 등 약진 하는 것을 기회로 삼아 더욱 추진력있게 나아가는 것이 중요할 것 같습니다. 국내 의 위상은 확보된 바 있으므로 이제 글로 벌로 나아가는 서울대학교의 목표를 전 면에 내세워 강조해야 할 것입니다.OP
클라이언트가 요구한 가장 중요한 사안으로, 서울 대가 가지고 있는 명실상부한 국내 최고의 대학교 라는 이미지를 다시 한 번 환기시켜 대중에게 각인 시키기 위해 비주얼화합니다. 또한 세계적으로 발 돋움하는 모습을 주목성 높은 전면에 내세워 직
간접적으로 노출시키고자 합니다.
1국내 1위�대학교의�위상과�세계�속의�서
울대를�보여�줄�것미래 서울대가 나아가고자 하는 방향을 표현하기 위해 학교의 장기목표, 단기목표, 인재상, 현재 목표 달성 상태 등을 파악합니다. 이를 사용자에게 다각 적인 측면으로 전달할 수 있도록 여러 가지 컨텐츠 를 활용하여 제공하도록 하면서 직관적인 이해를
도울 수 있도록 정보를 가시화합니다.
2미래�서울대학교가�나가아가야�할�방향
을�제시할�것서울대학교 웹사이트를 주로 이용하는 타겟층을 파악하고, 각 타겟층 별로 자주 이용하는 메뉴들을 정보 분류합니다. 타겟층이 쉽게 접근할 수 있도록 타겟층의 분류명을 직관적으로 전달하고 상단으 로 위치시켜 접근성을 높입니다. 또한 타겟층들의 원츠와 니즈를 파악한 컨텐츠 설계를 추가합니다.
3타겟을�위한�유용한�컨텐츠를�제안하고
정보�설계를�할�것기존의 대학교들에서 보여지는 인덱스 방식의 초 기 화면 구성에서 탈피하여 많은 정보를 다각적으 로 전달하는 방식을 고려합니다. 또한 많은 정보들 속에서 원하는 방향으로의 접근을 용이하게 만들 기 위해 지속적으로 내비게이션을 노출하는 등 디
서울대학교의 신뢰도 높고 퀄리티 높은 많은 컨텐츠들이 서브 페이지 내부에 감춰져 있고, 특히 메인에 노출 된 컨텐츠 또한 어느 카테고리의 게시물인지 정보 분류가 명확하지 않아 사용자들이 원하는 정보를 쉽게 찾 기 어려웠습니다. 또한 서울대의 아이덴티티가 분명하게 보여지지 않는 점이 아쉽게 느껴졌습니다.
WHY왜�서울대학교�웹사이트가�리뉴얼이�필요한걸까?
클라이언트의 미션들을 분석한 결과, 서울대가 가지고 있는 고유의 목적성과 방향성을 보여줌과 동시에 다양 한 타겟층을 고려한 컨텐츠들이 필요하다는 점을 강조한 것 같습니다. 또한 다른 대학교들이 보여주는 트렌 드를 반영하면서도 디자인적인 차별화를 통해 브랜드 아이덴티티를 노출시키고자 한 것 같습니다.
왜�클라이언트가�이러한�미션을�주었을까?
서울대학교 웹사이트 리뉴얼에서 가장 중요한 점은 브랜드의 아이덴티티를 최대한으로 노출시키며 기존에 보유한 컨텐츠들을 메인에 노출시켜 사용자들의 흥미를 촉구해야 한다는 점이었습니다. 또한 다양한 타겟층 모두를 만족시킬 수 있는 정보들을 설계하고 차별화되면서도 감각적인 룩앤필이 필요하다 생각했습니다.
어떤�방향으로�웹사이트�리뉴얼을�진행해야�할까?
서울대의 국내외적인 위상을 표출함으로써 더욱 많은 사람들이 관심을 갖고 입학을 고려할 것입니다. 사용 자들을 고려한 컨텐츠를 통해 정보에 대한 손쉬운 접근을 하여 웹사이트에 머무르는 시간이 늘어나 서울대 의 브랜드파워가 향상될 것이며 브랜드를 통한 수익 창출을 기대할 수 있습니다.
서울대가 향후 목표로 하고 나아가고자 하는 방향을 컨셉으로 잡아 리뉴얼을 계획하였습니다. 국내 최고의 대학교 인 서울대학교는 앞으로 2020년까지 세계 대학 순위 20위 내로 진입을 목표로 하고 있으며, 현재에도 빠른 순위 향 상을 보여주는 등 국내를 넘어 세계로 나아가고자 하는 서울대의 목표를 직관적으로 제시하고자 하였습니다. 또한 이를 통해 서울대의 국제적인 위상을 다각적인 컨텐츠와 이미지 및 타이포로 노출시켜 브랜딩하고자 하였습니다.
CONCEPT세계로�나아가는대한민국�최고의�대학교
국내를 넘어 세계로 나아가고자 하는 서울대의 목표 및 발전 방향을 적극적으로 노출시키기 위해 고화질의 이미지 를 다양하게 활용하고자 합니다. 동시에 서울대를 상징하는 건축물 들을 적절하게 어필함으로써 고유의 아이덴티 티를 놓치지 않으려 노력했습니다. 웹사이트를 접근하는 다양한 타겟층의 원츠와 니즈를 고려하여 필요할 항목들 을 추가적으로 분류하여 접근성을 높이며, 이를 위한 컨텐츠를 추가적으로 노출하고자 합니다.
서울대학교에서는 지정된 고유색과 연관된 푸른톤을 적절히히 이용하여 컬러를 활용하고 있습니다. 이를 반영하여 포인트 컬러로 푸른색의 컬러를 사용하면서 차분하고 강렬하면서도 이지적인 서울대의 이미지를 어필하고자 푸른 톤이 가미된 무채색 컬러들을 활용하였습니다.
목적기존의 웹사이트에서 사용된 푸른톤이 많이 적용된 컬러에서 조금 벗어나 회색톤을 적절히 사용하여 서울대가 가진 차 분한 느낌을 더하며 트렌디하고 감각적인 느낌을 주고자 하였습니다. 포인트 컬러의 푸른색을 밝게 조정함으로써 창의 적인 인재상을 대변하여 활동성을 더해줌으로써 서울대가 가진 기존의 딱딱한 인식에서 탈피할 수 있을 것입니다.
한화에너지 리뉴얼에 제작설제작된 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
좌측 내비게이션을 사용하여 세 로로 스크롤을 이동하였을 때에 도 페이지 간 이동이 용이하도록 하였습니다. 내비게이션으로 인 해 좁아지는 컨텐츠 영역을 넓게 사용하기 위해 반응형 웹 구동을 고려하여 디자인하였고, 메인 비 주얼을 시원하게 사용하여 브랜 드의 아이덴티티를 노출시켰습 니다. 컨텐츠를 박스로 구성하여 자연스러운 반응이 가능하도록 하였습니다. 또한 복합형 포털 구 조를 통해 사용자들이 정보를 쉽 게 접근할 수 있도록 하였습니다.
메인과의 통일성을 위해 상단에 넓 은 영역으로 비주얼단을 강조하였 고, 컨텐츠 영역에 이미지를 적극 활용하여 사용자가 직관적으로 이 해하기 쉽도록 구성하였습니다.
7. 푸터 - 교내주요사이트 / 학교관련사이트펼쳐진 형태의 푸터에 구성된 내용들을 접을 수 있는 푸터로 구성하여 타겟층에 따라 불필요할 수 있는 영역을 최 소화시켰습니다.
1. 글로벌 네비게이션 - 좌측 네비게이션좌측 내비게이션을 통해 페이지 간 이동의 효율성을 높였으며, 아이덴티티 컬러를 노출하여 브랜드를 강조하였 습니다. 검색바 및 SNS 등의 버튼을 위치시켜 사용 상의 편의성을 고려하였습니다.
2. 메인비주얼 - 4장의 브랜드 관련 이미지 롤링서울대학교의 위상과 목표 방향 등 아이덴티티를 이미지와 타이포그래피로 강조하여 표현하였습니다. 4장의 이 미지를 통해 서울대가 보여주는 다양한 모습을 보여주고자 하였습니다.
3. 퀵서비스 - 타겟층 분류 서비스웹사이트에 접근하는 타겟층을 세분화시켜 각 대상 별로 자주 사용하는 페이지를 카테고리화시켰습니다. 묶는 기준은 다른 대학교들의 타겟층 서비스를 참고하여 분류하였습니다.
4. 컨텐츠 1단 - 학교소개 / 공지사항 / 입학뉴스 / 행사안내 / 주요서비스기존의 메인페이지에 노출된 메뉴를 중심으로 보여주되 직관적으로 내용을 알 수 있도록 게시글을 노출시켰습 니다. 하단에 위치하던 주요서비스를 우선순위를 두어 정보 설계를 한 후 사용자의 UI를 고려하여 아이콘으로 리 디자인하였으며, 서울대학교가 강조하고자 하는 학교의 인재상을 이미지와 함께 메세지로 전달하였습니다.
5. 컨텐츠 2단 - 서울대뉴스 / 홍보동영상서울대에서 진행 중인 여러 뉴스들을 이미지와 타이틀 및 상세 게시글을 일부 보여주어 메세지 전달이 용이하도 록 하였습니다. 서브페이지에 있던 홍보동영상을 이용률이 높은 예비 서울대인을 위해 노출했습니다.
6. 컨텐츠 3단 - SNS / 연구소개서울대에서 활발하게 일어나는 현황을 SNS를 통해 보여주어 다양한 서울대학교를 표현하고자 하였습니다. 연 구를 중심으로 뻗어나가는 서울대이므로 성과를 보여주어 브랜드 이미지를 강화하였습니다.
PROJECT PUBLISHING제 손으로 직접 코딩을 하면서 프로젝트 웹사이트를 구현시켰습니다! 처음에는 웹표준의 웹도 몰랐지만 하나씩 시도해 보면서 겪어가며 만들어 본 제 처음 웹사이트였습니다. 디자인부터 셋 팅까지 해보면서 정말 많은 것을 느꼈습니다. 셋팅을 고려하지 않고 디자인을 진행한 부분들이 많아서 구현하는 도중 어려움도 많이 겪었지만 깨달은 것이 더 많았습니다. 직접 셋팅을 해본 것은 웹이라는 것을 실질적으로 더 잘 파악할 수 있는 계기가 되었고, 이로 인해 각 디자인에 필 요한 요소들이 왜 중요한지 알 수 있었습니다! 그리고 더욱 중요한 것은 구동 후 사용해 봄으로 써 사용자들의 UI/UX를 더욱 고려해야 한다는 점이었습니다! 디자인을 할 때에는 당연하다고 여겼던 부분이 사용자들에게는 불편하게 느껴질 수 있다는 점을 알았기 때문입니다. 어렵고 힘 든 부분이었지만 그만큼 완성하고나니 많은 보람을 느끼며 뿌듯함을 느낀 과정이었습니다!
UI/UX기존의 서울대학교 웹사이트는 숨겨진 많은 컨텐츠가 많아서 메인 페이지로 많이 노출시키려 노력했습니다. 또한 사용자들이 직관적으로 이해하기 쉽도록 이미지와 아이콘, 타이포그래피를 통해 메세지 전달을 노력함으로써 사용에 대 한 편리성이 증가할 것입니다.
BRANDING서울대학교를 기존의 브랜드가 가진 느낌에서 벗어나 세련되게 표현하려 노력했 습니다. 이로 인해 트렌디하고 이지적인 인상을 주며 서울대학교에 대한 고유의 아이덴티티가 부각될 것입니다. 또한 다양한 컨텐츠로 인해 서울대의 다각적인 모습을 노출시킴으로써 변화된 이미지를 어필할 수 있을 것입니다.
많은 학생을 받음으로써 수익이 창출되는 학교의 특성상 사용자의 접근이 늘어 나 서울대학교에 대한 관심도가 올라가 입학을 원하는 사람들이 많아질 것입니 다. 또한 수익으로 인해 교육의 퀄리티가 향상됨으로 인해 서울대학교가 목표하 는 세계 대학 순위 또한 증가할 수 있을 것입니다.
웹사이트를 처음부터 끝까지 제 손으로 직접 만들어 본다는 것은 흥분되는 경험이었습니다! 항상 사용자의 입장에 서만 접해 보았던 웹을 하나하나 섬세하게 만들어가는 느낌이란! 마치 아이의 여러 부분이 제 손으로 창조되어가 는 엄마의 마음이 되는 것 같았습니다! 여러 페이지들을 디자인하고 셋팅을 하고 나니 어느새 아이가 훌쩍 자라서 뛰어다니는 것을 보는 엄마 미소가 절로 지어졌던 것 같습니다. 항상 과정은 힘들지만 마지막의 뿌듯함과 그 상쾌 함을 위해 몇날 몇일이고 밤을 새가면서 작업을 하는 것 같습니다! 언젠가 정말 제가 만든 디자인이 디비컷에 올라 올 그 날을 기대하며 만들어 본 저의 첫 웹페이지 디자인은 흥분, 짜릿함 그 자체였습니다!
EXPERIENCE내�손으로�직접�웹사이트를�만들고 구동시켜�본다는�것
메인 페이지가 아닌 여러 서브 페이지들을 모두 디자인 해본다는 것은 생각했던 것보다 즐거운 일이었습니다! 처 음에는 페이지 간의 연결성을 고려하지 못하고 이것저것 말도 안되는 레이아웃과 구성만을 고려했었는데, 점차 페 이지를 진행하다보니 중요한 부분들을 깨달아가며 작업했던 것 같습니다. 특히 가장 많이 배운 것은 통일과 변화! 디자인은 조화가 중요한 것이라 생각하여 통일성만을 많이 생각했었는데 그 사이에서도 변화를 줌으로써 디자인 에 생동감을 주고 오히려 개성을 더해준다는 것을 깨달았습니다! 그리고 처음 접해보는 일반적인 디자인에 대해 접근하는 방법을 배웠습니다! 무엇보다 편집디자인을 배울 수 있어서 많은 경험치가 쌓인 것 같습니다!