개발 스킬

사이트 오른쪽 아래에 여닫을 수 있는 문의 창을 단일 HTML로 만듭니다. 안내문, 소셜 링크, 면담 예약을 모으고 응대 중단 시 연락 양식을 표시합니다.

• 포트폴리오에 문의 창 추가
• 소셜 링크와 면담 예약 경로 통합
• 응대 중단 시 연락 양식 제공

기존 사이트의 소스와 브라우저 동작을 조사해 모양과 조작을 로컬에서 재현합니다. 자료 수집부터 구현, 원본과의 비교 검증, 콘텐츠 교체까지 진행합니다.

• 기존 사이트를 로컬에서 재현하며 학습
• WebGL과 Canvas 효과 조사
• 재현한 사이트와 원본 비교

GitHub 공개 저장소의 주요 지표와 최근 활동을 모아 HTML 대시보드를 만듭니다. 기여자와 이슈 현황을 한 화면에서 확인하고 데이터 출처도 기록할 수 있습니다.

• 저장소 활동을 한눈에 확인
• 오픈 소스 프로젝트 상태 보고서 작성
• 주요 기여자와 최근 이슈 및 풀 리퀘스트 확인

React와 Tailwind로 claude.ai용 복잡한 HTML 아티팩트를 만듭니다. Anthropic의 참고 작업 절차에 따라 삽입 가능한 웹 콘텐츠를 제작합니다.

• claude.ai용 HTML 아티팩트 제작
• React와 Tailwind를 활용한 제작
• 삽입 가능한 웹 콘텐츠 제작

풀 리퀘스트의 검토 의견과 병합 충돌을 확인하고 수정과 검증을 진행합니다. 커밋이나 푸시 전에 읽기 전용 교차 검토를 수행하고 처리 결과와 남은 문제를 보고합니다.

• 풀 리퀘스트 검토 의견에 따른 수정
• 상위 저장소의 변경을 보존하며 충돌 해결
• 커밋이나 푸시 전 수정 내용 검토

글자 배치, 색상, 여백, 움직임의 구체적인 규칙에 따라 React나 Next.js 화면을 구현합니다. 정보 밀도와 레이아웃을 조정하고 정형화된 외형을 피합니다.

• 글자 배치가 돋보이는 홍보 페이지를 만듭니다
• 대시보드 표시와 조작감을 조정합니다
• 정보 밀도와 움직임의 강도를 조정합니다

코드와 문서를 생성할 때 생략 주석이나 미구현 틀로 내용을 대신하지 않고 요청한 모든 항목을 출력하도록 합니다. 긴 출력은 중단점과 재개 위치를 표시합니다.

• 소스 파일 전체 받기
• 지정한 컴포넌트 한꺼번에 생성
• 긴 문서의 내용 생략 방지

Three.js로 브라우저에서 표시하고 조작할 수 있는 3D 요소와 경험을 제작합니다. 장면 구성, 재질 외관, 조작 방식, 렌더링 후 시각 효과를 다룹니다.

• 웹 페이지에 3D 요소 제작
• 브라우저에서 조작하는 3D 경험 제작
• 재질 외관과 조작 방식 조정

shadcn/ui로 구조가 정돈되고 접근성을 고려한 화면 구성 요소를 구현합니다. Stitch에서 디자인을 반복 검토하는 작업과 연결해 사용할 수 있습니다.

• shadcn/ui로 화면 구성 요소 만들기
• 접근성을 고려한 구성 요소 구현
• Stitch 디자인 반복 검토와 개발 연결

GSAP 기본 API로 웹 요소와 SVG의 이동, 회전, 페이드 효과를 구현합니다. 속도 변화와 시간차를 조절하고 화면 너비와 동작 줄이기 설정에 대응합니다.

• 웹 페이지에 이동과 페이드 효과를 넣을 때
• 여러 요소를 시간차로 움직일 때
• 화면 너비에 따라 동작을 바꿀 때

GSAP 플러그인으로 글자와 SVG 애니메이션, 드래그, 스크롤, 레이아웃 전환을 구현합니다. 용도에 맞는 기능 선택부터 등록, 설정, 정리까지 다룹니다.

• 제목을 한 글자나 한 줄씩 표시
• SVG 선 그리기와 도형 변형 추가
• 관성이 있는 드래그 구현

GSAP으로 여러 애니메이션의 순서와 겹침을 구성하고 시작 위치 지정, 그룹 중첩, 재생·일시 정지·역재생·위치 이동 구현을 돕습니다.

• 여러 동작을 정해진 순서로 재생
• 시작 시간을 조정해 동작 겹치기
• 동작을 묶어 재생을 함께 제어

