스킬 찾기

최근 코드와 기능 변경을 바탕으로 문서와 실제 동작의 차이를 찾아 관련 자료와 예시만 수정하고, 사용자에게 미치는 영향을 담은 릴리스 노트를 작성합니다.

• 새 기능에 맞춰 문서를 갱신합니다
• 릴리스 전에 문서를 점검합니다
• 오래된 기본값과 조작 설명을 수정합니다

Paperclip에서 에이전트와 실행 상태를 나타내는 캡슐 이미지를 제작·구현·점검하고, 브랜드 규칙에 따라 용도별 색상과 움직임, 재현 설정을 정리합니다.

• 에이전트 아바타를 제작합니다
• 실행 상태 표시를 구현합니다
• 마케팅용 주요 이미지를 제작합니다

구상이나 기존 저장소를 바탕으로 AI 에이전트의 역할, 보고 체계, 작업 인계를 정리하고 규격에 맞는 회사 또는 팀 패키지를 만듭니다.

• 구상에서 에이전트 회사를 만듭니다
• 저장소를 팀 구성으로 정리합니다
• 역할 분담과 작업 인계를 설계합니다

버튼과 메뉴 등 화면의 애니메이션을 설계·구현·검토해 반응과 움직임을 다듬습니다. 녹화에서 속도 변화와 스프링 움직임을 분석하고 재현 코드와 구현 명세를 정리합니다.

• 버튼과 메뉴에 움직임 추가
• 녹화 속 화면 애니메이션 재현
• 느린 반응과 끊김 원인 조사

모션 그래픽을 기획하거나 개선할 때 메시지, 글자의 움직임, 장면 연결, 읽는 시간을 정리해 하나의 의도가 전달되는 영상과 애니메이션을 설계하도록 돕습니다.

• 짧은 제품 소개 영상 기획
• 움직이는 글자의 가독성 개선
• 공통 모티프로 장면 연결

영상이나 연속 이미지를 스크롤, 포인터, 드래그에 반응하는 웹 모션으로 만듭니다. 소재 제작 계획부터 타임라인 정리, 재생 제어와 동작 확인까지 다룹니다.

• 스크롤과 영상 재생 연동
• 드래그로 동작 상태 전환
• 기존 영상이나 연속 이미지의 웹용 처리

160개 동작 예제에서 웹 페이지와 구성 요소에 맞는 효과를 찾습니다. HTML·CSS·JS를 기존 구조에 맞게 조정하며 문자와 스크롤 효과도 다룹니다.

• 버튼 클릭 시 물결 효과를 넣을 때
• 제목에 타자기 효과를 적용할 때
• 스크롤에 따라 요소를 표시할 때

예술적 애니메이션과 해설 영상의 구도, 스토리보드, 화면 속 움직임을 설계합니다. 서른다섯 가지 스타일, 아홉 가지 해설 패턴과 Canvas 코드로 구현을 돕습니다.

• 해설 영상의 스토리보드를 만듭니다
• 애니메이션의 화풍을 선택합니다
• Canvas로 재현할 움직임을 만듭니다

기존 화면이나 합의된 UI 안에 목적과 사용 빈도에 맞는 애니메이션을 구현합니다. 반복 조작으로 인한 중단과 동작 줄이기 설정도 처리합니다.

• 모달과 드로어의 열기·닫기 애니메이션
• 버튼과 토글 조작에 대한 피드백
• 반복 조작으로 중단되는 애니메이션 조정

고전적인 삽화와 코발트블루를 바탕으로 영화 같은 스크롤 연출을 갖춘 제작 스튜디오 소개 사이트를 브랜드와 사업 내용에 맞춰 만듭니다.

• 건축 스튜디오 사이트 제작
• 고전 미술풍 작품 소개 사이트 제작
• 서비스와 자주 묻는 질문 정리

입자, 프랙털, 데이터의 움직임을 단일 HTML로 시각화합니다. 무거운 계산은 Web Worker로 분리하고 초당 약 60프레임을 목표로 화면을 그립니다.

• 입자와 물리 시뮬레이션 시제품 제작
• 프랙털 시각화
• 오디오와 데이터 시각화 화면 제작

누적된 코드 변경을 차이 파일과 파일별 설명으로 정리합니다. 확인 화면에서 승인, 거부, 부분 승인을 선택해 기록하고 계획 범위에서 거부된 변경을 되돌립니다.

• 코드 이전 후 변경 내용을 확인할 때
• 파일별로 변경을 승인할 때
• 인계 시 검토 결정을 기록할 때

