Welcome to consulting web company

WEB PUBLISHER Kim Kun Ae

창작(Design)/구조(HTML)/표현(CSS)/동작(JQuery)을 통해
표준 웹, 쉬운 접근성 웹을 만드는 퍼블리셔입니다.

PROCESS

Parallax Scrolling Portfolio

매년 올해의 웹 트렌드 중에 항상 뽑히고 있는 패럴럭스 스크롤링 홈페이지
공간감, 다이나믹한 연출, 모션이 장점으로 포트폴리오 만들기에 더할 나위 없이 좋은 선택이라고 생각하여 제작했습니다.

Parallax scrolling portfolio 시안작업

작업순서

벤치마킹>작업구상>사용할 무료이미지 구글링>시안작업>HTML코딩>CSS코딩> Mark up검사>JQuery코딩>검사>완료

작업에 대해서

이미지는 가로크기 1920px에 톤을 맞춰주고 공간감을 주기 위해 모두 블러 효과를 줬습니다. CSS 작업 까지는 특별한 어려움은 없었습니다. 반대로 JQuery에서 많은 수정이 있었습니다. 패럴럭스 원리를 알기위해 검색을 했지만 플러그인이 아니고 군더더기 없는 샘플을 얻기가 쉽지 않아 알고 있는 선에서 응용으로 if문과 .scroll, .scrollTop을 통해 특정위치에 올 때 모션이 되게 작업했었습니다.

이 후 개인적으로 페이지가 열리자마자 모션을 추가로 넣고 싶었고, 원페이지의 특성상 로딩에 대한 문제, 빠르게 메뉴를 클릭 시 animate 모션이 잘 되지 않는 문제가 있었고 면접관에게 ‘높이 값을 직접 계산해 적어 넣는 것은 불편하기 때문에 계산이 필요 없는 방법을 쓰는 것이 좋다’라는 말을 들었습니다. 그 당시에는 무슨 말씀을 하시는지 몰랐고 다시 한번 검색과 공부를 하는 과정에서 높이 계산이 따로 필요 없는 .height와 .offset를 알게 되어 어떤 말씀을 하셨던건지 알게 되었습니다. 그래서 다시 한번 작업을 했으며 추가로 onlaod를 통해 맨 위 화면이 fadeIn되게 하였습니다. 또 .load도 알게 되어 적용했습니다.

JQuery작업에서 많은 문제와 어려움이 있었지만 .height와 .offset 같은 메소드를 사용하면 나중에 유지보수에도 CSS만 수정하면 되겠구나라는 생각이 들었습니다. 그리고 하는 김에 셀렉터 메소드들을 검색해 prev/prevAll/children/resize/one등 쉽고 간단하지만 미처 몰랐던 셀렉터들도 배웠습니다. 이번의 기회로 누구에게 물어보는 것 보다 혼자 찾아가며 완성해 JQuery에 대해 많은 것을 깨우치고 정말 좋은 공부가 되었던 것 같습니다.

Responsive wep Portfolio

모바일, 테블릿, 테블릿PC, PC등 다양한 디스플레이에 맞춰 CSS를 Media Query로 제작하였습니다.

Responsive wep Portfolio 제작한 이미지 소스들

작업순서

작업구상>사용할 그래픽소스 디자인작업>시안작업>HTML코딩>CSS코딩> Mark up검사>JQuery코딩>검사>완료

작업에 대해서

개인포트폴리오이기 때문에 개성과 스킬에 중점을 두고 작업했습니다. 동영상을 넣고 기초적인 메소드지만 많은 것을 적용해보는 작업이였습니다. 오토 슬라이드, 바네이메뉴, 아코디언 패널, 모달윈도우를 만들고 그 밖에 animate, slid Up/Down, prependTo, appendTo, next, scrollTop등 다양하게 사용했습니다.

이후 Media Query와 JQuery를 같이 적용하면서 px단위와 %단위 적용이 쉽지 않아 정확하게 원하는 모션이 만들어지지 않는 시행착오를 겪었습니다. 특히 디스플레이별로 슬라이드에 masked된 li들의 사이즈와 animate가 잘 되지 않았는데 div, ul, li는 디스플레이별로 px사이즈를 주고 animate는 marginLeft를 -100%씩 주는 것으로 해결했습니다. 그리고 디스플레이별로 다른 모션을 주기 위해 많은 고민을 했었는데 모바일 HTML구조를 더 코딩하고 클레스를 따로 줘서 PC이하 사이즈에서는 PC HTML를 display:none;시키는 방식으로 작업했었습니다. 만약 현재 다시 작업하게 된다면 나누지 않고 하나의 구조에 if문과 resize(); 값으로 모션 작업할 수 있을 것 같아 수정할 예정입니다.

