PORTFO
LIO

PRO
CESS

Part.1

기초 분석

01

brainstorming

about me

포트폴리오를 제작하기 위해 먼저 ‘나’에 대한 고민을 시작했습니다.
나는 어떤 사람인지, 어떠한 길을 걸어 왔는지, 나에 대해 어떤 것을 궁금해 할 지에
대한 생각을 브레인스토밍으로 정리하였습니다.

02

Affinity Diagram

step1

브레인스토밍으로 나온 단어들 중 저를 표현하는 키워드들을 도출하였습니다.

step2

1단계에서 도출한 단어들을 카데고리화하여 정리하였습니다.

  • 기본 정보

    정보
    자기소개
    교육
    자격증
    스토리
    학력
    취미
    연락처

  • 스킬능력

    코딩
    html/css/js 등
    디자인
    포토샵/일러스트 등
    드로잉
    uiux
    기획 제작

  • 성격

    성실함
    노력형
    자기계발
    아이디어
    밝음
    친화력
    포용력
    풍부한 상상력
    꼼꼼함
    계획형

step3

2단계에서 카테고리화 한 단어들을 종합하여 포트폴리오의 기반이 될
큰 키워드를 도출하고 문구화하였습니다.

  • 나는
    • 아이디어가 많은
    • 창의적인
    • 유연한 사고
  • 의 장점을 가진,
    • 코딩
    • 디자인
  • 을 잘하는 사람

03

Discover insights

slogan

어피니티다이어그램에서 도출된 문구를 기반으로 ‘나’를 나타낼 수 있는
대표 슬로건 두 개를 도출하였습니다.
‘나는 유영중이다’ 라는 문구는 저의 이름을 활용한 일종의 언어유희이자
창의적인 아이디어와 유연한 사고를 가진 장점을 나타내는 슬로건입니다.
‘디자인, 코딩 모두 잘 하는 멀티 플레이어’는 디자이너였던 제가 코딩이라는
능력을 확장하게 되면서 가지게 된 능력적 장점을 나타낸 슬로건입니다.

나는 유영 중이다

I am swimming

코딩, 디자인 모두 잘 하는 멀티 플레이어

Multiplayer good at both coding and design

Part.2

레퍼런스 조사

Reference research

Main Reference

cuberto

해외 에이전시인 ‘CUBERTO’ 웹사이트를 대표 레퍼런스로 선정하였습니다.
포트폴리오 전체적인 무드와 레이아웃을 참고하였으며
index의 visual, video, introduce, work, ncs, footer섹션에 적용하였습니다.

Sub Reference

flashform

해외 웹사이트 서비스 브랜드 ‘Frashform’ 사이트입니다.
index의 배너, about 페이지의 timeline, contact 페이지 레이아웃에 참고하여
적용하였습니다.

okcest

해외 에이전시 ‘okcest’ 사이트입니다.
index의 hobby 섹션에 참고하여 적용하였습니다.

cosmos

해외 사이트 ‘cosmos’ 입니다.
전체적인 우주 분위기를 참고하였으며 about hobby 섹션에 참고하여 적용하였습니다.

deduxer

해외 에이전시 ‘Deduxer’ 사이트입니다.
about strength 섹션에 참고하여 적용하였습니다.

Part.3

기획 및 디자인 설계

01

Information structure diagram

정보구조도

포트폴리오의 전체적인 틀을 구상하기 위해 정보구조도를 작성하였습니다.
home, abuot, works, portfolio, contact 5개의 큰 인덱스로 구성하였으며
해당 인덱스의 콘텐츠 요소들과 works에서 이동하는 작업물 상세 페이지인
works sub까지 구상하였습니다.

Portfolio

  • Home

    main
    영상
    키워드
    about intro
    skills
    hobby intro
    works intro
    portfolio intro
    ncs
    contact(footer)

  • About

    main
    자기소개
    기본 정보
    timeline
    strength
    hobby
    contact(footer)

  • Works

    main
    coding
    uiux & planning
    graphic design
    contact(footer)

    Works sub

    작업물 설명
    pc/tablet/mobile mode
    fullpage(완성본)
    footer

  • Portfolio

    main
    기초분석
    레퍼런스 조사
    기획 및 디자인 설계
    제작
    완성 결과물
    contact(footer)

  • Contact

    main
    연락처

02

flowchart

플로우차트

