손편지들

상자를 열었다.
어두운 상자 속에 고이 담아두었던 손글씨들을 읽을 때면 마음이 몽글몽글해진다. 동아리 활동이 담긴 롤링페이퍼, 군대 간 친구의 편지, 여행을 떠난 친구가 보낸 편지 등 추억들을 곱씹으며 하나하나 쌓아본다.
성인이 된 후 5평 남짓한 방 안의 작은 상자 속에 모아온 손편지들은 단순한 손편지가 아니라 제가 살아온 발자취이자 소중한 추억의 역사이며 동시에 인간관계에 대한 결과물이라고 할 수 있습니다. 편지 속에 담긴 저는 어떤 사람일까요? 프로필보기

  • SKILLS

    CSS와 더불어 SCSS로 코드를 정리하여 가독성을 높이고 유지보수를 용이하게 할 수 있습니다.

  • WEB PUBLISHING

    개인 프로젝트 결과물로, SCSS로 작업한 홈페이지 1개와 기존 CSS로 작업한 홈페이지 2개가 있습니다.

  • CLONE CODING

    기존의 홈페이지와 동일하게 퍼블리싱하면서 수정이 필요하다고 생각하는 부분들을 보완하였습니다.

  • PRACTICAL CODING

    다양한 실전 퍼블리싱 예제를 모은 작업물로 5가지 카테고리로 구성하였습니다.

  • DESIGN WORKS

    포토샵과 일러스트를 사용한 완성물입니다.

  • EPILOGUE

    마지막으로 전하고 싶은 내용을 간략하게 담았습니다.

01SKILLS

What I Can Handle

  • H5

    HTML5

    웹표준과 웹 접근성을 준수하는 HTML 정보 구조설계로 웹사이트를 퍼블리싱하기 위해 노력합니다. 웹표준을 위해 HTML5에서 권장하는 마크업방식과 시멘틱 태그를 사용해 전체 레이아웃을 설계합니다.

  • C3 SC

    CSS3 / SCSS

    안정적인 CSS 속성을 사용해서 크로스브라우징(cross browsing)을 고려합니다. 내비게이션, 탭 메뉴, 어코디언 등을 CSS만 사용하여 제작할수 있습니다. SASS(SCSS)의 네스팅 기능으로 보다 깔끔한 구성을 할 수 있습니다.

  • JS

    JQuery

    웹 퍼블리싱에 필수적인 상호작용을 위한 제이쿼리는 플러그인을 사용하기보다는 순수한 제이쿼리 코딩으로 제작합니다.

  • VS

    Souce Code Editor

    소스 코드 편집기로 비주얼스튜디오코드(Visual Studio Code)를 사용합니다.반복되는 header, footer는 시간적, 공간적 절약을 위해 인클루드(include)방법으로 연결할 수 있습니다.

  • RW

    Responsive Web

    미디어 쿼리를 사용하여 여러 디바이스에서 최대한 의도한 내용이 정상적으로 동작하도록 반응형 웹사이트를 구현할 수 있습니다.

  • PS AI Fg

    Design Tools

    포토샵, 일러스트를 이용하여 기본적인 이미지 편집, 제작 등이 가능합니다. 피그마를 통해 UI/UX 디자인을 할 수 있습니다.

02WEB PUBLISHING

러쉬코리아홈페이지

LUSH 홈페이지

  • Viewport반응형
  • 프로젝트 담당범위기획 / 디자인 / 퍼블리싱
  • UI 디자인 방식Figma
  • 퍼블리싱 제작방식HTML+CSS+JQUERY
  • 레이아웃 제작방식SCSS
  • 제작 참여도개인 100%
  • 참고 사항

    메인페이지 + 로그인폼 + 장바구니창
    러쉬코리아 홈페이지를 반응형으로 제작하여 다양한 디바이스를 통해 사이트 이용이 보다 용이하도록 제작하였습니다.

경복궁 홈페이지