그 외에 div를 링크 줄 수 있는 onclick을 알게 되었고 작업에 넣으려 했으나 JQuery 인터렉션을 위해 적용하지 않았습니다.

Mothermam wep

기본적인 홈페이지 형태로 HTML5, CSS3, JQuery로 제작하였습니다.

Mothermam wep 스케치러프

작업순서

밴치마킹>작업구상>사용할 그래픽소스 디자인작업>시안작업>HTML코딩>CSS코딩> Mark up검사>JQuery코딩>검사>완료

작업에 대해서

학부모들과 같이 볼 아이들을 위해 과한 모션은 피하고 파스텔톤 컬러에 대부분의 모서리를 라운드 처리 작업했습니다. 홈페이지에 들어갈 이미지들을 러프스케치 후 패쓰툴로 작업했습니다.

전체적인 레이아웃과 UI디자인은 기업형에 가깝게 했으며 메인 컨텐츠 구성은 크게 학부모 알림 컨텐츠와 아이들의 일상 기록 컨텐츠로 구성했습니다.

Xpressengine으로 게시판, 겔러리게시판, 최근게시글, 로그인 연동작업 하고 홈페이지와 어울리게 게시판 이미지와 CSS 수정했습니다.

특별한 어려움은 없었으며 모든 페이지에 이미지 작업으로 인해 작업기간이 조금 길었습니다.

HAVE A WAY WITH PROGRAM

    • Photoshop
    • Photoshop
    • Level 5.0
    • Illustrator
    • Illustrator
    • Level 4.5
    • Flash
    • Flash
    • Level 3.0
    • Dreamweaver
    • Dreamweaver
    • Level 3.0
    • After Effects
    • After Effects
    • Level 1.5
    • Excel
    • Excel
    • Level 1.0
    • PowerPoint
    • PowerPoint
    • Level 4.0
  • Photoshop

    5.0 / 5.0

    line

    모든 기본툴과 메뉴사용이 능숙하며 일러스트/아이콘/배너/메인시안/서브시안/GIF 애니메이션 등 다양하게 디자인 가능합니다.
    다년간의 쇼핑몰 경력으로 보정과 쇼핑몰/종합몰 상세페이지 제작이 능숙합니다.

  • Illustrator

    4.5 / 5.0

    line

    포토샵 패스툴 사용하는 정도의 선으로 대부분 끝나기 때문에 일러스트레이터의 사용이 거의 필요 없게 됐지만
    기본툴을 사용할 줄 알며 패스툴을 잘 사용합니다.

  • Flash

    3.0 / 5.0

    line

    툴 사용을 할 줄 알며 심볼과 무비클립 애니메이션에 대한 이해도가 높습니다.
    인터렉션을 위한 기초 액션스크립트 사용을 할 줄 알고 있습니다.

  • Dreamweaver

    3.0 / 5.0

    line

    하드코딩이 가능하고 군더더기 없이 정리된 시멘틱구조를 위해 드림위버 사용을 지양하는 편이지만
    div와 테이블구조 짜기, 맵 링크 등 드림위버로 웹페이지 제작 가능합니다.

  • After Effects

    1.5 / 5.0

    line

    웹에서 쓰일 동영상에 간단한 효과들과 색감 조절을 할 수 있습니다.
    동영상 자르기, 붙이기와 같은 기본 편집이 가능하고 적당한 용량의 인코딩을 할 수 있습니다.

  • Excel

    1.0 / 5.0

    line

    엑셀을 능숙하게 다루지는 못하지만 작업에 있어서 수정할 것/보류/완성 등과 같은 내용들을 편하게 볼 수 있게 분류해
    표를 짜서 커뮤니케이션/보고용 문서로 작성 가능합니다.

  • PowerPoint

    4.0 / 5.0

    line

    파워포인트 프로그램을 이용해 PPT를 위한 문서를 작업할 수 있습니다.
    PPT의 이해를 돕기 위한 레이아웃 구성/그래픽 작업/그래프/애니메이션을 만들 수 있습니다.

WEB SKILL

Web Design

────

