nexu-io

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

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

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

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

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

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

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

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

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

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

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

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

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

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

신문지 느낌의 배경에 검은색 초굵은 글자와 가는 구분선을 배치해 스위스 인쇄물풍 웹 프로토타입을 만듭니다. 빨간색으로 강조하며 편집 기사와 작품집을 단단한 인상으로 구성합니다.

• 신문풍 편집 페이지 시안 제작
• 제작사 포트폴리오 제작
• 선언문 사이트 제작

제품 공개, 예고편, 배경 반복 영상에 쓰는 3~10초 동영상을 생성합니다. 피사체, 움직임, 조명을 정리하고 지정한 길이와 화면 비율로 MP4를 저장합니다.

• 제품 공개 영상 제작
• 움직임이 있는 짧은 예고편 제작
• 분위기를 전달하는 배경 반복 영상 제작

시장 정보를 밀도 있게 배치한 거래 분석 대시보드를 단일 HTML로 만듭니다. 밝고 어두운 테마, 차트 상세 보기, 명령 팔레트를 갖춘 화면을 제공합니다.

• 금융 분석 터미널 화면 시제품 제작
• 시장 정보가 밀집된 화면 제시
• 차트 상세 보기와 조작 방식 시연

메모나 문서를 발표 구성과 페이지별 이미지·도표·영상 계획, 제작 지시서로 정리합니다. 렌더링 후에는 구성과 각 슬라이드의 일치 여부를 최대 세 차례 점검합니다.

• 메모나 녹취록으로 발표 구성하기
• 슬라이드별 이미지·도표·영상 계획하기
• HTML 슬라이드나 PPTX 제작 지시서 작성하기

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

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

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

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

새 웹페이지 제작이나 기존 UI 검토에서 구조, 색상, 글꼴을 정리합니다. URL과 이미지의 디자인 분석 및 개선 사항의 우선순위 지정도 지원합니다.

• 새 랜딩 페이지를 설계합니다
• 기존 UI 개선 사항의 우선순위를 정합니다
• 참고 페이지나 이미지를 분석합니다

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

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

이번 주 성과, 진행 중인 작업, 장애 요인과 핵심 지표를 주간 보고용 HTML 슬라이드로 정리합니다. 주목할 수치와 이상 징후, 다음 주에 필요한 결정과 요청을 팀에 공유합니다.

• 팀 주간 보고 자료 제작
• KPI 변화와 이상 징후 공유
• 작업 장애 요인과 지원 요청 정리

제목이 이어지는 정사각형 소셜 미디어 카드 세 장을 만듭니다. 브랜드 표기와 번호를 통일하고 영화 같은 색조를 적용해 하나의 HTML로 구성합니다.

• Instagram 카드 세 장 게시물 제작
• LinkedIn 연속 게시물 디자인
• X 스레드용 카드 제작

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

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

제품 소개, 기능, 이용 후기, 요금, 가입 안내를 담은 SaaS 소개 페이지를 만듭니다. DESIGN.md의 색상·글꼴·배치 규칙을 반영해 단일 HTML로 제공합니다.

• SaaS 제품 소개 페이지를 만들 때
• 기존 디자인 방향에 맞출 때
• 기능과 이용 후기, 요금을 함께 보여 줄 때

여러 소셜 플랫폼의 지표를 하나의 HTML 분석 대시보드로 만듭니다. 그래프 상세 정보와 기간 비교, 밝고 어두운 테마 전환을 제공하고 디자인 지침을 반영합니다.

• 여러 소셜 플랫폼 지표를 한곳에서 확인
• 그래프에서 선택한 기간 비교
• 그래프의 각 지점과 분석 내용 확인

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

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

Notion의 지난 24시간 문서 편집, 댓글, 멘션, 데이터베이스 행 변경을 모아 Notion 형식의 일일 요약 페이지로 정리합니다.

• 전날의 Notion 문서 편집 확인
• 댓글과 멘션을 매일 확인
• 데이터베이스 행 변경을 한곳에서 확인

데스크톱 랜딩 페이지의 구조를 회색 상자로 그립니다. 번호 주석과 사양 패널을 연결해 배치 및 구현 시 참고할 내용을 공유하는 와이어프레임을 만듭니다.

• 데스크톱 랜딩 페이지 구조를 검토할 때
• 개발 담당자에게 사양 메모를 전달할 때
• 내비게이션과 주요 홍보 영역 배치를 확인할 때

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

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