Hello,
Hyelim World!

높이높이 날아 비상할 준비가 되어있는 웹퍼블리셔 서혜림 입니다.
참신하고 새로운 디자인에 대한 지속적인 관심과 효율적인 시멘틱 웹페이지 구축을 위하여 늘 준비되어 있습니다.

About

  • 프로필 사진

  • Profile

    • 서혜림 Hyelim Seo
    • 1992. 05. 25
    • Seoul Seongbuk-gu of Korea
    • 명지전문대학 정보통신과 졸업
    • 종로 하이미디어 디지털디자인 과정 수료
    • 강남 하이미디어 UI/UX 과정 수료
    • # Strengths

      IT 배움에는 끝이 없다고, UI/UX 엔지니어링 강의 수료로 실무경험도 했습니다.
      그저 회사 업무로만 생각하지 않고 배우며 저와 회사를 같이 성장시키는 그런 사원이 되겠습니다.
    • # Weaknesses

      꼼꼼함이 약점이지만 저를 더 단단하게 만드는 과정이라고 생각합니다.
      책임진 일을 꼼꼼하고 완벽하게 하려해 주위에서 걱정을 하곤 했습니다.
      하지만 그 일을 마친 후 성취감으로 인해 더 전진할 수 있게 되었습니다.
    • # Opportunities

      제가 좋은 사원이 되기 위한 기회라고 생각합니다.
      때를 놓치지 않고 제 역량을 모두 발휘해, 넘어져도 털고 일어나서 달려가겠습니다.
    • # Threats

      때론 어떤 위협이 와도 흔들리지 않고 외유내강인 모습으로 단단하게 그 자리를 지키겠습니다.
      묵직하고 신뢰감 있는 그런 사원이 되겠습니다.

    Career

    • 티밥 미디어

      현장실습을 계기로 인연이 되어 다시 불러주셔서 취직하게되었습니다.
      하게 된 업무는 바이럴마케팅으로 SNS관리, 블로그 마케팅을 했습니다.
      그 외 상세페이지 포토샵, 일러스트 작업과 거래처 관리를 했습니다.
    • 유세스파트너스 - LG 자회사

      웹퍼블리셔로 들어가 계약한 회사의 홈페이지를 만들어주는 업무를 했습니다.
      그 외로 계약서 담당, 거래처 PM, 마감, 경리 등 여러가지 업무를 담당했습니다.
      정직원으로 채용될 예정이었지만 부서가 없어지면서 권고사직으로 퇴사를 하였습니다.
    • 투맥 인디고

      같이 일했던 이사님 소개로 면접을 보고 홈페이지 관리자로 들어가게 되었습니다.
      온라인 사업이 처음인 회사라 처음부터 끝까지 작업하였고, 블로그, 인스타 등 SNS 바이럴마케팅 업무,
      네이버 키워드 광고, 지하철 광고 등 여러가지 광고 업무를 맡아서 했고 인디고 경리 업무 등 다양한 업무를 경험했습니다.

Skill

  • HTML5

  • CSS3

  • jQuery

  • Photoshop, Illustrator

95%
95%
85%
90%

강남 하이미디어 UI/UX 엔지니어링 과정 수료

  • 프로토타입 제작 - 기초데이터 수집 및 스케치, 제작 및 사용성 테스트
  • 디자인 구성요소 설계 - 스토리보드, 사용성 구성요소 설계
  • 디지털 디자인 제작 - UI, GUI 디자인
  • UI 구현 - 설계 검토, 표준 수립, 제작하기
  • 디지털디자인 수정 - 수정 보완
  • 포트폴리오 제작 - 디지털디자인 실무 프로젝터 제작

Portfolio

