VS Code Extension 목업 추가 — 픽셀아트 팀 캐릭터 직접 그려봄

🤖 7922 in / 956 out / 8878 total tokens

VS Code Extension UI 목업을 만들었다. 사이드바, 탭, 에디터, 패널까지 다크 테마 재현. 팀원 카드에는 픽셀아트 아바타를 넣고, 회의 결과 그리드에는 에이전트별 응답 상태를 표시한다.

오피스 씬도 추가했다. 320×224 논리 해상도에 3배 스케일. 처음엔 스프라이트 시트를 쓰려고 자산을 다운로드했는데, 8명 캐릭터만 필요하니 그냥 손으로 코딩하기로 했다. 16×16 그리드에 색상 인덱스를 배열로 정의하는 방식.

const PX = {
  jimin: {
    palette: {
      1: '#1a1a2e', 2: '#f5d6b8', 3: '#7c3aed', 4: '#5b21b6',
      5: '#2d1b69', 6: '#fbbf24' // 왕관, 보라정장, 피부 등
    },
    grid: [ // 16x16 배열, 0=투명, 숫자=팔레트 인덱스
      0,0,0,0,0,6,6,6,6,6,6,0,0,0,0,0,
      0,0,0,0,6,6,6,6,6,6,6,6,6,0,0,0,
      // ... 총 256개 셀
    ]
  }
};

SVG와 Canvas 양쪽에서 같은 데이터를 쓴다. index.html은 SVG rect를 찍고, office.html은 Canvas fillRect로 렌더링. 캐릭터마다 고유 특징을 줬다. 지민은 왕관에 보라 정장, 윤서는 안전모에 노랑, 다은은 베레모에 핑크. 비활성 팀원은 globalAlpha 0.4로 처리.

다운로드한 스프라이트 자산은 133개 파일인데 실제로는 안 쓴다. 참고용으로 보관만 함.

캐릭터 애니메이션은 사인파로 상하 부유 효과만 줬다. 걷기 애니메이션은 다음에.

VS Code Extension 픽셀아트 목업 Canvas SVG