YESEULKIM

안녕하세요 !
사용자에게 긍정적인 경험을
주고싶은 웹 퍼블리셔
김예슬입니다.

안녕하세요! 김예슬입니다

사용자가 브랜드에 대한 좋은 기억을 플랫폼에서 이어갈 수 있도록 탄탄한 코드와 재밌는 UI를 만드는 웹퍼블리셔가 되고싶습니다 재밌고 인터랙티브한 웹사이트를 만드는 것도 좋아하지만, 모든 사람들이 동등한 기회로 웹사이트를 접할 수 있도록 웹 접근성에 대해 더욱 공부해보고 싶습니다!

  • 웹표준을 준수하며 시맨틱 태그를 적절하게 사용합니다. 또한, 필요한 부분에 WAI-ARIA를 사용합니다. 현재는 HTML을 이용한 검색엔진최적화(SEO) 방법에 대해 공부하고 있습니다. 자세한 내용은 하단 TIL에서 확인하실 수 있습니다 😁🌹

  • float, position, flex로 탄탄한 레이아웃과 animation을 통해 인터랙티브한 반응형 웹사이트 구현이 가능합니다. 추후에 유지보수를 위해 CSS를 컴포넌트화하는 방법을 공부해보고 싶습니다. 또한 전처리기인 SCSS에 관심이 많아 공부할 계획을 가지고 있습니다 🔍

  • Javascript ES6와 라이브러리 JQuery로 다양한 컴포넌트 구현이 가능하고 플러그인 활용 및 커스텀이 가능합니다. 기본기가 중요하다고 생각되어 지속적으로 프로젝트를 통해 자바스크립트를 학습하며 복습하고 있습니다. 추후에 React, Vue를 배워볼 생각입니다

  • Photoshop, Illustrator, Font Awesome, slick, notion등 다양한 툴을 사용할 수 있습니다. 새로운 툴을 접하는 것을 좋아해 다른 툴을 활용하여 협업하고 공부하는 것도 기대하고 있습니다!

PROJECTS

모든 프로젝트는 100% 기여했으며, 01번 프로젝트 외에 모든 웹사이트는 반응형으로 만들었습니다.😊

MDM웹사이트 클론코딩

이 웹사이트를 통해 fullpage.js를 배워보았습니다. 단순히 플러그인을 학습한 것이 아닌, 플러그인의 코드를 직접 뜯어보며 커스텀하고 활용하는 방법을 익혔습니다. 기존 웹사이트는 이곳에서 확인할 수 있습니다.😁

3일 소요 HTML CSS JQuery Fullpage.js Swiper.js

공공기관 웹사이트 클론코딩

해당 프로젝트를 통해 모든 최신 브라우저에 동일하게 웹사이트가 보이도록 크로스브라우징 연습을 해보았고 웹접근성을 위해 tab으로 웹사이트를 이동할 수 있도록 코딩하였습니다.

8일 소요 HTML CSS JQuery Fullpage.js Swiper.js

UI Components

자바스크립트 공부를 위해 웹사이트에서 사용되는 다양한 컴포넌트를 마크업해보았습니다. 또한, JSON-placeholder라는 mock api를 통해 데이터를 받아오는 연습을 해보았습니다.

7일 소요 HTML CSS JS Fullpage.js Swiper.js

Monet Garden

GSAP과 GSAP 플러그인 ScrollTrigger를 학습하고 만든 웹사이트입니다. 스크롤 시, 컨텐츠에 애니메이션을 넣어보았으며, 랜딩 웹사이트의 기본적인 레이아웃을 마크업해보았습니다.

2일 소요 HTML CSS JS GSAP ScrollTrigger

Background Settings

colors

opacity

소셜 미디어 웹사이트