제가 제작한 Portfolio와 회사에서 웹퍼블리셔로 실무 작업을 했던 홈페이지들입니다.

  • 반응형 홈페이지 - batenkaView

    • 반응형을 하기 위해 만든 홈페이지입니다. 화면 가로를 줄이면 재미난 효과를 보실 수 있습니다.
      레이아웃 구조와 jQuery, css를 다양하게 구현할 수 있어서 서브페이지도 다 만들어보았습니다.
    • 사용 기술 : 슬라이드배너, 반응형 슬라이드배너, 모바일 최적화 등
    • 사용 색상 :
  • 삼표 홈페이지View

    • Markup, css, jquery를 다양하게 사용할 수 있는 페이지들이 많아 연습하기가 좋아서 서브페이지까지 다 만들어보게 되었습니다.
    • 사용 기술 : 슬라이드배너, 자동 슬라이드, slideup, 스크롤 함수, 탭 메뉴, 서브 메뉴 등
    • 사용 색상 :
  • eSpoir 홈페이지View

    • 메인페이지와 메뉴를 작업하였으며 4가지의 슬라이드를 구현해 보았습니다.
      1200px, 1000px ,768px의 각각 반응형이며 모바일에도 최적화 하였습니다.
    • 사용 기술 : 슬라이드 배너, 무한 슬라이드, 공지 슬라이드, 반응형, 모바일 최적화 등
    • 사용 색상 :
  • 타이거프린팅 홈페이지View

    • 지금도 사용되고 있는 회사를 다닐 때 만들었던 거래처 홈페이지입니다.
      오른쪽 aside 부분 작업가이드, 처음이세요까지 다 만들었습니다.
    • 사용 기술 : 슬라이드 배너, on off 이미지, scroll 함수, 탭 메뉴, top버튼 등
    • 사용 색상 :
  • 박카스 홈페이지View

    • 마우스 휠 함수를 사용해 만든 박카스 홈페이지입니다.
      휠 함수를 씀으로써 가독성을 높이고 줄였을 때에는 코딩을 수정하여 모바일 최적화로 만들었습니다.
    • 사용 기술 : 마우스 휠 함수, 반응형, 모바일 최적화 등
    • 사용 색상 :
  • 반응형 홈페이지 - myblogView

    • 줄였을 때 반응형으로 반응할 수 있도록 연습한 페이지입니다.
      스크롤 함수도 다양하게 사용하였고, 슬라이드배너도 반응형으로 작업해보았습니다.
    • 사용 기술 : 슬라이드배너, 자동 슬라이드, 스킬 progress bar, 모바일 최적화 등
    • 사용 색상 :
  • 전주페스티벌 홈페이지View

    • 무한슬라이드 배너, 자동슬라이드를 사용하기 위해 만든 홈페이지입니다.
      다양한 배너를 사용함으로써 스킬을 더 늘릴 수 있었습니다.
    • 사용 기술 : 무한 슬라이드배너, 자동 슬라이드, 자동 페이드배너, scroll 함수 등
    • 사용 색상 :
  • Wonderlandams 홈페이지View

    • 반응형으로 제작한 홈페이지로, 다양한 jquery를 할 수 있어서 만든 홈페이지입니다.
      모바일에서도 최적화가 되게 만들었고, 서브페이지도 작업하였습니다.
    • 사용 기술 : 무한 슬라이드배너, 자동 슬라이드, 자동 페이드배너, scroll 함수 등
    • 사용 색상 :
  • SK매직몰 홈페이지View

    • 여러 함수를 사용할 수 있어 만들어 본 홈페이지입니다.
      메인페이지만 작업하였습니다.
    • 사용 기술 : 무한 슬라이드배너, 자동 슬라이드, 슬라이드 배너, 동영상, 마우스 휠 함수 등
    • 사용 색상 :
  • 위메프 홈페이지View

    • 웹접근성과 홍보 마케팅을 고려한 검색엔진 최적화 IR처리를 신경써서 만든 홈페이지입니다.
    • 사용 기술 : 무한 슬라이드배너, 자동 슬라이드, 슬라이드 배너, 서브 메뉴, 2중 슬라이드, 스크롤 함수 등
    • 사용 색상 :
  • 삼진어묵 홈페이지View

    • 스와이프 플러그인을 이용한 슬라이드를 위해 만들어보았습니다.
      여러 슬라이드 뿐 아니라 jQuery도 다양하게 들어가 있어서 재미난 느낌을 줍니다.
    • 사용 기술 : 무한 슬라이드배너, 자동 슬라이드, 슬라이드 배너, 서브 메뉴, 스와이프 플러그인, 스크롤 함수 등
    • 사용 색상 :

batenka

반응형을 하기 위해 만든 홈페이지입니다.
화면을 줄이면 재미난 효과를 보실 수 있습니다.
레이아웃 구조와 jQuery, css를 다양하게 구현할 수 있어서 서브페이지도 다 만들어보았습니다.