경복궁 홈페이지

  • Viewport반응형
  • 프로젝트 담당범위기획 / 디자인 / 퍼블리싱
  • UI 디자인 방식Figma
  • 퍼블리싱 제작방식HTML+CSS+JQUERY
  • 레이아웃 제작방식CSS Flex
  • 제작 참여도개인 100%
  • 참고 사항

    메인페이지 & 상세페이지 7개
    우리나라의 대표 관광지인 경복궁에 대하여 다양한 정보를 알 수 있도록 홈페이지를 리뉴얼하였습니다. 처음 제작한 웹사이트로 마크업을 수정 및 보완중입니다.

하이브엔터테인먼트 홈페이지

HYBE ENT. 홈페이지

  • Viewport반응형
  • 프로젝트 담당범위기획 / 퍼블리싱
    디자인: Soop Ent. & YG Ent.
  • UI 디자인 방식Photoshop
  • 퍼블리싱 제작방식HTML+CSS+JQUERY
  • 레이아웃 제작방식CSS Grid & Flex
  • 제작 참여도개인 100%
  • 참고 사항

    메인페이지
    숲엔터테인먼트와 YG엔터테인먼트의 UI디자인을 참고하였습니다. 현재 뮤직비디오 풀페이지인 하이브엔터테인먼트의 메인페이지를 아티스트 및 최신 정보들을 추가 배치하여 리뉴얼하였습니다.

03CLONE CODING

STARBUCKS CODING PC ver. MOBILE ver.
NETFLIX CODING PC ver. MOBILE ver.
Google Chrome CODING PC ver. MOBILE ver.

04PRACTICAL CODING

← Slide 마우스휠 왼쪽으로 슬라이드

Card-UI

artist newalbum card ui
service price card ui
profile card ui darkmode
starbucks shop ui

Form & Modal

youtube modal window
newsletter scribe
signin
signin
loginform

Tab & Accodion

tab menu
tab menu
accordion
accordion
tab menu

Navigation

navigation style
navigation style
navigation style
navigation style
navigation style

Hover & Ani

hover animation
hover animation
loading animation
loading animation
border animation
flex hover animation

05DESIGN WORKS

The Basic Is The Best.

가장 기본적인 것이 가장 위대한 것이다.

"기본에 충실한 마인드와 빠른 습득력을 가진 열정적인 웹 퍼블리셔 이유정입니다."
퍼블리싱 원칙과 기본기
폴더 구조, 경로를 체계적으로 정리하고, 파일 및 폴더 네이밍에 규칙을 두어 효율적인 업무가 가능합니다. 퍼블리싱 작업 시, 한 눈에 알아볼 수 있도록 적절한 주석을 달고, 가독성을 높이기 위해 인덴트에 신경 쓰면서 스스로의 작업 효율 뿐 아니라, 협업하는 동료까지 생각하는 기본기를 갖추었습니다.
하드코딩을 원칙으로
기능성을 제외한 모든 작업은 하드코딩을 원칙으로 순수 CSS 작업을 합니다. 레이아웃 작업 시 Position, Float, CSS Flex와 CSS Grid를 용이하게 사용합니다. 직접 모든 코딩의 구조를 설계하고 속성을 입력하기 때문에 후에 유지보수 및 수정 시에도 어렵지 않게 작업할 수 있습니다.
체계적인 퍼블리싱
퍼블리싱 작업에 앞서 와이어프레임, 기능정의서, HTML 구조설계를 먼저 진행하여 꼼꼼하고 체계적으로 작업을 하고 있습니다. 이는 프로젝트를 원활하게 진행할 수 있도록 하는 초석이 되며, 나아가 더욱 완벽한 결과물을 만들어내는 데 도움을 주고 있습니다.
꾸준한 배움의 자세
숙련된 퍼블리셔로의 발전뿐만 아니라 더 나아가 프론트엔드 개발자가 되는 것을 목표로 합니다. 이를 위해 Java script, JAVA, React, Next 등 개발 언어를 더 다양하게 배우고자 준비하고 있습니다. 저 자신의 부족한점을 찾고 개선하기 위해 언제나 배우고 빠르게 발전해나가는 사람이 되겠습니다.