_오은주_개인사이트3_포트폴리오1_PDF_6차

Similar documents
coinone_brand_guide_(KOR) 복사본

<5B DB1B3C0B0C0DAB8A65FC0A7C7D15FB5F0C0DAC0CEBBE7B0ED5FC5F8C5B62E706466>

mobile_guide_SA

View Licenses and Services (customer)

소규모 비즈니스를 위한 플레이북 여기서 다룰 내용은 다음과 같습니다. 1. YouTube 소개 2. YouTube에서 비즈니스를 위한 채널 만들기 3. 눈길을 끄는 동영상 만들기 4. 고객의 액션 유도하기 5. 비즈니스에 중요한 잠재고객에게 더 많이 도달하기

<C3E6B3B2B1B3C0B C8A32DC5BEC0E7BFEB28C0DBB0D4292D332E706466>

슬라이드 1

STARFIELD BRAND IDENTITY DESIGN GUIDELINES 2

UI VoC Process 안

1809_2018-BESPINGLOBAL_Design Guidelines_out

슬라이드 1

Print

SIGIL 완벽입문

슬라이드 1

내지무인화_

2002report hwp

다른 JSP 페이지호출 forward() 메서드 - 하나의 JSP 페이지실행이끝나고다른 JSP 페이지를호출할때사용한다. 예 ) <% RequestDispatcher dispatcher = request.getrequestdispatcher(" 실행할페이지.jsp");

±³À°È°µ¿Áö

마켓온_제품소개서_ key

2

레이아웃 1

A 목차

저작자표시 - 비영리 - 변경금지 2.0 대한민국 이용자는아래의조건을따르는경우에한하여자유롭게 이저작물을복제, 배포, 전송, 전시, 공연및방송할수있습니다. 다음과같은조건을따라야합니다 : 저작자표시. 귀하는원저작자를표시하여야합니다. 비영리. 귀하는이저작물을영리목적으로이용할

슬라이드 1

용자들_MKT_Proposal_201504_V6.pptx

PowerPoint Template

1

¾ç¼ºÄÀ-2

Print

B2B 매뉴얼

coverbacktong최종spread

아이콘의 정의 본 사용자 설명서에서는 다음 아이콘을 사용합니다. 참고 참고는 발생할 수 있는 상황에 대처하는 방법을 알려 주거나 다른 기능과 함께 작동하는 방법에 대한 요령을 제공합니다. 상표 Brother 로고는 Brother Industries, Ltd.의 등록 상

Studuino소프트웨어 설치

C스토어 사용자 매뉴얼

Microsoft PowerPoint _사용자매뉴얼.ppt

사용자/단말

CR hwp

PathEye 공식 블로그 다운로드 받으세요!! 지속적으로 업그래이드 됩니다. 여러분의 의견을 주시면 개발에 반영하겠 습니다.

Microsoft Word - Armjtag_문서1.doc

회사이미지매뉴얼


ÆÞ¹÷-Æîħ¸é.PDF

제 31회 전국 고교생 문예백일장 산문 부문 심사평.hwp

PowerPoint 프레젠테이션

wtu05_ÃÖÁ¾

PowerPoint 프레젠테이션

고등 교육 기회의 확대와 교육의 질 향상 1 사이버대학 최초의 공학교육 실현! 졸업이수학점 조정과 시간제 폐지 전기전자공학과ㆍ기계제어공학과 신설과 2 고려사이버대학교는 2015학년도부터 졸업이수학점을 132 가상실험실(Virtual Lab) 학점으로 조정하여 이를 통해

PowerPoint 프레젠테이션

? : 6, 7 8 9, 10, ,, Adobe Marketing Cloud

Windows 8에서 BioStar 1 설치하기

저작자표시 - 비영리 - 변경금지 2.0 대한민국 이용자는아래의조건을따르는경우에한하여자유롭게 이저작물을복제, 배포, 전송, 전시, 공연및방송할수있습니다. 다음과같은조건을따라야합니다 : 저작자표시. 귀하는원저작자를표시하여야합니다. 비영리. 귀하는이저작물을영리목적으로이용할

Grundfos 25주년 기념 행사영상 제안서 by M2e Mediaworks

