Contents

01Resume

02

03

04

Graphic

Web portfolio(twosomeplace)

Experience

abstractconceptplanningprototype & design & coding

shugazinebirdiechancejyplanninga&bskinoaktree

photoshopbanner designillustratortake a picture

sketch & conceptdesign & color & sizebusiness card

infographic resume

05Identity

03

08

18

05

09

25

06

394041

10

30

0607

11

3235

Resume01

3

4

Graphic02

photoshopbanner designillustratortake a picture

5

주근깨 피부 보정얼굴 윤곽선 보정

원본 보정 후

피부보정

체형보정

6

슬라이드 배너 리뉴얼

소스 1 소스 2

원본 일러스트 제작

이미지합성

일러스트 제작

7

제품촬영

8

Web portfolio(twosomeplace)03

브랜드 유형

브랜트 컨셉

주요 고객층

오리지널 사이트 주소

리뉴얼 사이트 주소

제작 프로그램

제작 기간

디바이스

디저트 전문 카페

모던 / 클래식 /심플

일상에 지친 학생,직장인

https://www.twosome.co.kr

https://twosome-ej.github.io/

html5 & css3 & jQuery & photoshop

5일

mobile (320-599px)

tablet (600-1023px)

pc (1024px 이상)

9

컨텐츠 재조정을 통한

레이아웃 재구성

전체적으로 세련되고

모던한 느낌

Reneweal Synopsis

반응형인가?

명도대비가 적절한가?

Y

Y

N

N

N

N

안정된 레이아웃을 사용했는가?

Mob_Tab_PC 반응형 제작

레이아웃 재구성

카테고리가 정리되었는가

카테고리 정리

제작컨셉

메타태그 및 html 수정

웹표준에 적합한가

320 - 599(px)

600 - 1023(px)

1024 - 1920(px)

10

가나다라바마사12345678

abcABC

나눔고딕

Fonts

Color

Contrast

R34 | G34 | B34

C83 | M78 | Y77 | K60

#222222

R221 | G3 | B48

C16 | M100 | Y81 | K0

#dd0330

R255 | G255 | B255

C0 | M0 | Y0 | K0

#FFFFFF

main

point

sub

dd0330

5.08 : 1

DD0330

3.12 : 1

기본

*명도 대비 3.0이상 4.5미만은 18pt이상 (또는 14pt이상 + bold 사용)

11

Sketch

12

Html & Css & jQuery

[웹페이지 공통 헤더]

①

①

②

②

③

③

④

④

⑤

⑤

⑥

⑥

⑦

⑦

⑧

⑧

익스플로러 호환성 보기 태그 사용- 본 페이지에서는 IE=edge 를 사용해 항상 최신 버전의 브라우저를 기준으로 랜더링 되도록 제작하였습니다.

html 문자 인코딩-전세계 문자 기호 인코딩 방식이 utf-8을 사용해 한글깨짐등을 방지했습니다.

페이지 설명 태그 사용-검색 엔진 사용시 페이지 노출도를 올리기 위해 상세설명을 추가했습니다.

페이지 타이틀 태그각 페이지 마다 타이틀태그를 다르게 설정해 접근성을 향상시켰습니다.

파비콘 설정 (ico파일 제작)

반응형 웹페이지 제작을 위한 뷰포트 사용

외부 스타일 시트 관리-유지보수 및 일괄적 관리를 위해)

익스플로러 크로스브라우징을 위한 조건부 주석

13

[메인페이지]

[웹페이지 메인]

①

②

html5 시맨틱 코드 사용으로 웹접근성 향상

재사용 및 유지보수 이유로 외부 스크립트 사용페이지 하단배치로 페이지 로딩시간 단축

②

①

14

[로그인 페이지]

①

①

②

②데이터를 넘기기위한 폼 태그-개인정보이기에 post 메소드 사용

적절한 인풋타입사용

15

[메뉴목록 페이지]

16

17

Experience 04

shugazinebirdiechance

jyplanninga&b skinoaktree

18

Shugazine

Work

사이트명 : 슈가진

타켓: 20대 여성

폰트: noto Sans KR

포인트컬러:#4c145e(보라색)

컨셉: 여성 슈즈 전문 온라인몰/슈즈 퍼스널 큐레이션

특징: 리액트 사용으로 빠른 로딩 / PC 버전 없이 모바일 웹페이지 구현

www.shugazine.com

1. 광고배너 제작

자료 촬영 (신발 등 판매 제품) 및 자료 서치

포토샵 편집

요청사이즈 및 크기 조절

2.아이콘 제작

일러스트레이터를 이용 픽토그램 디자인

3.모바일 웹페이지 제작

1차 러프 기획서에서 포토샵으로 2차 디테일 디자인 입혀서 플로우 차트 제작 후 개발팀 전달

개발팀에서 css 스타일 적용 전 파일이 넘어오면 css 스타일 추가 퍼블리싱