플로우차트를 제작해 유저플로우를 구상하였습니다.

03

design system

color

형광 초록 컬러인 #C1FF3E를 포인트 컬러로 사용하고
화이트 #fff와 블랙 #101010을 사용하여 포인트 컬러가 더욱 돋보일 수 있도록 하였습니다.

  • #C1FF3E
  • #FFF
  • #101010

font

한글 폰트는 깔끔한 느낌의 ‘프리텐다드’를 사용하였고
영어 폰트는 심플한 ‘montserrat’과 디자인 폰트인 ‘ponzu’를 사용하였습니다.
베이직 폰트와 디자인 폰트를 함께 사용하여 디자인을 더욱 풍부하게 하였습니다.

  • sub 20px
  • KOREAN
  • 프리텐다드
ENGLISH
  • main 180px
  • MONTSERRAT
PONZU

illust

index 페이지 중간중간에 일러스트를 넣었습니다.
포트폴리오 콘셉트에 맞추어 우주를 유영하는 일러스트 캐릭터로 제작하였으며
해당 캐릭터는 포트폴리오의 로고로도 활용하였습니다.

04

idea sketch

아이디어 스케치

기획을 토대로 대략적인 디자인을 잡기 위해 아이디어 스케치를 진행하였습니다.

Part.4

제작

01wireframe

  • Index

  • About

  • Works

  • Works_sub

  • Contact

02prototype

  • Index

  • About

  • Works

  • Works_sub

  • Contact

03storyboard

Index

  • header

    일러스트 로고와 index 리스트들로 구성, 스크롤을 내렸을 때 위로 사라졌다가
    스크롤을 올리면 다시 나타나도록 구성
    모바일 버전 제작 시 리스트 숨기고 메뉴바 + 오른쪽에서 슬라이드 되는 메뉴 적용

  • visual

    ‘I AM SWIMMING’ 슬로건 사용
    특정 단어에 hover했을 때 글씨 올라오는 효과 참고
    우주를 유영하는 일러스트 캐릭터 넣기
    하단에 작은 텍스트로 디자인 요소 구성

  • con01 _video

    scrolltrigger에 반응하여 visual 섹션에 걸쳐져 있다가
    스크롤 다운 시 라운드 모양으로 커지는 효과
    브이로그 형식의 일상 영상 편집 제작 후 첨부

  • con02 _banner

    나를 나타내는 대표 키워드를 영어와 한글 버전으로 넣기
    스크롤에 반응하여 움직이는 효과

    영문 : #diligent #responsibility #detailed #communication #idea #sense
    한글 : #성실 #책임감 #세심함 #소통 #아이디어 #센스

  • con03 _introduce

    about 페이지의 미리보기 섹션
    background-color : #fff 흰색 배경
    사진과 ‘HELLO THIS IS ME’ 텍스트 슬라이드 효과
    슬로건 의미 소개와 간단한 자기소개 넣기
    일러스트 로고 돌아가는 효과 적용

  • con04 _skills

    다룰 수 있는 스킬을 소개하는 섹션
    스킬의 활용도를 나타내는 게이지 바 제작
    각 스킬 박스 hover시 카드가 뒤집히면서 설명이 나옴
    계단형식 배열로 시각적 재미 부여
    우주를 유영하는 일러스트 캐릭터 첨부

  • con05 _hobby

    about 페이지의 hobby 섹션 미리보기
    3가지 취미(전시회 관람, 그림그리기, 패션)를
    설명과 이미지로 보여줌
    scrolltrigger를 활용하여 이미지 카드가 쌓이며
    좌측 텍스트도 함께 변경되는 형태의 효과 적용

  • con06 _works

    background-color : #fff 흰색 배경
    work 카테고리인 coding, uiux and planning,
    graphic design 세가지를 이미지로 배치
    각 카테고리의 이미지는 클레이 목업 등을 활용해 제작
    hover시 이미지 커지는 효과
    click시 work 페이지 내 해당 카테고리로 이동하며
    하단 more 버튼 클릭시에는 work 페이지 메인으로 이동

  • con07 _portfolio

    포트폴리오 제작 과정 미리보기 섹션
    각 단계별 미리보기 이미지와 제목이 가로로 나열되는 디자인
    scrolltrigger를 활용하여 스크롤 시 가로로 슬라이드되는 효과 적용
    각 단계를 클릭하면 portfolio process 내 해당 단계로 이동
    more 버튼 클릭 시에는 portfolio process 메인으로 이동

  • con08 _ncs

    ncs과정의 결과물을 보여주는 섹션
    리스트 형식으로 나열
    NCS 제목에 우주를 유영하는 일러스트 넣기
    각 리스트 hover시 이미지가 뜨는 효과

  • footer

    height : 100vh
    배경에 우주 영상 첨부
    이메일 주소 박스 hover시 텍스트 올라가는 효과
    하단에 이름, 연락처 등 정보 넣기
    로고 일러스트 돌아가는 효과