핵 1 학년 2 학년 3 학년합계 문학과예술 역사와철학 사회와이념 선택 학점계 학년 2 학년 3 학년합계비고 14 (15) 13 (14) 27 (29) 2

»êÇÐ-150È£


Web Scraper in 30 Minutes 강철

2 국어 영역(A 형). 다음 대화에서 석기 에게 해 줄 말로 적절한 것은? 세워 역도 꿈나무들을 체계적으로 키우는 일을 할 예정 입니다. 주석 : 석기야, 너 오늘따라 기분이 좋아 보인다. 무슨 좋은 일 있니? 석기 : 응, 드디어 내일 어머니께서 스마트폰 사라고 돈

Microsoft PowerPoint - chap02-C프로그램시작하기.pptx

ISP and CodeVisionAVR C Compiler.hwp

게임 기획서 표준양식 연구보고서

ITFGc03ÖÁ¾š

Microsoft PowerPoint - chap01-C언어개요.pptx

1

01정책백서목차(1~18)

카카오네이티브광고_ver1.6

서현수

Best of the Best Benchmark Adobe Digital Index | APAC | 2015

국어 순화의 역사와 전망

Project Proposal 서비스 소개서 written by OPINNO

Microsoft 을 열면 깔끔한 사용자 중심의 메뉴 및 레이아웃이 제일 먼저 눈에 띕니다. 또한 은 스마트폰, 테블릿 및 클라우드는 물론 가 설치되어 있지 않은 PC 에서도 사용할 수 있습니다. 따라서 장소와 디바이스에 관계 없이 언제, 어디서나 문서를 확인하고 편집

목차 윈도우드라이버 1. 매뉴얼안내 운영체제 (OS) 환경 윈도우드라이버준비 윈도우드라이버설치 Windows XP/Server 2003 에서설치 Serial 또는 Parallel 포트의경우.

W7_Business_ 제품설계

Yellow Lamper_total brand_

경우 1) 80GB( 원본 ) => 2TB( 복사본 ), 원본 80GB 는 MBR 로디스크초기화하고 NTFS 로포맷한경우 복사본 HDD 도 MBR 로디스크초기화되고 80GB 만큼포맷되고나머지영역 (80GB~ 나머지부분 ) 은할당되지않음 으로나온다. A. Window P

학점배분구조표(표 1-20)

서울대소식지574호 수정

Microsoft Outlook G Suite 가이드

CC hwp

Artificial Intelligence: Assignment 6 Seung-Hoon Na December 15, Sarsa와 Q-learning Windy Gridworld Windy Gridworld의 원문은 다음 Sutton 교재의 연습문제

기본소득문답2



IP Cam DDNS 설정설명서(MJPEG) hwp


1-1Çؼ³

750 1,500 35

i4uNETWORKS_CompanyBrief_ key

슬라이드 1

PowerPoint 프레젠테이션

<B1B3C0B0BFACB1B8C1A4BAB8BFF820BBF3B4E3BBE7B7CAC1FD5FBCBCBFF828312E39292E687770>

BuzzAd Optimizer Proposal for partner 1

Index

3. 다음은카르노맵의표이다. 논리식을간략화한것은? < 나 > 4. 다음카르노맵을간략화시킨결과는? < >

<BEE7B0ADC1DFC7D0B1B32DB1B3C0B0B0E8C8B9BCAD2E687770>

< C617720BBF3B4E3BBE7B7CAC1FD20C1A632B1C72E687770>

H-eBook소개서.indd


Company

<B3EDB9AEC0DBBCBAB9FD2E687770>

SM710월가격표9.30

Transcription:

SEOUL NATIONAL UNIVERSITY WEBSITE RENEWAL PROJECT SEOUL NATIONAL UNIVERSITY WEB SITE RENEWAL PROJECT 1. 서울대학교 브랜드 파악 2. 서울대학교 SWOT 분석 3. 서울대학교 웹사이트 분석 4. 클라이언트 요구사항 분석 5. 경쟁사 분석 서울대학교 웹사이트 리뉴얼 프로젝트 6. 우수사 분석 7. 분석을 통한 컨셉 및 전략 도출 8. 스타일 가이드 9. 리뉴얼 사이트 디자인 10. 리뉴얼 결과 예측 INDEX

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