홈페이지 보러가기

01

#

PC 화면

#

모바일 화면

PC에서는 화면을 내렸을 때 header가 고정이 되며 css가 바뀌는 효과를 주었습니다.
이미지는 백그라운드로 넣었으며, li크기에서 텍스트 높이를 jQuery에서 동적으로 계산해 딱 맞게 만들었습니다.
모바일 화면에서는 css를 수정해 최적화를 시켰습니다.

02

#

PC 화면

#

모바일 화면

PC화면과 모바일에서의 슬라이드를 다르게 구현해보았습니다.
화면이 resize가 되며 화면이 작아졌을 시 이전버튼도 생기게 했습니다.

#

팝업창을 사용해 contact 정보를 기재해 놓았습니다.
이 외에도 서브페이지를 다 작업하였으며 각 서브페이지의 컨셉에 맞게 작업을 하였습니다.
반응형을 우선순위로 두고 작업한 홈페이지이고 서브페이지들이 공통된 부분이 많아, 처음 레이아웃작업과 jQuery작업이 필요한 페이지였습니다.

삼표

레이아웃 구조를 잡는 연습을 하기 좋았고 Markup, css, jquery를 다양하게 사용할 수 있는 페이지들이
많고 슬라이드 배너와 페이드 배너를 연습하기가 좋아서 서브페이지까지 다 만들어보게 되었습니다.

홈페이지 보러가기

01

#

PC 화면

footer 부분 '메뉴전체보기' 부분을 작업하였습니다.
누르면 slideUp 되며 나타납니다. TOP버튼을 누르면 화면 맨 위로 이동합니다.

02

#

PC 화면

서브페이지 같은 경우에는 스크롤하면 위에 부분이 고정이 되며
다른 페이지로도 쉽게 이동이 가능 하도록 만들었습니다.
또한 계열사 부분은 탭형식으로 만들어서 다른계열사를 누르면 내용이 바뀌도록 했습니다.

#

2중 탭 형식으로 작업한 contact us 페이지입니다.
삼표는 총 36개의 html파일로 제일 많은 페이지를 작업한 홈페이지입니다.
레이아웃 기반을 단단히 다질 수 있었습니다.

에스쁘아

메인페이지와 메뉴를 작업하였으며 4가지의 슬라이드를 구현해 보았습니다.
1200px, 1000px ,768px의 각각 반응형이며 모바일에도 최적화 하였습니다.

홈페이지 보러가기

01

#

PC 화면

#

#

모바일 화면

espoir의 모든 슬라이드는 PC화면과 모바일화면을 다르게 제작했습니다.
PC화면의 이미지와 모바일 이미지를 다르게 사용해 최적화를 했습니다.
또한 모바일에서는 햄버거 메뉴를 사용해 다른 디자인으로 제작했습니다.

02

#

PC 화면

#

모바일 화면

무한슬라이드로 작업한 슬라이드 배너입니다.
모바일 화면에서는 레이아웃 구조를 다르게 잡아 최적화한 슬라이드로 만들었습니다.

03

#

#

PC 화면

#

모바일 화면

무한으로 작업하였으며 가운데 오면 커지게 하는 효과를 준 슬라이드입니다.
많은 슬라이드가 있었고 PC화면, 태블릿, 모바일에 최적화를 하다보니 어려움이 있었지만 그만큼 성취감이 있던 홈페이지였습니다.

박카스

마우스 휠 함수를 사용해 만든 박카스 홈페이지입니다.
휠 함수를 씀으로써 가독성을 높이고 줄였을 때에는 코딩을 수정하여 모바일 최적화로 만들었습니다.
서브 페이지들은 각각의 스크롤 함수를 사용해 다른 효과를 주었습니다.

홈페이지 보러가기

01

#

PC 화면

#

#

모바일 화면

PC화면과 모바일 화면의 레이아웃을 다르게 만들었습니다.
햄버거 메뉴를 사용해 다른 서브페이지로도 이동이 쉽게 만들었습니다.

02

#

#

#

PC 화면

#

#

#

모바일 화면