Linear의 지난 24시간 이슈 업데이트, 상태 변경, 담당자 배정과 주기 진행 상황을 일일 요약으로 정리합니다. Orbit이 자동 실행하며 간결한 HTML 화면으로 보여 줍니다.

• Linear의 지난 24시간 업데이트 확인하기
• 담당 이슈와 정체된 이슈의 주의점 파악하기
• 주기 진행 상황과 남은 기간 확인하기

출시 전 제품의 사전 등록 페이지를 브랜드 색상과 글꼴에 맞춰 만듭니다. 로고, 제품 소개, 이메일 등록 양식을 하나의 HTML 파일로 구성합니다.

• 출시 전 이메일 등록 페이지를 만들 때
• 베타 버전 참여자를 모집할 때
• 사전 이용에 대한 관심을 모을 때

화면 구성을 검토할 수 있도록 손으로 그린 듯한 HTML 와이어프레임을 만듭니다. 모눈종이, 메모지, 대략적인 차트와 안별 탭 라벨로 초기 구상을 시각화합니다.

• 포털이나 대시보드의 초기 구성을 검토합니다
• 여러 안을 탭 라벨로 표시합니다
• 화면 초안에 검토용 주석을 붙입니다

실버나 크림색을 바탕으로 부드러운 질감의 웹 시제품을 만듭니다. 이중 테두리 카드, 큰 둥근 모서리, 떠 있는 내비게이션과 자연스러운 움직임을 통일합니다.

• 차분한 SaaS 사이트 시제품 만들기
• 소비자용 사이트의 질감 검토하기
• 카드와 버튼으로 기능 소개하기

여러 소셜 미디어의 팔로워 수, 반응 지표, 인기 게시물, 화제와 댓글을 살펴보는 분석 화면을 만듭니다. 일관된 예시 데이터를 넣은 단일 HTML 시제품입니다.

• 창작자용 분석 화면 시제품 제작
• 여러 소셜 미디어의 지표 표시 설계
• 팔로워 추이와 인기 게시물 표시

기능 제안, 로드맵, 설계 검토, 회고 자료를 의사 결정용 HTML 슬라이드로 정리합니다. 여덟 가지 테마 중 하나로 전체를 통일하고 가로로 넘겨 볼 수 있게 만듭니다.

• 새 기능의 도입 이유 설명
• 로드맵 검토 자료 작성
• 기술 설계 대안 비교

새 기능의 문제, 목표, 범위, 성공 지표를 한 페이지 제품 요구사항 문서로 정리합니다. 사용자 요구, 단계별 실행 계획, 미해결 질문을 담아 HTML로 출력합니다.

• 새 기능의 제품 요구사항 문서 작성
• 목표와 범위에 포함하지 않을 사항 공유
• 성공 지표와 측정 방법 정리

요금제 카드, 기능 비교표, 자주 묻는 질문을 담은 HTML 페이지를 만듭니다. 요금제 수와 추천 표시를 정리해 가입 전에 내용을 비교할 수 있는 시안을 제작합니다.

• 구독 요금 페이지를 시안으로 만듭니다
• 요금제별 기능을 비교합니다
• 개인용과 기업용 요금제를 제시합니다

소스 코드, Figma 내보내기 데이터, 스크린샷에서 색상·글꼴·간격 등의 디자인 설정을 모아 출처와 사용 위치를 기록한 JSON으로 정리합니다.

• 코드에 흩어진 디자인 설정 정리
• Figma 디자인 이전 준비
• 스크린샷에서 디자인 설정 추출

여러 파일의 코드를 고치기 전에 파일 역할, 작업 순서, 위험을 정리하고 이후 편집·변경 사항 검토·빌드 테스트에서 참고할 계획을 만듭니다.

• 여러 파일에 걸친 코드 수정을 계획할 때
• 개별 구성 요소와 공유 부분의 범위를 나눌 때
• 변경 범위와 위험에 따라 작업 순서를 정할 때

프로젝트의 빌드, 타입 검사, 테스트 명령을 실행합니다. 성공 여부와 실패 내용을 보고서와 로그에 저장해 자동 수정 반복 작업의 종료 판단에 활용합니다.

• 프레임워크 이전 후 동작을 검증합니다
• 편집 완료 후 빌드와 테스트를 확인합니다
• 자동 수정 반복 작업의 종료를 판단합니다

검토에서 수락한 결과물을 CLI, 코드 에이전트, Figma 등 지정한 작업 환경에 전달하고, 결과물 관리 정보에 출력 대상과 배포 이력을 추가합니다.

• 검토한 결과물을 코드 에이전트에 전달합니다
• 편집 결과를 원본 Figma 파일에 반영합니다
• GitHub에 PR로 결과물을 전달합니다