2. 서울대학교 SWOT 분석 STRENGTH 서울대의 강점 대한민국최초의국립종합대학으로개교 70주년으로깊은역사를갖고있습니다선한인재를인재상으로학문적기반을지원하는프로그램이있으며, 꾸준하고창의적인융복합연구로세계적인성과를창출합니다. 글로벌네트워크를구축하는등국제화사업을통해활발하게세계와교류하고세계대학평가순위에서상위권자치하고있습니다. 서울대의 약점 친근함보다는딱딱하고정적이며공부에만전념하는것같은첫인상이있습니다. 일반적으로이성적이고차가운느낌을주며, 창의적인재상에걸맞는크리에이티브한인상이부족합니다. 학문적외다양한활동을하고있음에도대중에어필되는측면이적고, 국내 1 위라는명성외서울대의독자적인향후목표에대한홍보가부족가부족한편입니다. WEEKNESS OPPORTUNITY 서울대의 기회 서울대학교는세계대학순위에서빠르게순위가올라가고있습니다. 아시아에서는 10 위내를유지하고있으며, 세계적으로는 50 위안으로발돋움하는등약진하는것을기회로삼아더욱추진력있게나아가는것이중요할것같습니다. 국내의위상은확보된바있으므로이제글로벌로나아가는서울대학교의목표를전면에내세워강조해야할것입니다. 서울대의 위협 서울대학교는국내교육에서는부동의 1 위를유지하고있지만한국이라는나라의세계적인식부족으로인해이러한점이시장에서의위협이될수있습니다. 하지만점차인지도가올라가고있는한국의위상을발판삼고세계적으로혁신적인연구를보여줌으로써서울대학교자체의위신을부각시킬수있는방법을강구해야할것입니다. T H R E AT

3. 서울대학교 웹사이트 분석 글로벌 내비게이션 상단에위치한가로형내비게이션으로타이포로구성된메뉴항목들로표현하고있습니다. 검색바 상단내비게이션영역에검색바를위치시켜사용자가쉽게정보를탐색할수있도록하였습니다. 메인 비주얼 사용자에게많은메세지를전달할수있는메인비주얼영역에 4 장의고화질이미지를롤링시켜현재서울대의주요한뉴스를전달합니다. 서브 메뉴 컨텐츠영역으로접을수있는메뉴를제공하여교내주요게시판을노출하고있습니다. 컨텐츠 영역 이미지와간단한타이틀로게시물을표현하였고, 선택적으로 4 가지게시물을노출시켰습니다. 캠페인 컨텐츠 서울대에서진행중인기부성의캠페인을제목과배너형태로노출시키고있습니다. 푸터 영역 서울대학교와연관된웹사이트및주요서비스항목들을펼친형태로메인페이지하단에노출시켜사용자들이선택적으로접근하도록하였습니다. 푸터 개인정보처리방침, 이메일무단수집거부등기본적으로푸터에필요한정보들과함께강조하고접근을높일수있는컨텐츠들을노출시켰습니다. 서울대학교 기존 웹사이트

4. 클라이언트 요구사항 분석 1 2 3 4 국내 1 위 대학교의 위상과 세계 속의 서울대를 보여 줄 것 미래 서울대학교가 나가아가야 할 방향을 제시할 것 타겟을 위한 유용한 컨텐츠를 제안하고정보 설계를 할 것 다른 대학교들과 차별화된 디자인을 제시하여 보여줄 것 클라이언트가요구한가장중요한사안으로, 서울대가가지고있는명실상부한국내최고의대학교라는이미지를다시한번환기시켜대중에게각인시키기위해비주얼화합니다. 또한세계적으로발돋움하는모습을주목성높은전면에내세워직간접적으로노출시키고자합니다. 미래서울대가나아가고자하는방향을표현하기위해학교의장기목표, 단기목표, 인재상, 현재목표달성상태등을파악합니다. 이를사용자에게다각적인측면으로전달할수있도록여러가지컨텐츠를활용하여제공하도록하면서직관적인이해를도울수있도록정보를가시화합니다. 서울대학교웹사이트를주로이용하는타겟층을파악하고, 각타겟층별로자주이용하는메뉴들을정보분류합니다. 타겟층이쉽게접근할수있도록타겟층의분류명을직관적으로전달하고상단으로위치시켜접근성을높입니다. 또한타겟층들의원츠와니즈를파악한컨텐츠설계를추가합니다. 기존의대학교들에서보여지는인덱스방식의초기화면구성에서탈피하여많은정보를다각적으로전달하는방식을고려합니다. 또한많은정보들속에서원하는방향으로의접근을용이하게만들기위해지속적으로내비게이션을노출하는등디자인과사용성을동시에고려합니다.

