소개
안녕하세요. 백엔드 개발자로 시작해 프론트엔드 개발자로 전향해서 UI 개발에 푹 빠져있는 깡코딩입니다. :)
10여 년 동안 다수의 기업 홈페이지와 쇼핑몰 SI 소상공인 홈페이지를 제작하며 알게 된 UI/UX 제작 기법 노하우 등을 공유하기 위해 이 강의를 시작하게 되었습니다. 국내 여러 대기업 프로젝트를 경험했고 소상공인에게 초점을 맞춘 홈페이지 제작 사업도 하였습니다.
저는 가끔 국내 코딩관련 커뮤니티에서 취미로 만든 애플 인터렉션과 창작 인터렉션을 공유하며 재밌는 기술을 소개했었는데요
많은 분들의 관심을 주셔서 이렇게 강의까지 만들게 되었습니다.
제가 만들어갈 강의는 표준 브라우저를 고려하고 실무에서 사용 가능한 감탄사가 절로 나오는 다양하고 멋진 인터렉션과 모션그래픽을 만드는 방법들을 알려드릴 예정이고 프론트 개발자나, 웹퍼블리셔가 솔루션을 이용해 홈페이지, 쇼핑몰 등을 바닥부터 만들 수 있는 강의도 만들 예정입니다.
그럼 수업에서 뵙겠습니다 :)
강의
전체3로드맵
전체2수강평
- 소스 코드 만으로도 엄청나게 도움이 되는 강의네요!
tmjrong
2024.03.14
1
- 간략하게 응용해볼수 있는 강의였어요 감사합니다.
Glacier
2024.01.16
1
- 어렵지만 열심히 따라해보겠습니다.
foxball
2023.07.04
1
게시글
질문&답변
2024.01.31
반응형에 대해 질문이 있습니다 !
안녕하세요 :) CSS 작성 방식은 프로젝트 요구사항 또는 개발자들의 취향에 따라 달라질 수 있을 것 같아요. 개인적인 생각으로는 모바일이 우선인 프로젝트라면 모바일부터 PC 가 우선이면 PC부터 작성하면 될 것 같습니다. 즉 상황에 따라 작성하면 될 것 같고 웹 사이트의 미니멈과 맥시멈 사이즈는 기획자분과 논의하여 처리하면 될 것 같습니다. 물론 다양한 경우의 수가 있겠지만 인터랙티브한 사이트는 1920사이즈가 넘어가면 성능에 영향을 주는 경우도 있기에 초기에 고려하여 작업 면 될 것 같습니다 :) 물론 개발자의 작업 방식에 따라 달라지겠지만 이너 사이즈를 1920에 맞추고 나머지는 100%로 활용한다면 1920이상의 디자인에도 대응되는 경우가 있지만 디자인에 따라 다른 사항이니 상황에 따라 협의하여 진행하면 될 것 같습니다. :) 그럼 또 다른 궁금증이 생기면 문의주세요 :D
- 0
- 1
- 78
질문&답변
2024.01.10
renderGame 함수에 로그를 찍으면 무한루프가 돕니다
안녕하세요 수업에서 requestAnimationFrame은 무한 반복 되는게 맞습니다~ 필요에 따라 requestAnimationFrame을 종료해야 한다면 cancelAnimationFrame을 사용하여 정지하면 됩니다 :)
- 0
- 1
- 71
질문&답변
2023.11.23
날짜 카운트를 활용하여 시간으로 적용해볼 수 있나요?
안녕하세요:D 네 규격만 맞추면 가능합니다. 😄 만약 규격을 맞추는 작업이 오히려 복잡하다면 소스를 수정하여 만들면 될 것 같습니다. 그럼 또 다른 궁금증이 생기면 문의주세요 :)
- 0
- 1
- 144
질문&답변
2023.11.06
함수가 정의되기 전에 함수 호출
안녕하세요 :) 해당 부분은 getPercet, render 함수를 먼저 작성하였지만 해당 함수들은 바로 실행되는 것이 아니라 메모리에 올라가 있는 상태이고요 init 함수를 호출하면 순차적으로 함수들이 호출됩니다: D 이 부분에 대해 더 자세히 공부하고 싶다면 호이스팅에 관하여 알아보면 도움이 될 것 같아요. :) 그리고 그 외 질문에 대한 주관적인 생각입니다~ 사실 코딩 문법 숙지는 많이 하다 보면 자연스럽게 국어처럼 익숙해져서 어느 순간 잘 알게 되어 있어요. 그리고 계속 개발을 하다 보면 문법은 그냥 기초적인 부분이라고 깨우치게 되실거고 중요한건 문법이 아니라 설계를 하고 문제를 해결하는 부분이 더 중요하단 걸 알게 되실 거예요. 다만 문법을 빠르게 숙지 하기 위해선 반복 학습이 최고라고 생각 되네요~! 그럼 또 다른 궁금증이 생기면 문의주세요 :)
- 0
- 1
- 153
질문&답변
2023.10.16
섹션12 보너스 챕터에 관한 질문입니다!
안녕하세요 :) 먼저 해당 질문은 수업과 연관이 없는 부분 이고 굳이 왜 그렇게 구현 을 해야하는지 의문이 드네요^^; 이 문제를 해결하려면 먼저 animation 속성의 특징을 살펴보고 직접 테스트를 진행해 봐야 할 것 같습니다. (섹션 12는 animation 을 활용해 인터렉션을 구현했기 때문이죠?) ** 굳이 억지로 구현해야 한다면 아래와 같이 구현할 수 있을것 같지만 이 코드는 브라우저마다 호환성이 떨어질 수 있습니다. 이유는 브라우저마다 animation을 처리하는 부분이 다를 수 있기 때문입니다. css수정 (코드 추가) .fix_box .txt.active { opacity: 1 !important; } html수정 (첫번째 엘리먼트에 클래스 추가) 안녕하세요 스크립트 추가 (스크롤 이벤트 발생하면 active 클래스를 삭제해 animation 코드로 진행 하도록 만듬) 스크립트 추가 (스크롤 이벤트 발생하면 active 클래스를 삭제해 animation 코드로 진행 하도록 만듬) arr.classList.remove('active'); ** 다시한번 말하지만 위 코드는 여러 브라우저에서 다르게 동작할 수 있습니다(크롬에서 테스트 진행). 억지로 구현해야 한다면 css animation에 대해 살펴보고 조건문 등을 활용해 직접 테스트를 진행해 보길 추천드립니다. :) ** 만약 해당 문제를 꼭 해결해야 한다면 fake엘리먼트를 사용해 보는 것도 방법이 될 수 있겠습니다. :) 그럼 또 다른 궁금증이 생기면 문의주세요 :D
- 0
- 1
- 249