개발 스킬

gsap.utils로 GSAP 애니메이션의 수치 변환과 요소 배열 처리를 구현하고 검토합니다. 스크롤 값 변환, 범위 제한, 무작위 값 생성과 일정 간격 반올림을 지원합니다.

• 스크롤 값을 이동이나 회전으로 변환
• 애니메이션 위치를 격자에 정렬
• 요소의 위치와 색상을 무작위로 설정

GSAP으로 여러 애니메이션의 순서와 겹침을 조정합니다. 시작 시점과 구간 이름을 지정하고, 작은 타임라인을 조합하며 재생·일시 정지·역재생을 제어합니다.

• 여러 요소를 순서대로 움직일 때
• 동작이 겹치는 시간을 조정할 때
• 레이블로 연출 구간을 정리할 때

GSAP으로 웹 요소와 SVG에 애니메이션을 넣는 코드 작성과 검토를 돕습니다. 속도 변화, 순차 표시, 화면 너비와 동작 줄이기 설정에 따른 조정을 다룹니다.

• 웹 요소에 등장 효과를 추가할 때
• 여러 요소를 시간차로 움직일 때
• 화면 너비에 따라 동작을 바꿀 때

Vue나 Svelte에 GSAP 애니메이션을 구현하고 시작 시점과 대상 범위를 설정합니다. 컴포넌트 제거 시 정리와 ScrollTrigger 위치 갱신도 다룹니다.

• Vue나 Svelte에 움직임 추가
• 애니메이션 대상을 컴포넌트 내부로 제한
• 컴포넌트 제거 시 애니메이션 정리

GSAP 애니메이션의 속성, 화면 갱신 순서, 다수 요소와 마우스 추적 구현을 검토해 끊김을 줄입니다. ScrollTrigger 갱신과 정리도 확인합니다.

• GSAP 애니메이션 끊김 검토
• 긴 목록의 애니메이션 부하 줄이기
• 마우스 추적 효과 최적화

GSAP의 ScrollTrigger로 웹페이지 스크롤에 맞춰 요소를 이동하거나 표시하고 일정 구간에 고정합니다. 시차 효과와 세로 스크롤에 따른 가로 이동도 다룹니다.

• 화면에 들어온 카드 순서대로 표시하기
• 스크롤 중 섹션 고정하기
• 스크롤 양과 애니메이션 진행 연동하기

GSAP 플러그인으로 웹페이지의 글자, 도형, 드래그 조작에 움직임을 추가하도록 돕습니다. 등록 절차부터 배치 변경, SVG 선 그리기와 형태 변환까지 다룹니다.

• 그리드와 목록의 배치 변경 애니메이션
• 놓은 뒤에도 관성으로 움직이는 카드
• 제목을 한 글자씩 표시하는 효과

React와 Next.js에 GSAP 애니메이션을 추가합니다. 대상 요소와 적용 범위를 지정하고, 값 변경에 따른 갱신과 컴포넌트 해제 시 정리를 돕습니다.

• React 컴포넌트에 애니메이션 추가
• 애니메이션 대상 요소의 범위 제한
• 화면 전환 시 정리 작업 점검

Three.js의 3D 물체에 금속·유리·천·애니메이션풍 질감을 설정합니다. 재질 선택, 텍스처와 반사 조정, 맞춤 렌더링 표현과 부하 감소까지 다룹니다.

• 3D 물체에 금속·유리 질감 적용
• 애니메이션풍 음영 추가
• 텍스처와 주변 환경 반사 조정

Three.js의 3D 장면에 빛과 그림자를 설정해 야외나 스튜디오 조명을 구성합니다. 광원 선택, 환경 이미지 조명, 그림자 문제 해결과 렌더링 부하 조정을 돕습니다.

• 야외의 햇빛과 하늘 조명 구성
• 스튜디오 조명이나 삼점 조명 설정
• HDR 이미지로 환경 조명 적용

Three.js로 브라우저의 3D 장면, 카메라, 렌더링을 설정합니다. 물체 배치와 부모·자식 관계, 그룹 조작, 애니메이션, 화면 크기 대응과 자원 해제를 지원합니다.

• 브라우저에 3D 장면을 표시합니다
• 원근감에 맞는 카메라를 선택합니다
• 여러 물체를 묶어 함께 움직입니다

웹 화면 코드를 최신 Web Interface Guidelines와 대조해 개선할 부분을 확인합니다. 지적 사항은 파일명과 줄 번호를 함께 표시합니다.

• 웹 화면 코드를 검토합니다
• 기준에 따라 접근성을 확인합니다
• 디자인과 사용성을 검토합니다

