Web PublisherKang Jee Eun

웹퍼블리셔 강지은입니다.

참신하고 효율적인 웹페이지 구축을 목표로

기술 트렌드와 새로움에 늘 관심을 가지고 고민하며, 노력합니다.

scroll

Web PublisherKang Jee Eun

About

1992년 7월 9일생 (만 27세)

서울시 마포구 거주

(주)플랜위너스

웹디자이너 및 퍼블리셔

2018년 12월 11일 ~ 2019년 05월 17일

UI/UX 엔지니어링 과정 수료

하이미디어컴퓨터학원 강남점

2018년 12월 7일

새로운 시도는 항상 즐겁습니다.

새로운 코딩기법과 디자인을 연구하고, 배우며, 적용하는 일은 언제나 즐겁습니다.

끝없이 배우는 사람이 되고자 근무기간에도 java프로그래밍을 배우고자 학원을 다니고, 공부했습니다.

주어진 업무를 신속하고 책임감있게 해내어 조직에 도움을 드리는 일원이자,
지속적으로 공부하고 연구하여 발전해나가는 웹퍼블리셔가 되겠습니다.

Skills

ZenCoding(Emmet)

JavaScript & Jquery 로직 구현

반응형 웹디자인 구축

MVC (Model View Controller)패턴의 페이지 구성

웹접근성을 높힌 시멘틱 페이지 활용

HTML5 DTD 문법 준수

워드프레스를 이용해 빠르게 반응형 웹사이트 제작

그누보드를 사용한 안드로이드 어플리케이션 제작

Contact

Portfolio

  • All
  • #Renewal
  • #Responsive
  • #Etc.
예성닥트공사

예성닥트공사

제작기간 : 1주일

제작 참여 100% - 웹 디자인 및 퍼블리싱

#Cgimall #mobile #app
skyTravel

SkyTravel

제작기간 : 1주일

제작 참여 90% - 웹 디자인 및 퍼블리싱

#Wordpress #Responsive
steamGenie

Steam Genie

제작기간 : 1주일

제작 참여 90% - 웹 디자인 및 퍼블리싱

#Wordpress #Responsive
paradiseCity

ParadiseCity

제작기간 : 2주일

메인 제작 참여 100%

#Etc.
flip

Flip

제작기간 : 5일

제작 참여 100%

#Responsive
kaywon

계원예술대학교

제작기간 : 1주일

메인 제작 참여 100%

#Renewal #Responsive
artbox

Artbox

제작기간 : 3일

메인 제작 참여 100%

#Responsive
sampyo

삼표그룹

제작기간 : 1주일

제작 참여 100%

#Etc.
deadbydaylight

Dead By Daylight

제작기간 : 2일

메인 제작 참여 100%

#Renewal
portfolio

Portfolio

제작기간 : 1주일

제작 참여 100%

#Responsive

ParadiseCity

파라다이스시티 카피페이지 / 2018

paradiseCity Go To Link Go To Sub Link

JavaScript, CSS animation을 이용해 다양한 인터렉션 디자인을 구현했습니다.

다양한 사용자를 위해 접근성을 고려하여 IR기법을 적극사용하였습니다.

플러그인 이용하기보다 직접 로직을 세웠으며,
JavaScript, CSS animation을 이용해 다양한 애니메이션을 구현했습니다.

서브페이지에는 Google Map을 이용했습니다.

제작 소요기간: 2주일

5 Key Points

01

레이어를 쌓아올린 메인

paradiseCity_main

썸네일을 담당하는 레이어 · 각 파트의 영역을 담당하는 레이어 · 소메뉴를 담당하는 레이어 · 영역 선택시 커지며 스케일이 커지는 백그라운드 레이어까지
총 4가지의 레이어가 하나의 섹션을 이루고 있습니다.

썸네일을 담당하는 레이어 안에 해당영역 백그라운드를 넣고,
영역에 마우스가 진입하면 가로폭이 100%,
썸네일의 opacity가 0이되어 큰 백그라운드가 나타나는 방식으로 로직을 세웠습니다.

