소개
안녕하세요. 백엔드 개발자로 시작해 프론트엔드 개발자로 전향해서 UI 개발에 푹 빠져있는 깡코딩입니다. :)
10여 년 동안 다수의 기업 홈페이지와 쇼핑몰 SI 소상공인 홈페이지를 제작하며 알게 된 UI/UX 제작 기법 노하우 등을 공유하기 위해 이 강의를 시작하게 되었습니다. 국내 여러 대기업 프로젝트를 경험했고 소상공인에게 초점을 맞춘 홈페이지 제작 사업도 하였습니다.
저는 가끔 국내 코딩관련 커뮤니티에서 취미로 만든 애플 인터렉션과 창작 인터렉션을 공유하며 재밌는 기술을 소개했었는데요
많은 분들의 관심을 주셔서 이렇게 강의까지 만들게 되었습니다.
제가 만들어갈 강의는 표준 브라우저를 고려하고 실무에서 사용 가능한 감탄사가 절로 나오는 다양하고 멋진 인터렉션과 모션그래픽을 만드는 방법들을 알려드릴 예정이고 프론트 개발자나, 웹퍼블리셔가 솔루션을 이용해 홈페이지, 쇼핑몰 등을 바닥부터 만들 수 있는 강의도 만들 예정입니다.
그럼 수업에서 뵙겠습니다 :)
강의
전체 3로드맵
전체 2수강평
- 쉽고 빠르게 만드는 다양한 이미지 이펙트!
- 초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
- 초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
게시글
질문&답변
2024.07.04
다음강의 언제나오나요 다음강의는 인터렉티브한 전체적인 웹사이트였으면 좋겠네요
안녕하세요. 먼저 다음 강의를 기다려 주셔서 감사합니다. 현재 여러가지 이유로 아직 계획을 못잡고 있습니다. 좋은 소식으로 찾아 뵐 수 있도록 노력하겠습니다. 감사합니다.😊
- 0
- 1
- 102
질문&답변
2024.06.30
캐릭터 기본 모션 만들기에서 포토샵에 열라고하는데 포토샵없으면 어떻게하죠? 공짜버전있나요?
안녕하세요. 포토샵이 없을 경우 포토샵에서 어떤 작업을 하는지 참고만 하면 좋을 것 같습니다. 포토샵으로 대단한 그래픽 작업을 하는게 아니라 이미지의 크기를 분석하는 등의 기본적인 작업만 하기에 참고만 하여도 될 것 같고, 만약 직접 해보고 싶은데 포토샵이 없다면 해당 작업을 대체할 수 있는 무료 그래픽 툴을 찾아서 하는 것도 방법이 될 수 있을것 같네요. :)
- 0
- 1
- 71
질문&답변
2024.06.26
swiper-slide 적용관련 친절한 설명 감사드립니다. 근대 첫장만 되고 다음장부터
글에 작성하신 예제 코드는 삭제부탁드립니다~ :)
- 0
- 2
- 105
질문&답변
2024.06.26
swiper-slide 적용관련 친절한 설명 감사드립니다. 근대 첫장만 되고 다음장부터
이미지 이펙트를 스와이프 슬라이드에서 실행하는 방법입니다 :) 스와이프 최신 버전을 추가하세요">https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.min.js"> html을 변경하세요 HELLO :D GGANG CODING 스와이프 슬라이드를 초기화 하고 콜백 함수에서 이미지 이펙트를 실행하세요 $(function(){ const swiper = new Swiper('.swiper-container', { effect: 'fade', speed: 0, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, on: { init: function () { var thisSlide = $('.swiper-container').find('.swiper-slide').eq(0); ggangImgEffect(thisSlide, 'ran'); // 최초 처음실행 }, slideChange: function () { var thisSlide = $('.swiper-container').find('.swiper-slide').eq(this.activeIndex); ggangImgEffect(thisSlide, this.activeIndex); } } });});
- 0
- 2
- 105
질문&답변
2024.01.31
반응형에 대해 질문이 있습니다 !
안녕하세요 :)CSS 작성 방식은 프로젝트 요구사항 또는 개발자들의 취향에 따라 달라질 수 있을 것 같아요.개인적인 생각으로는 모바일이 우선인 프로젝트라면 모바일부터 PC 가 우선이면 PC부터 작성하면 될 것 같습니다.즉 상황에 따라 작성하면 될 것 같고웹 사이트의 미니멈과 맥시멈 사이즈는 기획자분과 논의하여 처리하면 될 것 같습니다.물론 다양한 경우의 수가 있겠지만인터랙티브한 사이트는 1920사이즈가 넘어가면 성능에 영향을 주는 경우도 있기에 초기에 고려하여 작업 면 될 것 같습니다 :)물론 개발자의 작업 방식에 따라 달라지겠지만 이너 사이즈를 1920에 맞추고 나머지는 100%로 활용한다면 1920이상의 디자인에도 대응되는 경우가 있지만 디자인에 따라 다른 사항이니 상황에 따라 협의하여 진행하면 될 것 같습니다. :)그럼 또 다른 궁금증이 생기면 문의주세요 :D
- 0
- 1
- 202