Three.js로 기본 도형, 맞춤형 입체, 입체 글자와 점군을 만듭니다. 정점 편집, 형상 병합, 반복 형상 그리기를 통해 형태 제작과 렌더링 부하 조정을 돕습니다.

• 기본 입체와 곡선을 따르는 형상 제작
• 맞춤형 메시 생성과 변형
• 입체 글자, 점군, 와이어프레임 표시

Three.js의 3D 화면에 클릭·터치 선택, 카메라 조작, 물체 이동·회전·크기 조절을 구현합니다. 입력 처리부터 조작에 따른 시각적 변화까지 다룹니다.

• 클릭이나 터치로 3D 물체 선택
• 카메라 회전·확대 및 축소 추가
• 물체 드래그·회전·크기 조절

React 화면에 늘이기와 줄이기, 준비 동작, 가감속 등의 애니메이션을 구현합니다. Disney의 애니메이션 12원칙을 Framer Motion 코드 예시와 연결합니다.

• 버튼 호버와 누르기에 반응을 추가할 때
• 준비 동작과 곡선 경로가 있는 점프를 만들 때
• 목록 항목을 순서대로 표시할 때

Three.js의 3D 화면에 빛 번짐, 배경 흐림, 색상 보정 등을 추가합니다. 여러 효과의 조합부터 사용자 정의 화면 효과와 렌더링 부하 조정까지 다룹니다.

• 3D 장면의 물체에 빛 번짐 추가하기
• 배경 흐림과 화면 색감 조정하기
• 선택한 물체를 윤곽선으로 강조하기

React와 Next.js 코드를 성능 관점에서 검토합니다. 우선순위가 있는 규칙으로 데이터 요청 대기, 전송 코드량, 불필요한 재렌더링을 줄이도록 돕습니다.

• React 코드의 성능을 검토할 때
• Next.js 데이터 요청을 개선할 때
• 전송하는 JavaScript 양을 줄일 때

Three.js에서 삼차원 모델에 움직임을 구현합니다. GLTF 애니메이션 재생, 골격과 표정 조작, 여러 동작의 부드러운 전환을 지원합니다.

• GLTF 모델에 포함된 동작 재생
• 대기·걷기·달리기 동작의 부드러운 전환
• 표정과 골격에 움직임 추가

Three.js에서 형태와 표면 표현을 제어하는 셰이더를 구현합니다. 물결 변형, 윤곽 발광, 그라데이션, 녹아 사라지는 효과를 만들고 기존 재질을 확장합니다.

• 표면이 물결처럼 움직이도록 구현
• 윤곽 발광이나 그라데이션 추가
• 녹아 사라지는 효과 구현

Tailwind CSS v4로 색상과 모서리 반경 등 공통 규칙을 정의하고 버튼과 폼을 재사용할 수 있는 구성 요소로 만듭니다. 화면 너비 대응과 다크 모드도 다룹니다.

• 재사용할 수 있는 화면 구성 요소 모음 제작
• 색상과 구성 요소의 외관 통일
• 화면 너비 대응과 다크 모드 구현

Integrate FLUX image generation and editing into applications through the BFL API. The guide covers authentication, checking asynchronous results, completion notifications through webhooks, request limits, error handling, regional endpoints, and downloading generated images before their URLs expire.

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

• Add FLUX image generation and editing to an application
• Implement result checks and completion notifications
• Handle request limits and API errors

Three.js에서 3D 모델, 텍스처, 배경과 반사용 HDR 이미지를 불러오는 구현을 돕습니다. 여러 에셋의 진행 상황 관리, 압축 형식 지원, 실패 시 재시도까지 다룹니다.

• GLTF/GLB 모델을 표시합니다
• 여러 에셋의 로딩 진행 상황을 표시합니다
• HDR 이미지를 배경과 반사에 사용합니다

React에서 늘어난 불리언 설정을 정리하고 부품 조합과 상태 관리를 재검토합니다. 재사용 가능한 컴포넌트 설계를 위한 지침과 코드 개선 예시를 제공합니다.

• 불리언 설정 항목을 정리할 때
• 재사용 가능한 컴포넌트 모음을 설계할 때
• 상태 관리와 컴포넌트 구성을 검토할 때

Three.js에서 3D 표면에 이미지와 영상을 적용하고 배경과 반사를 설정합니다. 배치, 색상, 반복을 조정하며 압축, 재사용, 해제로 텍스처 메모리를 관리합니다.

• 3D 표면 이미지의 위치와 반복 조정하기
• HDR 이미지로 배경과 반사 설정하기
• 3D 표면에 영상과 Canvas 내용 표시하기