5. 경쟁사 분석 KAIST ( 한국과학기술원 ) POSTEC ( 포항공과대학교 ) STRENGTH 이미지와타이포로전략노출자주찾는링크모음의편리성탭형식으로많은게시물노출다각적인컨텐츠구성 WEAKNESS 간략화된브랜드의목표방향글줄로표현된많은게시물브랜드고유의특징어필부족많은컨텐츠의불분명한카테고리 DIFFERENTIATION 학교의이미지전면활용다양한컨텐츠노출타겟층을고려한카테고리화검색기능의활용 STRENGTH 타겟층을고려한서비스메뉴이미지를함께활용한컨텐츠강점을비주얼영역에타이포로노출 SNS 를퀵서비스로지속적노출 WEAKNESS 메인비주얼의너무많은정보불분명한정보분류컨텐츠들의직관성부족긴글줄로표현된게시물 DIFFERENTIATION 많은정보를노출하는비주얼영역 SNS 의적극적인활용이미지를활용한메세지전달타겟층을고려한카테고리

5. 경쟁사 분석 HARVARD UNIVERSITY MASSACHUSETTS INSTITUTE OF TECHNOLOGY ( 하버드대학교 ) (MIT 공과대학교 ) STRENGTH 최상단타겟층네비게이션위치이미지, 미디어의다양한활용교지받아볼수있는폼컨텐츠 SNS 컨텐츠적극활용 WEAKNESS 카테고리별타이틀부재모호한정보분류메인비주얼의적은정보전달량직관성이부족한많은게시물 DIFFERENTIATION 타겟층을위한컨텐츠의주목성다양한미디어의활용교지를통한브랜드의홍보 SNS 컨텐츠적극적활용 STRENGTH 카테고리별검색기능한눈에많은정보볼수있음주목받는연구를전면에노출명확하게카테고리화된항목들 WEAKNESS 학교의전략 / 특성노출부족타이틀과하위메뉴통일성부족불분명한정보분류긴글줄로표현된게시물 DIFFERENTIATION 학교의특성을다르게접근한점한눈에파악할수있는페이지구성검색기능의다양화카테고리화된항목들

프로젝트 작업과정 안내 국립 서울대학교 웹사이트 리뉴얼 프로젝트 6. 우수사 분석 건강보험심사평가원 STRENGTH 스퀘어를 이용한 명확한 정보 분류 픽토그램을 활용한 메세지 전달 비주얼과 타이포의 균형 이미지를 활용한 컨텐츠 디자인 KCC WEAKNESS 컨텐츠 간의 강약 대비 부족 특정 컨텐츠 타이틀 부재 비주얼 이미지의 활용 부족 타겟층을 위한 서비스 미비 DIFFERENTIATION 명확하게 정보 분류된 컨텐츠 픽토그램을 이용한 UI 고려 스퀘어를 이용한 그리드감 비주얼을 활용한 디자인 구성 STRENGTH 사용성이 용이한 좌측 내비게이션 컬러 마케팅을 통한 아이덴티티 노출 넓은 영역의 메인 비주얼 포인트 컬러를 활용한 디자인 WEAKNESS UX에 익숙치 않은 우측 스크롤 버튼 및 항목들의 직관성 부족 비주얼 영역의 낮은 가독성 이미지의 메세지 전달 부족 DIFFERENTIATION 이동에 용이한 좌측 내비게이션 컬러를 통한 브랜딩 큰 영역을 통한 메세지 전달 신뢰를 주는 구성과 컬러