About

  • visual

    background-color : #fff 흰색 배경
    index와 통일감 있게 심플한 디자인
    섹션이 겹쳐 올라오는 효과 적용

  • con01 _who

    background-color : #101010 검은색 배경
    나에 대한 상세한 정보를 소개하는 섹션
    자기소개, 프로필, 연락처, MBTI, 수상내역,
    스킬,경험, 경력 및 자격증 적기
    가운데 프로필 사진 첨부 후 사진 주변으로 내용 배치

  • con02 _timeline

    background-color : #b5e74c
    포인트 컬러에서 약간 톤 다운된 녹색 배경
    라이프 타임라인으로 내가 어떻게 살아왔는지,
    어떤 사람인지를 소개하는 섹션
    scrolltrigger를 활용하여 가로 스크롤로 타임라인 나타내기
    스크롤에 반응하여 콘텐츠가 나타나는 효과 적용
    두개의 height : 100vh div로 묶어 첫화면에서
    스크롤 시 하단으로 내려간 후 가로 스크롤 진행

  • con03 _strengths

    background-color : #fff 흰색 배경
    나의 장점 및 강점을 소개하는 섹션
    스크롤 다운 시 오른쪽 텍스트는 고정, 강점 박스만 스크롤 됨

    <4가지 강점>
    깔끔하고 견고한 markup
    유연한 소통능력
    디자인 감각
    꼼꼼하고 정확한 업무

  • con04 _hobby

    background-color : #101010 검은색 배경
    취미를 소개하는 섹션으로
    index hobby섹션에서 more로 연결
    scrolltrigger를 활용하여 제목은 배경에 고정되고
    이미지가 올라가는 효과 적용

    <취미 3가지>
    전시회 관람 : visit the exhibition
    그림그리기 : drawing
    패션 : fashion

Works

  • visual

    index와 통일감 있게 심플한 디자인
    단어가 불규칙적으로 커지며 나타는 효과

  • con01 _coding

    scrolltrigger로 Coding 제목 고정
    코딩 리스트 hover시 이미지 따라다니는 효과 적용

    <list>
    클론코딩 10개
    웹사이트 리뉴얼 1개

  • con02 _uiux

    3개의 uiux 기획 작업물 리스트 형태로 배치
    스크롤에 반응하여 이미지 및 텍스트 width가
    펼쳐지는 효과 적용

    <list>
    여기어때 어플 리뉴얼
    인천e음카드 웹사이트 리뉴얼
    패시네이션 PPL 기획

  • con03 _design

    scrolltrigger로 오른쪽 제목 고정
    디자인 작업물 스크롤에 반응해서 올라감

    <list>
    디자인 포트폴리오
    광고 디자인 - 경력
    일러스트 브랜드 ‘105 street’

Works_sub

  • main

    works 작업물들을 클릭했을 때 이동하는 상세페이지
    index와 통일감 있게 심플한 디자인
    오른쪽 mode, 화살표 부분 고정
    mode 버튼을 누르면 해당 모드의 사이트 창이 뜨도록 함
    화살표를 클릭하면 다음 작업물 상세페이지로 넘어감
    overview, keypoint, program,
    styleguide(color, font, concept) 넣기

  • con01 _mode

    mode 미리보기 - 마스크 애니메이션 적용
    스크롤 시 아래에서 위로 올라오는 효과 적용

  • con02 _fullpage

    완성된 작업물 전체 페이지를 보여주는 섹션
    편하고 깔끔하게 볼 수 있도록 효과 적용하지 않음

  • footer

    다른 페이지들의 footer와 다르게 적용
    심플하고 간단하게 넣어 서브페이지 차별화