구상부터 시작해서 완성까지 모두 작업 가능합니다. 구상 이 후에는 컨셉에 맞는 드로잉과 일러스트 완성이 가능합니다.
때로는 개성적으로, 때로는 트렌드에 맞게 Creative 디자인 웹을 제작합니다.
제작 시 시각화하는 디자인 뿐만 아니라 사용자를 위한 UX/UI design과 Interaction design을 항상 염두합니다.
그래픽 디자인 한 작업을 HTML과 CSS로 웹페이지로 구현 가능합니다.

Web Publishing

────

HTML, CSS, JQuery등 하드코딩이 가능하며, W3C(World wide web consortium)에서 제정한
웹표준/웹접근성/크로스브라우징/시멘틱마크업을 준합니다.
다양한 사이즈의 스마트폰, 테블릿, PC에 맞게 레이아웃과 디자인이 변하고 움직이는 반응형 웹(미디어쿼리) 제작 가능합니다.
기초 Javascript가 가능하고 자바스크립트의 라이브러리인 JQuery를 사용합니다.
패럴럭스 디자인(스크롤)의 Javascript/JQuery 코딩이 가능하며 배경의 공간감 까지 생각합니다.

PORTFOLIO

Web design

────

  • 삼성가전 포트폴리오

    ───

    삼성전자
    온라인 종합몰 협력사

  • 1973JJ 포트폴리오

    ───

    1973JJ

  • 데코르떼팝 포트폴리오

    ───

    데코르떼팝

  • 사랑스러운 시보니 포트폴리오

    ───

    사랑스러운 시보니

Web publishing

────

  • 패럴럭스 포트폴리오 홈페이지

    ───

    패럴럭스 포트폴리오 홈페이지

  • 엄마맘 어린이집 홈페이지

    ───

    엄마맘 어린이집 홈페이지

  • 개인 포트폴리오 홈페이지

    ───

    개인 포트폴리오 홈페이지

  • 삼성전자 기획전1
  • 삼성전자 기획전2
  • 삼성전자 배너작업
닫기

삼성전자 온라인 종합몰 협력사

  • 매월 기획전 페이지 작업
  • 종합몰(AK/CJ/현대몰/홈앤쇼핑/인터파크)용 가전 제품 웹표준 상세페이지 제작/수정
    (약 300~400가지 상품 제작/수정)
    + 웹표준 상세페이지 예시 보기
  • 각 종합몰 기획전과 노출되는 베너들 작업
    + 현대몰 예시 보기
    (링크 페이지 부터 하위 모든 페이지 작업)
  • 1973JJ 메인
  • 1973JJ 배너
  • 1973JJ 상세페이지
닫기

1973JJ

http://www.1973jj.co.kr

  • 고도몰을 이용한 홈페이지 리뉴얼(총괄 디자이너와 협업)
  • 매달 마다 메인 디자인 작업 후 교체
  • 베너/구글 광고 베너/팝업 등 제작
  • 상품 상세페이지 제작(약 300여건)
    -인물보정/페이지 디자인/섬네일 제작/상품등록/관리 등
  • 보조 웹디자이너 작업 수정
  • Decorte 상세페이지
닫기

Decorte

http://www.decortepop.co.kr

  • 상세페이지 레이아웃 리뉴얼
  • 상품 상세페이지 제작(약 10여건)
  • 시보니 상세페이지
닫기

시보니

http://www.siboni.co.kr

  • 오픈몰/홈페이지
    상품 상세페이지 제작(약 100여건)
  • 패럴럭스 포트폴리오 홈페이지
닫기

패럴럭스 포트폴리오

http://kkaparal.dothome.co.kr

  • 패럴럭스 웹 디자인
  • 패럴럭스 웹 퍼블리싱 작업
    (HTML/CSS/Mark up/JQuery 등)
  • 엄마맘 어린이집 홈페이지
닫기

엄마맘 어린이집

http://mothermam.com

  • 일러스트 디자인/웹 디자인
  • 웹 퍼블리싱(HTML/CSS/Mark up/JQuery 등) 작업
  • 로그인/최근 게시글/게시판 작업
  • 개인 포트폴리오 홈페이지
닫기

개인 포트폴리오

http://kkapofol.dothome.co.kr

  • 일러스트 디자인/웹 디자인
  • 웹 퍼블리싱(HTML/CSS/JQuery) 작업
  • 최근 게시글/게시판 작업