레이어의 위치와 표현방법에 애를 먹었으나, 해내고 나니 가장 뿌듯한 결과물이 되었습니다.

02

jQuery와 CSS를 이용한 애니메이션

paradiseCity_fadeInUp

플러그인 없이 요소에 순차적으로 fadeInUp효과를 주었습니다.

이는 메인에서 뿐 아니라 서브페이지인 Paradise City Map에서도 사용되었으며, 이후 다른 사이트를 제작할 때에도 사용하였습니다.

플러그인을 사용하는 것이 간단하겠으나,

1. 위로 올라온다
2. 올라오며 천천히 투명도가 1이된다.

라는 로직을 직접 세웠으므로, 다른 표현이 필요하더라도 또 다시 구현할 수 있습니다.

03

GoogleMap을 활용한 위치 안내

paradiseCity_GoogleMap

구글맵 cdn과 좌표를 이용하여 위치를 안내합니다.

04

Position값의 Art화

paradiseCity_CityMap

좌표를 정해 각각의 위치값을 구하고, 그를 이용하여 각 섹션마다 선택이 되는 a태그를 두었습니다.

선택시 해당하는 카드가 우측에서 fadeInUp되며, 해당 a태그의 이미지가 변하도록 설정했습니다.

또한 섹션마다 볼 수 있는 탭에서는, 그 섹션 외에 해당하는 태그를 비활성화 해두었습니다.

단순한 작업이지만 css와 jQuery를 이용하여 비주얼적으로 업그레이드시켜 완성했습니다.

05

운행시간표 라이트박스

paradiseCity_lightbox

운행시간표를 라이트박스를 통하여 팝업으로 깔끔하게 보여줍니다.

운행시간표를 보는 동안에는 body의 스크롤을 막아 이동하지 않게 했습니다.

table을 이용하여 구현하였으며 시멘틱적으로 구성하여 스크린리더 등에서도 편하게 접근성을 높였습니다.

Flip

Flip 카피페이지 / 2018

flip Go To Link

JavaScript와 CSS를 이용하여 다양한 animation을 구현하였습니다.

video 태그와 iframe등을 적극 활용하여 background 뿐 아니라 슬라이드에도 적용하였습니다.

반응형으로 제작하여 모바일에서도 이용할 수 있게 하였습니다.

제작 소요기간: 5일

5 Key Points

01

동영상을 Background로!

flip_main

동영상을 intro화면의 background로 깔아 사이트의 컨셉을 직관적으로 보여줍니다.

레이어를 쌓고 video태그를 이용하였습니다.

메뉴버튼을 선택할 시에 video가 일시정지했다가, 메뉴버튼을 닫으면 재실행됩니다.

JavaScript를 이용하여 video태그를 컨트롤할 수 있으며 그를 응용할 수 있습니다.

반응형으로 제작하여 width값이 줄어들면 영상의 사이즈 또한 줄어들게 하였으나, 모바일에서는 자동으로 영상을 작동하는데 무리가 있으므로 본사이트와 같이 이미지로 대체하였습니다.

02

애니메이션을 가진 반응형 menu

flip_menu

메뉴버튼을 누르면 백그라운드 원형태가 커지며 window를 덮고, 그 위로 리스트가 slide up됩니다.

transition과 transform을 이용하여 애니메이션효과를 주었으며,
delay값을 통해 리스트에도 애니메이션을 주었습니다.

jQuery나 JavaScript뿐 아니라 CSS를 통한 애니메이션을 자유자재로 다룰 수 있습니다.

03

원페이지의 깔끔함

flip_onepage

이 사이트는 원페이지로 이루어져있습니다.

섹션을 11개로 나누었으나, 일련의 규칙을 통해 찾아낸 공식을 이용해 메뉴의 리스트를 누르면 해당하는 섹션으로 scroll이 바로 이동합니다.

또한 스크롤이 이동하면 자동으로 menu가 닫히며 시야를 방해하지않습니다.

04

스크롤값에 따른 컨텐츠의 등장

flip_scroll