완료 후 테스트 (예외처리/오류 디버깅)

git push

4.편집 디자인

배송 스티커/안내문/명함/브로셔/엽서 디자인

5.코트라 콜라보

명화 콜라보 제품 디자인(인솔)

6.사업계획서 ppt 디자인

19

[대상의 포인트를 잡아 단순화 아이콘 제작]

[광고배너 제작]

미끄러지지 않아요

20

[메인페이지 플로우차트]

21

22

[주문결제 플로우차트]

23

24

[브로셔 디자인]

[코트라 명화 콜라보 디자인]

25

Birdiechance

Work

1. html / css / jQuery

전체 홈페이지 리뉴얼(메인/로그인/상세페이지 등등..)

판매자 페이지 리뉴얼(PC / Mobile 버전)

관리자 페이지 리뉴얼

서버전송 메일 폼 제작

크로스 브라우징

소셜 공유하기 버튼 기능 플러그인 설치 (카카오/페이스북/트위터)

2. pixel 작업

페이스북 pixel 작업 및 관리

3. SEO 웹표준 웹접근성

메타태그 수정 및 검색 노출도 향상

이미지 크기 최적화 및 alt 값 누락 오류 수정

중복 css 정리

4.제품 상세페이지 제작

5.제품촬영 및 누끼 작업

6.광고배너 제작 (자사 쇼핑몰/페이스북/인스타그램/구글광고)

7.편집디자인

배송 스티커/안내문/행텍 제작 및 인쇄

8. 상품 등록/재고/배송/송장 관리

사이트명 : 버디찬스

타켓 : 30-60대 남성 골퍼

폰트 : 나눔고딕

포인트컬러 : #077af4(파란색)

컨셉 : 프리미엄 골프 오픈마켓

다수의 판매자가 모여 제품을 판매하는 형식

특징 : ASP 사용 / 반응형은 아니지만 모바일로 접속시

모바일 ui 경로로 이동

www.birdiechance.com

26

[판매자 페이지 리뉴얼 후]

[판매자 페이지 리뉴얼 전]

[관리자 페이지 리뉴얼 전]

[관리자페이지 리뉴얼 후]

27

[페이스북 결제 픽셀 코드 심기]

[SEO 최적화 프론트 파트 체크]

28

[제품 상세페이지 제작]

29

[광고 배너 제작] [모바일 메인 배너 제작]

30

제이와이기획

Work

1. html / css / jQuery

메인페이지 반응형 리뉴얼

카테고리 스크롤 이동 액션

스크롤시 이벤트 추가

사이트명 : 제이와이기획

특징 : 자사 홈페이지 리뉴얼

html/css/jQuery 만 이용

원페이지 스크롤 이동

http://jyplanning.co.kr/new/

31

카테고리 클릭시 해당 영역으로 스크롤 이동

스크롤시 차례로 display:block;

동영상 배치

픽토그램식 설명

다음 지도 연결

setInterval 활용 화살표 무한 액션

32

A&B 피부과

Work

1. html / css / jQuery

메인페이지 반응형 리뉴얼

관리자 고객상담 페이지 리뉴얼

게시판 디자인 리뉴얼

2. 상세페이지 제작

진료 과목 및 피부과 소개 페이지 포토샵 제작 후 관리자에서 업로드

3.이벤트 관련 디자인

이벤트 광고배너 이미지 제작

광고 랜딩페이지 제작

4. 페이스북 픽셀 설치 및 관리

사이트명 : A&B 피부과

타켓 : 20-40대 여성

폰트 :나눔고딕

포인트컬러 : #333333(블랙)

컨셉 : 전문적이고 최신식의 세련된 피부과

특징 : PHP사용

www.anbskin.com

33

[의료진 소개 페이지]

[진료 소개 페이지]

34

[이벤트 페이지]

[이벤트 광고배너] [이벤트 랜딩 페이지]

35

[제공 이미지]

[이벤트 랜딩 페이지]

오크트리 이미지 외주

업종 : 커피전문점

요청사항 : 더치커피 병 외부 디자인 요청

컨셉 : 빈티지 / 손그림

특징 : 제공 이미지 바탕으로 파일 제작 요청

36

[필요한 오브젝트 선따기]

37

[완성본 목업]

38

Identity05

my logo sketchconceptdesign & colorsizebusiness card

39

Sketch

Concept

은진(eunjin)의 이니셜 퍼즐맞추기 (흥미)

+ =Ej

40

R0 | G71 | B140

C99 | M76 | Y15 | K3

#00478C

R51 | G51 | B51

C69 | M63 | Y62 | K58

#333333

Design & Color

Size

R255 | G255 | B255

C0 | M0 | Y0 | K0

#FFFFFF

13mm

11mm

최소사이즈

32.5mm

27.5mm

기준사이즈

41

Business card

Byun Eun Jin (변은진)

010 2326 2816

eun-jin93@naver.com

http://byunej.github.io

mobile

email

homepage