프로젝트 작업과정 안내 국립 서울대학교 웹사이트 리뉴얼 프로젝트 6. 우수사 분석 NAVER VENTURES (네이버 벤처스) TREPECTA STRENGTH 넓은 영역의 메인 비주얼 무채색 대비로 느껴지는 세련미 고화질 이미지가 주는 압도감 반응형 웹사이트일의 넓은 스케일 WEAKNESS 넓은 영역의 GNB가 주는 답답함 상품 정보의 노출 부족 브랜드의 직관적 메세지 부족 UX에 익숙치 않은 항목들 DIFFERENTIATION 넓게 사용한 비주얼 영역 반응형 웹사이트 활용 스케일감 고화질 이미지로 메세지 전달 세련되고 감각적인 룩앤필 STRENGTH 채도가 낮아 편안한 컬러 배색 친근한 이미지 활용한 브랜딩 고화질 이미지의 메인 비주얼 인포그래픽 형식 차용 WEAKNESS 브랜드 성격 직관적 노출 부족 메인에서 적은 컨텐츠 노출 컬러와 이미지의 대비 부족 네이버 브랜드의 활용 부족 DIFFERENTIATION 시각적으로 편안한 컬러 배색 친근한 이미지를 이용한 브랜딩 메인 비주얼의 고화질 이미지 그래픽 차용한 부가 설명

7. 분석을 통한 컨셉 및 전략 도출 WHY 왜 서울대학교 웹사이트가 리뉴얼이 필요한걸까? 서울대학교의신뢰도높고퀄리티높은많은컨텐츠들이서브페이지내부에감춰져있고, 특히메인에노출된컨텐츠또한어느카테고리의게시물인지정보분류가명확하지않아사용자들이원하는정보를쉽게찾기어려웠습니다. 또한서울대의아이덴티티가분명하게보여지지않는점이아쉽게느껴졌습니다. 왜 클라이언트가 이러한 미션을 주었을까? 클라이언트의미션들을분석한결과, 서울대가가지고있는고유의목적성과방향성을보여줌과동시에다양한타겟층을고려한컨텐츠들이필요하다는점을강조한것같습니다. 또한다른대학교들이보여주는트렌드를반영하면서도디자인적인차별화를통해브랜드아이덴티티를노출시키고자한것같습니다. R ES U LT 어떤 방향으로 웹사이트 리뉴얼을 진행해야 할까? 서울대학교웹사이트리뉴얼에서가장중요한점은브랜드의아이덴티티를최대한으로노출시키며기존에보유한컨텐츠들을메인에노출시켜사용자들의흥미를촉구해야한다는점이었습니다. 또한다양한타겟층모두를만족시킬수있는정보들을설계하고차별화되면서도감각적인룩앤필이필요하다생각했습니다. 웹사이트 리뉴얼로 어떤 결과가 발생할까? 서울대의국내외적인위상을표출함으로써더욱많은사람들이관심을갖고입학을고려할것입니다. 사용자들을고려한컨텐츠를통해정보에대한손쉬운접근을하여웹사이트에머무르는시간이늘어나서울대의브랜드파워가향상될것이며브랜드를통한수익창출을기대할수있습니다.

7. 분석을 통한 컨셉 및 전략 도출 CONCEPT 세계로 나아가는대한민국 최고의 대학교 서울대가향후목표로하고나아가고자하는방향을컨셉으로잡아리뉴얼을계획하였습니다. 국내최고의대학교인서울대학교는앞으로 2020 년까지세계대학순위 20 위내로진입을목표로하고있으며, 현재에도빠른순위향상을보여주는등국내를넘어세계로나아가고자하는서울대의목표를직관적으로제시하고자하였습니다. 또한이를통해서울대의국제적인위상을다각적인컨텐츠와이미지및타이포로노출시켜브랜딩하고자하였습니다. STRATEGY 세계로 발돋움하는 이미지 활용타겟을 고려한 편리한 사용성 부각 국내를넘어세계로나아가고자하는서울대의목표및발전방향을적극적으로노출시키기위해고화질의이미지를다양하게활용하고자합니다. 동시에서울대를상징하는건축물들을적절하게어필함으로써고유의아이덴티티를놓치지않으려노력했습니다. 웹사이트를접근하는다양한타겟층의원츠와니즈를고려하여필요할항목들을추가적으로분류하여접근성을높이며, 이를위한컨텐츠를추가적으로노출하고자합니다.