Code Connect로 Figma 디자인 컴포넌트와 코드 컴포넌트를 연결합니다. 공통 디자인 규칙과 컴포넌트의 업데이트를 코드에 자동으로 반영하는 작업을 다룹니다.

• Figma 컴포넌트와 코드 컴포넌트 연결
• 디자인 시스템 업데이트를 코드에 반영
• Code Connect 도입

영화 같은 애니메이션, MiniMax API의 AI 생성 미디어와 생성 예술을 활용해 히어로 페이지와 작품 소개 사이트를 만드는 스킬을 안내합니다.

• 영화 같은 움직임의 히어로 페이지를 만듭니다
• 작품 소개 사이트를 제작합니다
• AI 생성 미디어를 웹에서 활용합니다

GSAP 애니메이션의 수치 변환, 범위 제한, 무작위 변화 코드를 작성하고 검토합니다. 스크롤에 따른 변화, 일정 간격 맞춤, 여러 요소 처리를 지원합니다.

• 스크롤 진행도를 이동이나 회전으로 변환
• 애니메이션 값을 지정 범위로 제한
• 위치나 색상에 무작위 변화 추가

React나 Next.js에서 GSAP 애니메이션 구현과 코드 검토를 돕습니다. 대상 요소와 컴포넌트 범위를 지정하고, 의존 값 변경과 컴포넌트 제거 시 정리 처리까지 다룹니다.

• React 화면에 움직임 추가하기
• 컴포넌트 제거 시 애니메이션 정리하기
• 애니메이션 대상 범위 검토하기

GSAP 애니메이션의 끊김을 줄이도록 위치와 투명도 변경, 화면 측정과 업데이트 방식, 불필요한 애니메이션 중지를 검토해 렌더링 부담을 낮춥니다.

• GSAP 애니메이션의 끊김 줄이기
• 많은 목록 요소의 움직임 개선
• 마우스 추적 효과의 실행 부담 줄이기

Figma 디자인을 원래 모습에 충실한 실제 서비스용 프런트엔드 코드로 변환합니다. 화면 디자인 프레임을 프런트엔드 담당 AI 에이전트에게 직접 전달해 구현에 활용합니다.

• Figma에서 만든 화면을 구현합니다
• AI 에이전트에게 디자인을 전달합니다
• 디자인의 시각적 모습을 코드로 재현합니다

Flutter 앱에 애니메이션 효과와 화면 전환, 화면 안의 움직임을 구현하도록 돕습니다. iOS와 Android용 앱에 모션 디자인을 적용할 때 사용합니다.

• Flutter 화면에 애니메이션 추가
• 화면 전환 시 움직임 구현
• iOS와 Android 화면의 움직임 구현

GSAP ScrollTrigger로 스크롤에 반응하는 웹 애니메이션을 구현합니다. 요소 고정, 진행도 연동, 가로 이동과 함께 위치 재계산 및 페이지 이동 시 정리도 다룹니다.

• 화면에 들어온 요소에 애니메이션 적용
• 스크롤 중 특정 구간을 고정해 표시
• 세로 스크롤로 콘텐츠를 가로 이동

Implement and review GSAP animations in Vue, Nuxt, Svelte, and SvelteKit. It explains when to start animations, how to limit element selection to one component, and how to clean up when that component is removed.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Adding GSAP animations to Vue or Svelte
• Reviewing animation cleanup when components are removed
• Keeping animations scoped to one component

브라우저나 Electron에서 이미지가 저장되지 않거나 0 KB 파일로 내보내지는 문제를 조사합니다. 이미지 데이터 생성과 저장 경로를 나눠 원인을 찾고 수정합니다.

• 내보낸 이미지가 0 KB인 원인을 찾습니다
• 저장 대화상자와 쓰기 오류를 조사합니다
• Electron 이미지 저장을 수정합니다

React, Tailwind CSS, shadcn/ui를 사용해 여러 구성 요소를 조합한 claude.ai용 HTML 아티팩트를 제작하는 스킬입니다.

• claude.ai용 HTML을 만들 때
• 여러 구성 요소로 화면을 시제품화할 때
• React와 shadcn/ui로 제작할 때

기능 추가나 여러 단계의 개발을 위해 공식 자료와 기존 구현 예시를 조사합니다. 사용자에게 보일 완성 목표부터 단계별 작업, 참고 위치, 검증 방법까지 계획으로 정리합니다.

• 기능 추가를 위한 구현 순서 정리
• 구현 전에 API의 문서 근거 확인
• 여러 대화로 개발 작업 나누기