스크롤바가 각 섹션 안 컨텐츠를 보여주는 위치에 닿으면 해당하는 컨텐츠가 나타납니다.

wow plugin을 이용하여 통통 튀는 느낌을 내었습니다.

별도로 opacity값을 주어 함께 애니메이션함으로서 fade효과도 함께 주었습니다.

점이 통통 튀는 것과 함께 bounce효과들이 '어린이를 위한 매트리스'라는 컨셉을 가진 사이트와 부합하여 이용하였습니다.

05

다양함이 담긴 슬라이드

flip_slide

그동안 작업해 본 슬라이드 중에서 복잡했지만 가장 재미있던 작업이었습니다.

pagination역할을 어린아이 이미지가 맡고,
선택시 실제 슬라이드 영역이 슬라이드다운하며 나타납니다.

pagination 또한 다양한 애니메이션으로 지루할 틈 없으며,
슬라이드 내부의 텍스트 컨텐츠는 bounce하며 나타납니다.

슬라이드는 자동으로 진행되며 동시에 영상이 재생됩니다.슬라이드 페이지 이동 시 영상은 0초부터 재시작하며 나머지 슬라이드의 영상은 일시정지됩니다.

슬라이드의 양 끝에 도달하면 이전,다음으로 이동하는 indicator는 비활성화되지만, 자동 슬라이드이므로 무한으로 계속됩니다.

반응형으로 제작시 window의 가로폭이 줄어들면 동영상 사이즈 또한 줄어들게 했으나 모바일에서는 영상의 자동재생이 불가능하므로 동영상부분은 본 사이트와 같이 이미지로 대체하였습니다.

계원예술대학교

계원예술대학교 리뉴얼페이지 / 2018

kaywon Go To Link

실제 사용자였던 경험을 바탕으로 리뉴얼하였습니다.

기존 계원예술대학교의 페이지는 글자로만 이루어져있어 답답하고,
사용자로서 접근이 어려웠습니다.

따라서 다양한 이미지와 공간을 활용하여 사용자들이 머물고 사용하기에 편리하게 했습니다.

제작 소요기간: 1주일

5 Key Points

01

Play,Kaywon

kaywon_concept

기존 홈페이지입니다.
'예술대학교'라는 타이틀, 또한 'play'라는 P.I.(Promotion Identity)와 맞지 않는 페이지를 사용한다고 생각했습니다.

1. 명확하지않은 카테고리
-이곳 저곳에 흩어져있는 같은 내용의 컨텐츠, 텅 빈 카테고리를 정리하였습니다.

2. 글씨로만 이루어진 페이지
-이미지를 사용하고, 슬라이드 배너에도 이미지를 강조하여 심미성을 높이고 답답하지않게 했습니다.

3. 여백의 미
-각 섹션별로 공간을 충분히 주어 사용자들이 머무는데에 답답함이 없도록 하였습니다.

4. 널브러진 링크
-많은 링크들을 정리하고, 사용자들이 자주 이용하거나 사이트이용에 편리할만한 링크는 우측 사이드에 고정해두었습니다.

02

입시시즌 시작!

kaywon_popUp

입시시즌을 맞이하여 팝업창을 만들었습니다.

대학 사이트를 찾는 사용자 입장에서 가장 큰 이슈가 무엇일까 고민했습니다.
바로 입시라고 생각했고, 그에 대한 기본정보를 팝업창으로 안내하면서 광고효과와 더불어 사용자의 편의를 고려했습니다.

팝업창에서도 IR기법을 이용하여 접근성을 높였습니다.

우측 상단의 X버튼을 누르면 팝업이 사라지고, 본 사이트가 나타납니다.

03

시각적 효과를 높인 슬라이드

kaywon_slide

이미지를 적극 활용한 자동 슬라이드입니다.

기존 슬라이드배너는 글씨와 정보 위주였습니다.

눈에 잘 들어오지 않고, 다른 배너를 보려면 가만히 기다리거나 인디케이터를 작동해야하는 것을 개선하고자 했습니다.