서브페이지에서도 PC, 모바일의 구조를 다르게 잡아 보기 쉽게 만들었습니다.
서브페이지들은 스크롤 함수를 사용해 해당 영역에 오면 애니메이션 효과를 주도록 만들었고
FAQ같은 경우엔 클릭하면 내용이 보이게 했습니다.

03

#

#

PC 화면

#

#

모바일 화면

광고 서브페이지 같은 경우에는 탭형식으로 만들어 년도별로 나열했습니다.
또한 lightbox를 사용해 해당 이미지를 크게 볼 수 있도록 만들었습니다.
마우스 휠과 스크롤 함수를 사용해 재미난 효과를 줄 수 있었고 PC와 모바일의 레이아웃 구조를 다르게 할 수 있어서 재밌게 작업했던 홈페이지입니다.

myblog

줄였을 때 반응형으로 반응할 수 있도록 연습한 페이지입니다.
스크롤 함수도 다양하게 사용하였고, 슬라이드배너도 반응형으로 작업해보았습니다.

홈페이지 보러가기

01

#

PC 화면

#

모바일 화면

PC화면과 모바일 이미지를 다르게 사용하여 최적화한 슬라이드입니다.
모바일에서는 글씨효과를 주지 않았습니다.
또한, myblog에서도 햄버거 메뉴를 사용하였습니다.

02

#

PC 화면

#

모바일 화면

모바일 화면에서의 가독성을 위해 레이아웃 구조를 바꾸는 작업을 하였습니다.
화면이 영역에 들어올 때 글씨들의 애니메이션 효과가 있습니다.

03

#

PC 화면

#

모바일 화면

플러그인을 사용해 해당하는 홈페이지들을 탭형식으로 나열했습니다.
반응형과 여러 애니메이션 효과를 줌으로써 세련된 페이지를 만들 수 있었습니다.

전주페스티벌

무한슬라이드 배너, 자동페이드인 배너, 자동슬라이드를 사용하기 위해 만든 홈페이지입니다.
다양한 배너를 사용함으로써 스킬을 더 늘릴 수 있었습니다.

홈페이지 보러가기

01

#

PC 화면

메인 화면으로 3개의 이미지가 자동으로 페이드인, 페이드아웃이 되는 슬라이드 효과를 주었습니다.
click을 누르면 스크롤 함수가 발생해 다음 영역으로 이동합니다.

02

#

#

PC 화면

무한 슬라이드로 맨 앞의 내용이 뒤로 붙으면서 무한으로 재생됩니다.
탭 형식으로 다른 탭을 선택했을 때 자동슬라이드가 시작됩니다.

03

#

PC 화면

메인페이지만 작업한 홈페이지로 직접 무한슬라이드 코드를 짜느라 힘들기도 했지만 그만큼 성취감이 있던 페이지입니다.
반응형으로는 제작하지 않았습니다.

wonderland

반응형으로 제작한 홈페이지로, 다양한 jquery를 할 수 있어서 만든 홈페이지입니다.
모바일에서도 최적화가 되게 만들었고, 서브페이지도 작업하였습니다.

홈페이지 보러가기

01

#

PC 화면

#

모바일 화면

PC화면에서 이미지들한테 마우스를 올려놓고 있으면 이미지가 크기가 변하면서 자동으로 바뀌며 백그라운드 텍스트, 색상이 바뀌는 효과를 주었습니다.
모바일에서는 텍스트와 색상만 바뀌도록 했습니다.

02

#

PC 화면

#

모바일 화면

서브페이지에 들어갔을 때의 화면입니다.
스크롤 해서 내렸을 시 마우스 휠을 위로 했을 때 헤더가 나타나는 효과를 주었습니다.
모바일에서는 레이아웃 크기 조정을 했습니다.

03

#

#

PC 화면

#

#

모바일 화면

스크롤을 내리며 보이지 않던 동영상들이 자동으로 재생되게 했습니다.
또한 맨 밑에는 다른 서브페이지로 이동할 수 있도록 작업해두었습니다.
서브페이지들의 동영상 구조는 다 같아서 용량문제로 같은 동영상을 넣어두었습니다.

sk매직몰

여러 슬라이드와 마우스 휠, 스크롤 함수를 다양하게 사용할 수 있어서 만들어 본 홈페이지입니다.
기본을 견고하게 다지고자 만들어봤습니다.

