wan의 개발일기

소스코드 → github.com/Jywan/RoomCraft 들어가며 레이아웃 비교(썸네일)까지 끝내고 나니, 정작 배치 자체를 만지는 손맛이 아쉬웠다. 가구 하나 잘못 옮기면 처음부터 다시 배치해야 하고, 비슷한 가구를 여러 개 놓으려면 매번 새로 만들어야 하고, 벽에 딱 붙여놓고 싶어도 픽셀(정확히는 미터) 단위로 손으로 맞춰야 했다. 이번엔 이 세 가지 — 실행 취소/다시 실행, 가구 복제, 벽 스냅 — 를 한 번에 밀어붙이기로 했다. 세 개를 한꺼번에 진행한 이유는 단순한데, 이 프로젝트에서 "기능 하나 추가 → 씬 연결 하나 빠뜨림 → 재검수" 패턴이 하도 많이 반복돼서, 차라리 작은 단위로 쪼개서 순서대로 빠르게 돌리는 게 낫겠다고 판단했기 때문이다. 그리고 실제로 이번 편에도 그 패턴..

소스코드 → github.com/Jywan/RoomCraft 플레이 → jywan.github.io/RoomCraft 들어가며 가구 프리셋을 만들면서 README를 다시 훑다가, "여러 레이아웃 비교"도 아직 없다는 걸 확인했었다. 구현 방식을 세 가지로 놓고 저울질했다 — 화면을 분할해서 두 방을 동시에 렌더링하는 방식(제일 그럴듯하지만 카메라 2대에 공간 분리까지 손볼 게 많음), 단축키로 저장된 레이아웃을 빠르게 넘겨보는 방식(간단하지만 그때그때 다시 불러와야 함), 그리고 저장 목록에 미리보기 썸네일을 넣는 방식. 구현 난이도 대비 효과가 제일 좋아 보이는 세 번째로 정했다. 저장할 때 스크린샷도 같이 저장 버튼을 누르면 이름 입력 팝업이 뜨고, 확인을 누르면 JSON으..

소스코드 → github.com/Jywan/RoomCraft 플레이 → jywan.github.io/RoomCraft 들어가며 지난 편에서 README에 적혀만 있고 실제론 없던 1인칭 뷰를 발견해서 만들었는데, 같은 방식으로 다시 훑어보니 하나 더 나왔다. "저장/관리: 여러 레이아웃 비교, 가구 목록 재사용"이라고 적혀있는데, 프로젝트 저장/불러오기는 되지만 "레이아웃 비교"도 "가구 목록 재사용"도 실제로는 없었다. 레이아웃 비교는 여러 방을 동시에 띄우거나 스크린샷을 나란히 보여줘야 해서 작업이 커서 보류하고, 가구 재사용 쪽부터 만들었다. 프로젝트와 무관한 저장소 기존 저장 시스템(ProjectManager)은 방 하나 + 그 안의 가구들을 한 세트로 묶어서 저장한다. 근데 ..

소스코드 → github.com/Jywan/RoomCraft | 플레이 → jywan.github.io/RoomCraft 들어가며 README를 다시 읽다가 뜨끔했다. "주요 기능" 목록에 "탑뷰 ↔ 3D 자유시점 ↔ 1인칭 뷰"라고 적혀있었는데, 정작 CameraController의 CameraMode enum엔 TopView, FreeView 둘뿐이었다. 1인칭은 있는 척만 하고 실제로는 없었던 것. 이번 편에서 진짜로 만들었다. 시작 위치를 어디로 잡을까 제일 먼저 걸린 문제는 "1인칭으로 전환했을 때 카메라를 어디에 놓을 것인가"였다. 제일 쉬운 방법은 방 꼭짓점들의 평균(중심점)을 쓰는 건데, 이러면 L자형이나 지난번 만든 오목한 커스텀 방에서 그 중심점이 방 밖(파인 부..

소스코드 → github.com/Jywan/RoomCraft 플레이 → jywan.github.io/RoomCraft 들어가며 성능 정리까지 끝내고 나니 로드맵에 남은 게 배포뿐이었다. 지금까지는 전부 에디터 안에서만 돌아가던 걸, 이번에 처음으로 브라우저에서 아무나 접속해서 플레이할 수 있게 내보냈다. 무료로 되는 방법부터 찾다가 GitHub Pages로 정했고, 가는 길에 예상 못 한 버그를 두 개 만났다. 무료 배포처 고르기 WebGL 기준으로 무료 옵션 몇 개를 놓고 비교했다. itch.io — 인디/하비 프로젝트 전시용으로 제일 무난한 선택지. zip만 올리면 끝 GitHub Pages — 이미 코드가 올라가 있는 repo에 그대로 붙일 수 있어서, 소스..

소스코드 → github.com/Jywan/RoomCraft 들어가며 커스텀 방 편집이 end-to-end로 돌아가는 걸 확인하고 나니, 코드 여기저기 미뤄뒀던 게 눈에 밟혔다. 특히 가구를 드래그하는 동안 매 프레임 도는 코드들 — 처음 짤 때는 동작만 확인하면 됐지만, 쌓이고 보니 손볼 곳이 많았다. 이번 편은 화면엔 아무 변화도 없는 성능 정리 편이다. 그리고 최적화하다가 버그를 하나 새로 만든 이야기도 같이 있다. 안 쓰는 코드부터 Phase 5-3에서 그리드 셀 토글 방식을 버리고 점 클릭 방식으로 갈아탔었는데, 그 흔적인 CustomShapeEditorUI.cs, GridOutlineExtractor.cs, GridCell.prefab이 어디서도 참조되지 않은 채로 남아있었다. ..

소스코드 → github.com/Jywan/RoomCraft 들어가며 지난 편에서 사각형/L자형 같은 프리셋 방 모양을 골라 쓸 수 있게 됐다. 근데 프리셋만으론 부족하다 — 어차피 사람마다 방 구조는 다 다르게 생겼으니까. 이번 편은 사용자가 원하는 모양을 직접 그리는 기능을 붙였는데, 이번 Phase는 유독 설계를 두 번이나 갈아엎었다. 그 과정이랑 최종적으로 잡은 버그 넷을 정리한다. 그리드 셀이냐, 점 클릭이냐 처음 떠올린 방식은 엑셀 표 만들듯이 N×M 그리드에서 원하는 칸을 켜고 끄는 거였다. 직관적이긴 한데, 만들다 보니 대각선으로만 맞닿은 두 칸을 어떻게 처리할지가 발목을 잡았다. 대각선 인접은 "붙어있다"고 봐야 할지 "떨어져있다"고 봐야 할지 애매하고, 그 경계선을 다각형..

소스코드 → github.com/Jywan/RoomCraft 들어가며 지난 편에서 방을 다각형 기반으로 재구성했다. 겉으로는 사각형 방이 예전과 똑같이 나왔지만, 속은 "꼭짓점 리스트 하나만 던져주면 어떤 모양이든 만들어주는" 구조로 바뀌어 있었다. 이번 편은 그 구조 위에 실제로 L자형을 골라 쓸 수 있는 UI를 얹었다. 드디어 사각형이 아닌 방이 화면에 나온다. 방 모양 프리셋 모양 하나마다 "가로/세로를 받아서 꼭짓점을 어떻게 배치할지"만 정의하면 된다. 사각형은 원래 있던 대로, L자형은 우측 상단 사분면을 절반씩 잘라낸 6꼭짓점으로 만들었다. public static List GetVertices(RoomShape shape, float width, float depth){ ..