슬라이드의 요소들을 나란히 배열해두어 한 눈에 전부 들어오게 했습니다.
해당되는 슬라이드요소만 가로폭을 늘리고, 어두운 효과를 제거했습니다. 또한 슬라이드의 배경을 크게 보여주며 텍스트를 나타냈습니다.

이렇게 함으로써 모든 슬라이드의 정보를 간략하게 이미지로 보여주어 답답함을 없애고 기대감을 높였습니다.

04

한 눈에 들어오는 뉴스!

kaywon_news

기존 페이지에 테이블로 글씨만 있던 뉴스페이지를 바꾸었습니다.

가장 메인이 되는 기사들은 썸네일을 이용하여 호기심과 자극을 불러일으킵니다.

관련한 내용을 더 보고자 한다면 'more'버튼을 이용하여 볼 수 있도록 했습니다.

학사일정, 장학에 관련된 교내이슈는 테이블로 정리했습니다.

기사들이 있는 카테고리인 학사일정, 장학등은 테이블 바로 오른편에 아이콘과 함께 정리해두었습니다.
관련된 사항들을 더 보고자 할 때 편하게 찾아갈 수 있게 하기 위함입니다.

모바일에서 페이지를 볼 때는 테이블이 한 줄씩 자동으로 슬라이드되게하였습니다.

학사일정, 장학 등에 관한 것은 간편하게 볼 수 있도록 모바일 메뉴버튼 안에 넣어두었습니다.

05

꼭 필요한건 이곳에, 사이드바

kaywon_aside

사용자를 크게 세분류로 나누어 생각했습니다.
교직원, 학생, 방문객.

이들이 가장 많이 사용할 만한 페이지를 링크로 걸어 우측에 고정해두었습니다.

평상시에는 아이콘만 보이지만, 마우스를 올리면 아이콘에 대한 설명인 페이지 이름이 함께 나타나는 애니메이션 효과를 주었습니다.

또한 Top버튼을 하단에 배치하여 스크롤값이 많더라도 한번에 상단으로 이동할 수 있도록, 사용자들의 편의성을 고려하여 만들었습니다.

아이콘은 직접 제작하거나 이미지를 사용하지 않고 fontawesome을 활용하였습니다.

모바일화면에서는 시야를 방해하지 않게 하기 위해 top버튼을 제외하고 보이지 않게했습니다.
또한 top버튼도 아이콘을 제외한 설명은 제거했으며, 애니메이션 효과도 제거했습니다.

당연히 링크들을 완전히 없애지 않았습니다. 메뉴버튼을 누르면 하단에 자리해두었습니다.

Artbox

아트박스 카피페이지 / 2018

artbox Go To Link

다양한 슬라이드를 이용하여 메인을 구성하였으며, 반응형으로 제작하여 viewport에 따른 슬라이드를 추가,제거하였습니다.

부트스트랩을 이용하지 않고 직접 JavaScript와 CSS로 반응형 페이지를 구현하였습니다.

플러그인을 사용하지 않고 직접 로직을 세워 다양한 슬라이드를 구현했습니다.

제작 소요기간: 3일

5 Key Points

01

지속적으로 이어지는 '무한 슬라이드'

artbox_Slide

이 페이지에서는 슬라이드를 구현해 볼 기회가 많았습니다.

특히, 모든 슬라이드가 반복되지않고 이어지는 무한 슬라이드였습니다.

append,prepend를 이용한 슬라이드로, 무한으로 이동하는 슬라이드를 구현해 보았습니다.

처음에 연구를 시작했을 때 막막했으나 하나의 슬라이드가 아닌, 도합 5개의 슬라이드를 만들고 나니 자신감이 붙었습니다.

각각의 item들의 left값을 jQuery를 이용해 동적으로 부여하고, 그를 이동하는 방식을 선택했습니다.

02

멈추어 있던 리스트도 슬라이드로, 짠!

artbox_rwdSlide

viewport가 pc일때는 움직이지 않는 형태의 리스트였던 bestItem 탭입니다.

반응형으로 제작하여 width값이 축소되면 한 줄로 정렬되고,
슬라이드가 시작됩니다.

