[Archi-play] Feb 2026

프로젝트 세팅 (1/25)

1. 기술 스택

• pnpm
• Next.js vs. vite https://www.linkedin.com/pulse/vite-vs-nextjs-which-should-you-pick-your-next-project-8jphf/
• React 19
• Typescript
• Three.js
• CSS : Tailwind
• 디자인 라이브러리 : chakra UI
• state management : recoil

 src
│   ├── App.css
│   ├── App.tsx
│   ├── assets
│   │   ├── react.svg
│   │   └── texture
│   │       └── grass.jpg
│   ├── components
│   │   ├── render-view
│   │   │   ├── player.tsx
│   │   │   ├── render-view.tsx
│   │   │   └── world-map.tsx
│   ├── index.css
│   ├── main.tsx
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts

아직까진 구조가 간단하다

---

에펠탑, 콜로세움, 오페라하우스, 등등 세계 유명한 건축물 3D 뷰어를 만들어보고 싶었는데 생각보다 무료 glb asset을 찾기가 어렵다

 

그래서 우선 2D 맵에 캐릭터를 심어보는 것 먼저 해보기로.

2/21

pixel art assets city builder 컨셉으로 줍줍

https://kenney.nl/starter-kits

 

2/23

2d planary map 렌더링

 

3/1

pixilart 로 캐릭터 파일 제작 (front/back/left/right)

방향키로 캐릭터 움직이기

 

아래 사이트에서 무료로 픽셀아트를 만들 수 있어 배낭 여행자 컨셉으로 캐릭터를 한땀 한땀 ^^ 그렸다

https://www.pixilart.com/

Pixilart - Share & Create Art Online

 

약간.. 옛날 포켓몬 RPG 게임이나 바람의 나라처럼.. 어떤 지점에서 인터랙션하면 다른 맵으로 넘어가면서 해당하는 건축물을 자세히 살펴볼 수 있도록 하고싶었는데 지금까지 구현한것만 봐서는 너무 유치한가 싶기도하다. ㅋㅋ 

프로젝트 목적은 three.js에 익숙해지는 것이기는 했는데 그것만으로 충분할까 싶은 생각도 든다. 

작은것부터 하나씩 해보는거라고 생각하자!