8. 스타일 가이드 COLOR SYSTEM 목적 서울대학교에서는지정된고유색과연관된푸른톤을적절히히이용하여컬러를활용하고있습니다. 이를반영하여포인트컬러로푸른색의컬러를사용하면서차분하고강렬하면서도이지적인서울대의이미지를어필하고자푸른톤이가미된무채색컬러들을활용하였습니다. 결과예측 기존의웹사이트에서사용된푸른톤이많이적용된컬러에서조금벗어나회색톤을적절히사용하여서울대가가진차분한느낌을더하며트렌디하고감각적인느낌을주고자하였습니다. 포인트컬러의푸른색을밝게조정함으로써창의적인인재상을대변하여활동성을더해줌으로써서울대가가진기존의딱딱한인식에서탈피할수있을것입니다. PRIMARY COLOR POINT COLOR ASSORT COLOR ASSORT COLOR COLOR CODE COLOR CODE COLOR CODE COLOR CODE #1e2730 R : 30 G : 39 B : 48 #007ac3 R : 0 G : 122 B : 195 #e3e6eb R : 227 G : 230 B : 235 #2c333b R : 44 G : 51 B : 59 COLOR TONES COLOR TONES COLOR TONES COLOR TONES 100 / 80 / 50 / 20 (%) 100 / 80 / 50 / 20 (%) 100 / 80 / 50 / 20 (%) 100 / 80 / 50 / 30 (%) THE GRADIENT Dark Gray THE GRADIENT Blue THE GRADIENT Light Gray THE GRADIENT Dark Gray

8. 스타일 가이드 TYPOGRAPHY SYSTEM 목적 한화에너지리뉴얼에제작설제작된 2.5D 시설이미지와프로세스영상으로써매다소어렵게느껴. 한화에너지리뉴얼에제작된 224.5D 시설설설이미지와프로세스영상으로써매다소어렵게느껴. 얼에제작된 224.5D 시설설설이미지와프로세스영상으로써매다소어렵게느껴. SEOUL NATIONAL UNIVERSITY 세계로 가는서울대학교 SEOUL UNIVERSITY 1946 / 10 KOREAN TYPOGRAPHY 본고딕 차분하고신뢰성이높은서울대학교라는브랜드에걸맞게곧은활자를선택하였고, 가독성이높은서체를이용하여사용자를고려하였습니다. Noto Sans KR - Bold Noto Sans KR - Light 가 나 다 라 마 바 사 아 자 차 카 타 파 하 가 나 다 라 마 바 사 아 자 차 카 타 파 하 ENGLISH TYPOGRAPHY 헬베티카 직관적으로핵심전달이용이한서체인헬베티카를사용하여서울대학교가주는확실한아이덴티티를표현하고, 영문을사용하였을때사용자의이해도를높이도록하였습니다. Helvetica - Bold Helvetica - Regular 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

8. 스타일 가이드 LAYOUT SYSTEM MAIN LAYOUT 좌측내비게이션을사용하여세로로스크롤을이동하였을때에도페이지간이동이용이하도록하였습니다. 내비게이션으로인해좁아지는컨텐츠영역을넓게사용하기위해반응형웹구동을고려하여디자인하였고, 메인비주얼을시원하게사용하여브랜드의아이덴티티를노출시켰습니다. 컨텐츠를박스로구성하여자연스러운반응이가능하도록하였습니다. 또한복합형포털구조를통해사용자들이정보를쉽게접근할수있도록하였습니다. SUB LAYOUT 메인과의통일성을위해상단에넓은영역으로비주얼단을강조하였고, 컨텐츠영역에이미지를적극활용하여사용자가직관적으로이해하기쉽도록구성하였습니다. 교육과정 / 학교소개게시판 / 사이트맵 / 회원가입 로고 / 메인비주얼좌측네비게이션 / 퀵서비스컨텐츠 1 단 /2 단 /3 단푸터

8. 스타일 가이드 ICONOGRAPHY SYSTEM 퀵서비스 타겟층에따라아이콘형태를제작하여통일과변화를주었습니다. 예비서울대인 / 재학생 / 교직원 / 졸업생 학교소개 서울대학교의미션을한눈에이해할수있도록아이콘을활용하였습니다. 배움의터전 / 학문적가치창조 / 더불어사는지혜 교육과정 교육과정을직관적으로나타내는형태들을조합하여각과의특성을살렸습니다. 공과대학 / 자연과학대학 / 약학대학 / 법학대학 / 미술대학 주요서비스 / 타이틀 사용자가직관적으로이해할수있도록단순화한 UI 로아이콘을구성하였습니다. 교통 / 전화 / 포털 / 등록금게시일 / 뷰 / 지침. 정보소개 / 입학 / 소통 / 교육 회원가입 가입의단계를명시적으로보여줄수있도록아이콘을활용하였습니다. 이용약관동의 / 본인인증과정 / 회원정보입력 / 회원가입완료