슬라이드가 진행되면 다시 윈도우의 가로폭을 늘렸을 때 리스트의 순서가 바뀌어 있는 오류가 발생했습니다.

따라서 기본으로 리스트의 위치값을 지정해두어 저장해두고,
윈도우의 가로폭이 커지면 슬라이드를 멈출 뿐 아니라 저장해 둔 위치값을 가져오게하여 정리하였습니다.

03

모바일에선 간편하게 리스트업!

artbox_rwdList

pc화면일 경우 각각의 아이콘을 탭하여 리스트를 확인하는 섹션입니다.

그러나 모바일의 경우, 사용자들이 더 간편하게. 한 눈에 볼 수 있도록 리스트업했습니다.

사이즈도 조정하여 더 큼지막하게 변경하였습니다.

처음에는 모든 위치값과 높이값을 비율로 주어 가로폭에 따른 아이콘과 리스트의 공간이 떴었는데, 많은 시도를 통해 픽셀값으로 변경하고 수정하였습니다.

04

더 크게, 더 쉽게

artbox_rwdResize

pc화면에서의 해당 슬라이드는 사이즈가 굉장히 작고 인디케이터를 가지고 있었습니다.

모바일에서 보기 편하게 하기 위하여,슬라이드의 컨텐츠 사이즈를 키우고, 인디케이터를 제거하였습니다.

만약 사이즈가 pc사이즈에서의 것 만큼 작았더라면 사용하기에 굉장히 불편했겠지만 그런점을 고려하고 개선하였습니다.

05

깔끔한 Footer

artbox_rwdFooter

viewport가 pc일 때의 하단 footer영역은 다양한 position으로 나열되어있습니다.

viewport가 mobile이 될 때는 많은 내용을 축소하고, 위치를 재정의했습니다.

재정의과정에서 html을 건드리지 않고 하기 위해 z-index등이 사용되었고 글들도 줄이기 위해 span등을 이용하였습니다.

간단하게 만들기 위해 생각보다 복잡한 과정을 거치는 footer영역을 제작하면서, 이 이후로 제작하는 사이트는
footer의 위치조정 및 더 다양한 점을 고려해야겠다
고 생각했습니다.

삼표그룹

삼표그룹 카피페이지 / 2018

sampyo Go To Link

IR기법을 적극 활용하여 접근성을 높였습니다.

메인 뿐 아니라 모든 서브페이지까지 제작했습니다.

메인 페이지에서 슬라이드배너와 페이드배너를 사용하였습니다.

또한, 다양한 시멘틱 태그를 이용하여 서브페이지를 구성하였습니다.

제작 소요기간: 1주일

5 Key Points

01

스스로 움직이는 '무한 슬라이드'

sampyo_slide

스스로 좌측으로 이동하는 무한슬라이드입니다.

만약 마지막 슬라이드가 나타나면 다시 처음 슬라이드가 나타나도록 했습니다.

슬라이드에 손을 올리면 인디케이터가 나타납니다.
인디케이터나 페이지네이션을 작동하면 슬라이드가 무한으로 이동하던 것을 일시정지합니다.

슬라이드를 다시 자동으로 움직이게 할 수 있도록 play,pause버튼을 배치해두었습니다.

play중에는 pause버튼이, pause중에는 play버튼이 나타납니다.
이는 jQuery를 이용하여 효과와 이미지를 바꿔준 것입니다.

02

연속해서 번갈아 나타나는 Fade Slide

sampyo_fadeSlide

두가지 이미지와 텍스트가 번갈아가며 나타납니다.

당연히 자동실행이되며,
'삼표인이야기','면접관이야기' 섹션이 페이지네이션 역할을 수행합니다.

'삼표인이야기' 섹션이 Fade in되었을 때는 '면접관이야기' 부분을 누르면 화면이 전환되며, 반대의 경우도 작동합니다.

자동실행중일때는 play버튼이 opacity가 적용되며, 일시정지를 누르면 슬라이드가 멈추고 pause버튼에 opacity가 적용됩니다.

03