Contact

  • main

    ‘유능한 인재를 찾고 계신다면’
    ‘If you looking for competent worker’ 문구 넣기
    splitting 효과 적용

  • con _contact

    #c1ff3e 컬러 박스가 올라와서 덮이는 효과
    번호, 이메일 연락처 적기
    일러스트 로고 돌아가는 효과

Part.5

UIUX 요구분석

USER NEEDS사용자가 원하는 포트폴리오?

question

사용자, 즉 면접관 혹은 인사담당자의 입장이라면 나의 포트폴리오를 통해
어떤 것들을 알고 싶어 할 지에 대해 생각하여 4가지 질문을 도출하였습니다.

  • 알아야 할 기본 정보들이 잘 명시되었을까?
  • 흥미를 유도하는,
    현재 트렌드에 맞는 디자인이 적용되었나?
  • 사용에 있어 불편함이 없을까?
  • 포트폴리오에 직무에 대한 능력이 나타나 있나?

Q.1 알아야 할 기본 정보들이 잘 명시되었을까?

Brainstorming

사용자가 ‘나’에 대해 궁금해할 만한 것들을 생각하며 브레인스토밍을 진행하였습니다.

Categorization

브레인스토밍을 통해 면접관의 입장에서 궁금해할 만한 키워드인
기본 정보, 스킬/능력, 성격을 큰 카테고리화하여 정리하였습니다.

  • 기본 정보

    정보
    자기소개
    교육
    자격증
    스토리
    학력
    취미
    연락처

  • 스킬능력

    코딩
    html/css/js 등
    디자인
    포토샵/일러스트 등
    드로잉
    uiux
    기획 제작

  • 성격

    성실함
    노력형
    자기계발
    아이디어
    밝음
    친화력
    포용력
    풍부한 상상력
    꼼꼼함
    계획형

about

index에 skills 섹션을 넣어 직무에 있어 가장 중요한 능력을 보여주고자 하였으며,
about 페이지에 나에 대한 정보를 상세하게 넣어 포트폴리오를 보는 것만으로도
나에 대한 정보를 알 수 있도록 하였습니다.

Q.2 흥미를 유도하는, 현재 트렌드에 맞는 디자인이 적용되었나?

reference

국내외 해외 웹사이트들을 수없이 서치하며 트렌드를 확인하고
포트폴리오로 활용하기에 적합한 사이트를 선정하여 레퍼런스로 활용하였습니다.

color / illust

컬러는 요즘 트렌드에 맞게 블랙, 화이트 백그라운드에 비비드한 포인트 컬러를
사용하였고, 일러스트 또한 최근 유행하는 무드에 맞게 제작하였습니다.
일러스트는 index 페이지 visual부분에 삽입하여 사용자의 흥미를 유도하고
드로잉 능력을 보여줄 수 있도록 기획하였습니다.

Q.3 사용에 있어 불편함이 없을까?

header

어느 위치에 있던 원하는 곳으로 이동할 수 있도록 스크롤에 반응하는 헤더를 적용하였습니다.
스크롤을 위로 올릴 때 헤더가 나타나며, 스크롤을 아래로 내릴 때는 메뉴바 아이콘이 남아 언제든지 헤더 리스트를 열어볼 수 있도록 구성하였습니다.
또한 모바일 버전에서는 리스트가 사라지고 메뉴 아이콘만 남도록 하였습니다.

gotop btn

한 페이지에 내용이 많기 때문에 편리한 상단이동을 위한 gotop 버튼을
배치하였습니다. 사용자는 footer에서 최상단으로 이동할 수 있습니다.

index

전체적으로 훑어보는 index 페이지 특성상 스크롤에 과한 제한을 두지 않기 위해
가로 스크롤을 최소화 하여 적용하였습니다.

Q.4 포트폴리오에 직무에 대한 능력이 나타나 있나?

markup

다소 복잡한 구조도 깔끔하게 markup할 수 있는 능력을 보여줄 수 있도록 기획하였습니다.
ex) works visual, about, portfolio font section

animation

애니메이션 효과를 다양하게 적용해 애니메이션 활용 능력을 보여주며
사용자가 지루함을 느끼지 않도록 기획하였습니다.

ex) index visual

scroll trigger

스크롤 트리거를 활용하여 트렌드에 맞는 애니메이션 활용이 가능함을 보여주며
보다 자연스럽고 화려한 애니메이션을 구현하였습니다.