디자인 시스템 사용해보기(1): Vapor (by goorm)

AI의 발전으로 요즘은 개발 속도가 정말 어마무시하게 단축된 것 같습니다. 그래서인지 저는 요즘 단순히 UI와 기본적인 기능을 정확히 구현하는 것만으로는더이상 강점이 되지 않는다고 느낍니다. 저 또한 앞으로는 디자인과 UI 구현에만 많은 공을 들여 개발하기 보다는최적화와 고도화에 더 시간을 쓰고 공부해야할 것 같다고 느낍니다! 이러한 상황에서 디자인 시스템은 빠르고 일관된 UI 개발을 지원해줘서 정말 편리합니다.저는 다음주에 해커톤에 나가게 되어서, 빠른 UI 구현 능력이 굉장히 필요한데요.이에 앞서 디자인 시스템 Vapor를 소개해드리려 합니다! 그냥 혼자 공부하며 기록한거라 제 글에 오류가 많을 수 있습니다.함께 사용해보며 마구마구 지적해주세요!! 🔗 Overview - Vapor UI Vapor..

• format_list_bulleted 웹 개발 일기
• · 2025. 9. 20.
• textsms

[Framer Motion] Framer Motion을 정복해보자😵‍💫-1(2)

📌실습파일 전체 다운: https://github.com/yeom-kenco/framer-motion-study-kit.git📌PreviewwhileHover={{ y: -6, scale: 1.02, boxShadow: "0 18px 40px rgba(0,0,0,0.18)", }}whileTap={{ scale: 0.98, y: -2 }}transition={{ type: "spring", stiffness: 320, damping: 26 }}→ 이런 간단한 프로퍼티만으로 호버시 떠오르는 효과, 눌리는 효과를 구현할 수 있다는게 정말 편리합니다! Week 1 — Step 2: 인터랙션 (whileHover / whileTap)목표: “사용자 입력에 반응하는” 마이크로 인터랙션을 정확히 쓰는 법. 개..

• format_list_bulleted Study Notes/Framer Motion
• · 2025. 9. 19.
• textsms

[Framer Motion] Framer Motion을 정복해보자😵‍💫-1(1)

실습 예제를 따라하면서 직접 값을 하나하나 변경해봤더니, 벌써 이해가 쏙쏙 되는 기분입니당다들 따라서 같이 공부해봐요..ㅎㅂㅎ! 📌실습파일 전체 다운: https://github.com/yeom-kenco/framer-motion-study-kit.git Week 1 — Step 1: motion 기본기 (initial / animate / transition)1) 개념 딱 3개만motion.*: 어떤 태그든 motion.div, motion.button처럼 감싸면 “움직일 수 있는 컴포넌트”가 됨.initial / animate: 시작 상태 → 도착 상태를 선언. style이 아니라 애니메이션 상태를 적는다고 생각하기.transition: “어떤 느낌”으로 이동할지.type: "spring": 탄성(..

• format_list_bulleted Study Notes/Framer Motion
• · 2025. 9. 19.
• textsms

[Framer Motion] Framer Motion을 정복해보자😵‍💫-0

다양한 인터랙티브 요소로 역동적인 웹 화면 구현을 자유자재로 하고싶습니다! 이에 앞서, 우선 Framer Motion을 잘 다뤄보자는 목표를 세워봤습니다. 사실 라이브러리는 어떻게 공부해야하는지 막연하길래아래 계획을 토대로 차근차근 주차별 진도 나가보겠습니다ㅎㅎ 실습을 따라하기 귀찮으신 분들을 위해 제 git레포지토리도 공유해드립니다.포크해서 사용하세요~!블로그 업데이트 된 곳까지는 늘 레포지토리도 동일하게 업데이트 할 예정입니다. GitHub - yeom-kenco/framer-motion-study-kit: ✍🏻framer-motion을 스스로 학습하며 공유하기 위해 올려둔 실습✍🏻framer-motion을 스스로 학습하며 공유하기 위해 올려둔 실습 파일들입니다. 계속해서 업로드 될 예정입니다...

• format_list_bulleted Study Notes/Framer Motion
• · 2025. 9. 19.
• textsms

[Challenge] 나만의 포트폴리오 사이트 만들기: 프론트엔드 개발자

이번주는 저만의 포트폴리오 사이트를 만들었습니다👻 디자인은 피그마로 진행했습니다.내용 같은 경우, 프로젝트 등 다양한 작업을 늘 기록하고 문서화를 잘 해뒀더니 금방 정리할 수 있었습니다.개발은 사실상 GPT 마에스트로가 된 지금의 저는, 요구사항을 디테일하게 프롬프트에 적으며...빠르게 마칠 수 있었습니다!^^ 구성과 디자인을 하며 가장 많은 참고를 한 사이트 하나 추천드립니다!정말 깔끔하고 군더더기 없어서 바쁜 인사팀들이 포트폴리오를 보시기에는 딱이지 않을까 싶었습니다.구글에 프론트엔드 개발자 포트폴리오를 치면, 가장 최상단에 나와서 아마 관심있는 분들이면 많이 보셨을 것 같습니다.좋은 본보기를 주신 개발자님 여기서나마 감사인사 드립니다ㅎㅅㅎ... 송진경 | 프론트엔드 개발자프론트엔드 개발자 송진경의..

• format_list_bulleted Project & Challenge/[Challenge] 나만의 포트폴리오 사이트 제작
• · 2025. 9. 18.
• textsms

📌버전별 테일윈드 세팅

프로젝트 때마다 테일윈드 세팅하려고 또 서치하거나 검색하기 번거로워서(외우면 되긴 하지만 예...)저번 프젝에 세진님이 정리해주신 글을 가져왔어요. 땡스투 세진...^^💜📌참고 자료https://v3.tailwindcss.com/docs/installation/using-postcsshttps://velog.io/@oneook/tailwindcss-4.0-%EB%AC%B4%EC%97%87%EC%9D%B4-%EB%8B%AC%EB%9D%BC%EC%A1%8C%EB%82%98%EC%9A%94https://malwareanalysis.tistory.com/8031. tailwindCss 세팅 방법 알아보기이전에는 tailwindCSS v3.4.17을 사용했었다. tailwindCss v3.4.17은 레퍼런스가..

• format_list_bulleted Study Notes
• · 2025. 9. 15.
• textsms