적당한 사이즈로 고정!

sampyo_subNav

서브페이지에서 각 페이지의 이름과 위치를 알려주는 네비게이션을 만들었습니다.

스크롤이 내려가면 네비게이션이 상단에 고정되며 적당한 사이즈로 줄어듭니다.

다시 스크롤 top값이 0이되면 원래사이즈로 돌아가며 자리를 찾습니다.

04

메뉴 전체를 한 눈에!

sampyo_siteMap

사이트의 하단 Footer부분에 메뉴전체보기를 만들었습니다.

메뉴전체보기를 누르면 사이트의 모든 메뉴를 한 눈에 확인할 수 있습니다.

메뉴를 감싼 div가 슬라이드업되는 방식입니다.
이에따라 스크롤바 또한 내려가야 한 눈에 보이므로 메뉴 전체보기를 누르면 스크롤바를 하단으로 쭉 내려 슬라이드업 된 div전체를 보기 편하게 구현하였습니다.

05

table태그를 이용한 게시판

sampyo_table

사내 이슈와 기사를 담은 페이지입니다.

게시판형식으로 나타내기 위해 table을 이용하였으며,
caption, colgroup등 을 사용해 더 시멘틱적으로 구현하고자 했습니다.

각 게시글마다 a태그를 달아 기사를 바로바로 확인할 수 있게 하였습니다.

Dead By Daylight

Dead By Daylight 리뉴얼페이지 / 2018

dbd Go To Link

즐겨하던 게임의 메인 페이지를 리뉴얼해보았습니다.

사용자들이 확인하기 편리하게 Patch note, Chapter 등을 메인으로 구성하였으며,

새로 유입될 사용자를 위해 게임에 대한 정보를 영상으로 삽입하였습니다.

제작 소요기간: 2일

5 Key Points

01

게임의 컨셉을 그대로, 페이지로!

dbd_concept

게임이 공포게임이니만큼 키워드를 '살해','희생' 등으로 캐치했습니다.