8. 리뉴얼 사이트 디자인 - About Main 2 1. 글로벌네비게이션 - 좌측네비게이션 좌측내비게이션을통해페이지간이동의효율성을높였으며, 아이덴티티컬러를노출하여브랜드를강조하였습니다. 검색바및 SNS 등의버튼을위치시켜사용상의편의성을고려하였습니다. 3 2. 메인비주얼 - 4 장의브랜드관련이미지롤링 서울대학교의위상과목표방향등아이덴티티를이미지와타이포그래피로강조하여표현하였습니다. 4 장의이미지를통해서울대가보여주는다양한모습을보여주고자하였습니다. 3. 퀵서비스 - 타겟층분류서비스 웹사이트에접근하는타겟층을세분화시켜각대상별로자주사용하는페이지를카테고리화시켰습니다. 묶는기준은다른대학교들의타겟층서비스를참고하여분류하였습니다. 4 4. 컨텐츠 1 단 - 학교소개 / 공지사항 / 입학뉴스 / 행사안내 / 주요서비스 기존의메인페이지에노출된메뉴를중심으로보여주되직관적으로내용을알수있도록게시글을노출시켰습니다. 하단에위치하던주요서비스를우선순위를두어정보설계를한후사용자의 UI 를고려하여아이콘으로리디자인하였으며, 서울대학교가강조하고자하는학교의인재상을이미지와함께메세지로전달하였습니다. 5. 컨텐츠 2 단 - 서울대뉴스 / 홍보동영상 서울대에서진행중인여러뉴스들을이미지와타이틀및상세게시글을일부보여주어메세지전달이용이하도록하였습니다. 서브페이지에있던홍보동영상을이용률이높은예비서울대인을위해노출했습니다. 5 6. 컨텐츠 3단 - SNS / 연구소개서울대에서활발하게일어나는현황을 SNS를통해보여주어다양한서울대학교를표현하고자하였습니다. 연구를중심으로뻗어나가는서울대이므로성과를보여주어브랜드이미지를강화하였습니다. 7. 푸터 - 교내주요사이트 / 학교관련사이트 펼쳐진형태의푸터에구성된내용들을접을수있는푸터로구성하여타겟층에따라불필요할수있는영역을최소화시켰습니다. 6 1 7

9. 리뉴얼 사이트 디자인 - About Sub 고정 서브 내비게이션 서브내비게이션이펼쳐진상태로고정됨으로써현재페이지위치를알수있고, 3depth 까지펼쳐지는메뉴로사용성을높였습니다. 비주얼 영역 메인페이지와통일성을이루는부분으로상단에넓은영역으로이미지와타이포그래피를통해서울대학교의비전을보여줍니다. 유틸 메뉴 현재어느페이지에있는지유틸메뉴로확인할수있습니다. 픽토그램과글을함께활용하여직관성을높였습니다. 관련 이미지 활용 컨텐츠와관련된이미지를적극적으로활용하여시각적인이해도를높이고메세지전달을효율적으로합니다. 아이콘 활용 비전의일부분을아이콘화시켜사용자가쉽게이해할수있도록하였습니다. 또한표현기법에통일성을주어연속적인느낌을줍니다. 학교소개페이지 시각적 자료 활용 역사가깊은서울대학교의과거이미지를적극적으로노출시켜위상을강조하며, 브랜드의신뢰도를높이는역할을합니다. 탭 배너 활용 연대기가필요한역사부분을탭으로간략화하여노출함으로써사용자가선택적으로원하는정보에접근할수있도록합니다. 푸터 메인페이지와이어지는푸터로, 교육관련사이트및학교관련사이트를지속적으로노출시켜해당페이지와의이동이용이하도록돕습니다.