홈페이지 보러가기

01

#

PC 화면

각 서브메뉴들을 작업한 화면입니다.
영역을 나누어 백그라운드와 내용을 바꾸었습니다.

02

#

PC 화면

마우스 휠 함수를 사용해 고정되어 있는 높이값 내에서 움직이도록 했습니다.
오른쪽의 aside메뉴의 '맨위로' 버튼은 이 영역에 올 때 옆에서 나타나도록 효과를 주었습니다.

03

#

#

PC 화면

가상선택자를 이용하여 플레이버튼을 두었고,
눌렀을 시 동영상을 볼 수 있는 화면을 만들었습니다.

04

#

PC 화면

후기 사진과 텍스트를 같이 무한으로 슬라이드 되게 만들었습니다.
기본 슬라이드와 레이아웃 구조, 동영상, 무한슬라이드가 잘 되어있는 메인페이지여서 기본을 다지는데 도움이 된 홈페이지였습니다.

위메프

웹접근성과 홍보 마케팅을 고려한 검색엔진 최적화 IR처리를 신경써서 만든 홈페이지입니다.
복잡한 레이아웃을 연습할 수 있었으며 여러 슬라이드와 서브메뉴들을 신경써서 만든 홈페이지입니다.

홈페이지 보러가기

01

#

#

PC 화면

각 서브메뉴들을 작업한 화면입니다.
서브메뉴 뿐 아니라 전체 메뉴를 볼 수 있는 메뉴가 따로 있어서 작업했습니다.

02

#

PC 화면

작은 이미지에 마우스를 올리면 각각의 큰 이미지가 왼쪽에 보여집니다.
4개의 탭 구조로 되어있어서 총 72장의 이미지를 IR처리 했습니다.
작은 배너 슬라이드는 기본 슬라이드로 작업했습니다.
모든 슬라이드, 이미지에 텍스트가 있는 것들은 모두 IR처리를 했습니다.

03

#

#

PC 화면

위의 메뉴들을 클릭하면 각각의 컨텐츠들이 보여집니다.
화면을 내릴 시 고정이 되며 css가 변경되는 효과를 주었고,
최근 본 상품도 고정이 되는 효과를 주었습니다.

04

#

PC 화면

페이드 슬라이드를 사용해 jQuery로 숫자증가 함수를 주었습니다.
복잡한 구조의 레이아웃 연습에 많은 도움이 되었고, 시멘틱 코딩과 IR처리를 많이 해보는 경험이 되었습니다.

삼진어묵

스와이프 플러그인을 이용한 슬라이드를 위해 만들어보았습니다.
레이아웃을 잡는 연습도 했을 뿐더러 여러 슬라이드,
jQuery도 다양하게 들어가 있어서 재미난 느낌을 줍니다.

홈페이지 보러가기

01

#

#

PC 화면

서브메뉴를 작업한 화면입니다.
오른쪽에 있는 맞춤검색 옵션들을 클릭하면 검색버튼이 활성화가 됩니다.

02

#

#

PC 화면

스크롤을 내렸을 시 메뉴부분이 고정이되는 효과가 주어집니다.
또한 옆 aside 부분은 삼진어묵베스트 영역에 오면 고정이되어 따라다닙니다.
삼진어묵 베스트 부분의 아이템들에게 마우스를 올리면 이미지 파일명이 바뀌며 이미지가 바뀝니다.

03

#

PC 화면

무한 슬라이드로 만들었으며 자동으로 넘어가게 했습니다.
이전, 다음버튼이나 해당 아이템에 마우스를 올리면 멈추고 다시 떼면 자동슬라이드가 시작이됩니다.

04

#

PC 화면

스와이프 플러그인을 이용해 만든 스와이프 슬라이드입니다.
잡아서 넘기면 2개씩 넘어가도록 설정했고 css는 제가 수정했습니다.
여러 슬라이드를 작업해보기 좋았고 transform, transition 효과를 가장 많이 쓴 홈페이지였어서 더 재밌게 작업했습니다.

Contact

준비되어 있는 웹 퍼블리셔 서혜림, 언제든 연락주세요 :)

  • EMAIL US

    shl9205@naver.com
  • PHONE

    010-7233-9179
  • BLOG

    블로그

    Click
TOP