그에따라 메인컬러를 검정색(#000)으로,
서브컬러를 붉은색(#ef2e2e)으로 설정
하였습니다.

컨텐츠가 게임이니만큼 CSS등을 이용해 애니메이션을 활용하고자 했습니다.

메인페이지에서 연도별로 회사가 걸어온 발자취를 확실히 보여주고자했습니다.
첫 시작인 트레일러 예고영상, 발전하며 진행해 온 새로운 챕터들, 앞으로 진행될 사항을 담았습니다.

또한 메인화면을 원페이지처럼 제작하여, 인디케이터를 클릭하면 해당하는 섹션을 바로 볼 수 있도록 하였습니다.

02

다양한 애니메이션과 이동

dbd_main

마우스를 진입하면 해당하는 원이 빨갛게 채워지고, 언더라인이 생깁니다.

CSS만을 이용한 디자인과 애니메이션으로, 패치노트 영역에서는 화살표가 좌우로 이동하는 애니메이션 효과를 주었습니다.

회사의 연혁을 담는 대신, 게임의 시작과 현재, 그리고 미래를 담고자 했습니다.

따라서 애니메이션으로 표현한 인디케이터를 클릭하면 해당하는 페이지로 이동하도록했습니다.

03

애니메이션이 들어간 Header

sampyo_subNav

Header영역을 상단에 고정해두었습니다.
또한 스크롤이 내려가면 백그라운드컬러의 opacity를 높여 다른 요소에 의해 묻히지 않게 했습니다.

Header안에있는 요소들에 마우스가 진입하면 붉은색이 underline으로 애니메이션하여 나타나게 했습니다.

들어갈 내용을 간소화하여 깔끔하고 담백하게 구현하였습니다.

04

지나온 작업을 한눈에, 년도별 챕터정리

sampyo_siteMap

게임을 제작해나가며 생긴 새로운 챕터(캐릭터,배경스토리 등)를 정리해두었습니다.

가장 최근 챕터의 캐릭터는 배경으로 설정해두었습니다.

챕터들을 그저 나열해 두는 것이 아니라 년도별로, 또 출시 순으로 정리해두어 마우스를 진입하면 볼 수 있게 해두었습니다.

또 챕터를 메인에 놓음으로써 사용자가 캐릭터에 대한 궁금증을 바로 풀 수 있도록 연결하는 통로가 되게 했습니다.

05

트레일러 영상을 이용한 게임 소개

sampyo_table

게임 등 컨셉을 가장 잘 소개할 수 있는 방식이 무엇이 있을까 고민했습니다.

가장 고심해서 제작할, 트레일러 영상이 효과적으로 설명할 수 있을 것이라 생각했습니다.

유투브에 올라와있는 트레일러 영상을 가져오기 위해 iframe태그를 이용했습니다.

제목으로 First Story를 붙여 게임의 첫 시작이자 컨셉 그 자체를 보여주었습니다.

자동재생이 되는 경우 위의 패치노트, 챕터등을 확인하고 컨텐츠를 보는데 방해가 되며, 영상을 재실행해야할 것 같아서 자동재생기능은 넣지 않았습니다.

Portfolio

포트폴리오 디자인페이지 / 2018

portfolio Go To Sub Link

UI/UX 엔지니어링 과정을 수료하면서작업한 결과물들을 정리해둔 페이지입니다.

가독성과 깔끔한 레이아웃에 가장 중점을 두었습니다.

메인 인트로에 그동안 작업한 것을 목업으로 디자인해 슬라이드로 배치했습니다.

제작 소요기간: 1주일

5 Key Points

01

안녕하세요, 강지은입니다.

portfolio_concept

가장 깔끔하고 간결하게 제 자신을 표현하고자 했습니다.

1. 신입의 싱싱함을 살린 컬러, #82a2a3!
- 푸릇한 이미지가 상상되는 블루와 그린 사이의 컬러를 선택하였습니다.
하지만 너무 강한 컬러는 오히려 컨셉을 해칠 것 같아 채도와 명도를 살짝 낮추어 편안함을 담았습니다.

2. 간단히 소개드리자면,
- 이력서 PDF를 준비해두었기에 페이지에는 간단하게
기본적인 이력과 수료내역, 짧은 자기소개로 정리했습니다.

3. 준비된 신입 퍼블리셔입니다.
- 직무에 관한 기술들을 작성했습니다.

4. 가장 중요한 것은 마지막에!
- 작업물들을 깔끔하게 정리하고 모아두어 마무리하였습니다.

02

작업물들을 한눈에!

portfolio_slide

그 간 작업한 결과물을 목업하여 슬라이드로 배치하였습니다.

03

언제든 저를 확인하시고, 연락주세요!

portfolio_contact

이력서 확인과 연락을 위한 링크를 버튼형식으로 제작하였습니다.

시야를 방해하지 않으면서 언제든 쉽게 확인할 수 있도록 하는 방법으로,
좌측 하단에 고정해두었습니다.

더 깔끔하고 간편한 페이지로 만들기 위해 별도의 섹션으로 구분해두지 않았습니다.

04

#잘하는 신입 퍼블리셔

portfolio_shuffle

포트폴리오에서 원하시는 부분을 쉽게 확인할 수 있도록
shuffle 플러그인을 이용하여 태그별로 분류하였습니다.

전체,Responsive Web Design(반응형),Renewal Design, 그 외로 나누었습니다.

마우스를 진입하면 기본 정보가 나타납니다.
선택하면 바로 해당 사이트로 이동하는 것이 아닌, 상세페이지를 확인할 수 있도록 제작하였습니다.

05

이렇게 작업했습니다.

portfolio_details

각 작업물들에 대한 간략한 설명과 제작 소요기간을 작성해 작업물에 대해 파악하기 쉽게 했습니다.

또한, 5개의 키포인트를 이미지와 함께 설명해두어 혹시 제작해 둔 사이트에 들어가 보지 않더라도,
제작에 사용된 기술들과 의도를 확인할 수 있게했습니다.

텍스트가 많아 자칫하면 답답해보일 수 있기에 공간을 충분히 주었습니다.