9. 리뉴얼 사이트 디자인 - About Sub 이미지 활용 게시물을관련된이미지로함께노출시킴으로써사용자가직관적으로내용을유추할수있고미리메세지를확인할수있도록합니다. 아이콘 활용 관련대학을상징하는오브젝트들을조합하여아이콘으로표현하여사용자의 UI 를고려하였으며, 롤링되는배너로많은정보전달에용이합니다. 카드 디자인 해당교육과정을카드디자인형태로보여주어과정의속성에부합하며정보전달에용이한형태로보여줍니다. 검색 기능 페이지하단에검색기능을추가하여원하는게시물을선택적으로확인할수있도록하였습니다. 컬러또한통일하여안정감을줍니다. 교육과정소개페이지 이미지게시판페이지

9. 리뉴얼 사이트 디자인 - About Sub 픽토그램 활용 각메뉴마다내용에적합한형태로픽토그램을달리적용하여항목에대한사용자의이해도를높이며명확한정보분류를도와줍니다. 탭 메뉴 사용 회원가입의각단계를알려주는탭형식을사용하여현재진행단계를알수있도록도와줍니다. 또한픽토그램을활용하여사용자의 UI 를고려합니다. 컬러 변화 동의항목을나타내는메세지의컬러변화를주어시각적인인지를높이며중요성을부각합니다. 선택 폼 이용 회원별다른정보가필요하고이용됨에따라카테고리를분류하여미리선택할수있도록정보설계를다시하였습니다. 버튼 강조 회원가입의진행을수월하게도울수있도록기존의버튼에컬러변화를주어선택에용이하도록하였습니다. 2016. 2. 02-2016. 03. 04 사이트맵페이지회원가입페이지

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

10. 리뉴얼 사이트에 대한 결과 예측 BRANDING 서울대학교를기존의브랜드가가진느낌에서벗어나세련되게표현하려노력했습니다. 이로인해트렌디하고이지적인인상을주며서울대학교에대한고유의아이덴티티가부각될것입니다. 또한다양한컨텐츠로인해서울대의다각적인모습을노출시킴으로써변화된이미지를어필할수있을것입니다. UI/UX 기존의서울대학교웹사이트는숨겨진많은컨텐츠가많아서메인페이지로많이노출시키려노력했습니다. 또한사용자들이직관적으로이해하기쉽도록이미지와아이콘, 타이포그래피를통해메세지전달을노력함으로써사용에대한편리성이증가할것입니다. Marketing 많은학생을받음으로써수익이창출되는학교의특성상사용자의접근이늘어나서울대학교에대한관심도가올라가입학을원하는사람들이많아질것입니다. 또한수익으로인해교육의퀄리티가향상됨으로인해서울대학교가목표하는세계대학순위또한증가할수있을것입니다.

EPILOGUE EXPERIENCE 내 손으로 직접 웹사이트를 만들고구동시켜 본다는 것 웹사이트를처음부터끝까지제손으로직접만들어본다는것은흥분되는경험이었습니다! 항상사용자의입장에서만접해보았던웹을하나하나섬세하게만들어가는느낌이란! 마치아이의여러부분이제손으로창조되어가는엄마의마음이되는것같았습니다! 여러페이지들을디자인하고셋팅을하고나니어느새아이가훌쩍자라서뛰어다니는것을보는엄마미소가절로지어졌던것같습니다. 항상과정은힘들지만마지막의뿌듯함과그상쾌함을위해몇날몇일이고밤을새가면서작업을하는것같습니다! 언젠가정말제가만든디자인이디비컷에올라올그날을기대하며만들어본저의첫웹페이지디자인은흥분, 짜릿함그자체였습니다! LEARNING 프로젝트를 통해 배우고 느끼고깨달은 많은 것들 메인페이지가아닌여러서브페이지들을모두디자인해본다는것은생각했던것보다즐거운일이었습니다! 처음에는페이지간의연결성을고려하지못하고이것저것말도안되는레이아웃과구성만을고려했었는데, 점차페이지를진행하다보니중요한부분들을깨달아가며작업했던것같습니다. 특히가장많이배운것은통일과변화! 디자인은조화가중요한것이라생각하여통일성만을많이생각했었는데그사이에서도변화를줌으로써디자인에생동감을주고오히려개성을더해준다는것을깨달았습니다! 그리고처음접해보는일반적인디자인에대해접근하는방법을배웠습니다! 무엇보다편집디자인을배울수있어서많은경험치가쌓인것같습니다!