외경이나 내경이 포함된 평면도가 필요하게 되었습니다.
물론 건축가가 만드는 전문적인 도면 수준은 아니며, 방의 배치나 치수, 주방이나 화장실 같은 설비 공간의 위치 정도를 알 수 있는 수준이면 충분합니다.
'그 정도라면 무료 평면도 작성 도구로 쉽게 만들 수 있겠지'라고 생각했지만, 찾아보니 적절한 것을 찾기가 의외로 어려웠습니다.
여러 가지를 시도해 본 결과, 직접 손으로 그리거나, 직접 앱을 만들어야 한다는 두 가지 선택지에 놓이게 되었습니다.
그래서 요즘 AI를 사용하면 간단하게 만들 수 있을 것이라 생각하여, 앱을 만드는 쪽으로 방향을 잡았습니다.
이렇게 탄생한 것이 브라우저에서 작동하는 평면도 작성 도구 '그리도리(Gridori)'입니다.
이 글에서는 그리도리를 만들게 된 계기, AI를 활용한 개발 진행 과정, 그리고 구현 시 특별히 신경 쓴 부분 등을 소개하겠습니다.
처음에는 기존의 평면도 작성 도구를 사용하려고 했습니다. 무료로 사용할 수 있는 웹 애플리케이션이나 iPhone/iPad용 앱 등 몇 가지를 조사하고 시험해 보았습니다.
하지만 생각보다 어려웠습니다.
시도했던 평면도 작성 도구 중에는 방을 만들고, 그것들을 배열하거나 연결하여 평면도를 완성하는 방식의 것이 있었습니다. 새로운 집의 배치를 구상하거나 치수가 알려진 집의 평면도라면 이러한 방식이 유용하다고 생각합니다.
하지만 이번에 만들고자 했던 것은 이미 지어진 집의 평면도로서, 방의 외경이나 내경을 알 수 없는 상태였습니다. 벽의 위치나 방의 대략적인 배치는 알고 있지만, 방의 치수를 지정하여 배치하는 방식으로는 원하는 대로 만들기 어려웠습니다.
iPhone이나 iPad용으로도 편리해 보이는 평면도 작성 앱이 있었습니다. 다만, 시험해 보니 도면을 완성하거나 필요한 형식으로 출력하려면 유료 결제가 필요한 경우도 있었습니다.
물론 편리한 도구에 돈을 지불하는 것은 당연하다고 생각합니다. 하지만 이번 경우는 아마 일회성 평면도일 것입니다. 가급적 손쉽게 만들고 싶었습니다.
또 하나 신경 쓰였던 부분은 일본 주택의 치수와의 적합성이었습니다.
일본 목조 주택에서는 910mm를 기본으로 하는 모듈이 자주 사용됩니다. 예를 들어, 반칸이 910mm, 1칸이 1820mm라는 감각입니다. 모든 주택이 이 치수로 만들어지는 것은 아니지만, 이번처럼 기존 일본 주택의 평면도를 재현하기에는 매우 편리한 기준입니다.
그런데 조사해 본 범위 내에서는 이러한 감각으로 손쉽게 벽을 배치할 수 있는 도구가 찾기 어려웠습니다. 유료 건축 CAD 등을 찾아보면 있을지도 모릅니다. 하지만 그렇게까지 전문적인 것이 필요하지는 않았습니다.
그렇다면, 내가 원하는 기능만 가진 도구를 만들면 되지 않을까?
그래서 개발을 시작했습니다.
앱 이름은 '그리도리(Gridori)'로 정했습니다.
'그리드(Grid)'와 '평면도'를 조합한 이름입니다.
처음부터 브라우저에서 작동하는 웹 애플리케이션으로 하는 것이 결정되어 있었습니다. 설치가 필요 없고, 만든 앱을 공개하면 다른 사람들도 쉽게 사용할 수 있습니다.
그리고 이번에는 거의 모든 코드를 AI에게 작성하게 했습니다.
감각적으로는 99% 정도 AI가 만든 앱입니다.
제가 한 일은 사양(specification)을 구상하는 것, 실제로 조작하며 작동 여부를 확인하는 것, 그리고 수정 요청을 하는 것이었습니다. 코드를 직접 세밀하게 수정하기보다는, AI와 대화하면서 조금씩 완성해 나가는 형태였습니다.
처음에 ChatGPT 같은 AI에게 의뢰한 것은 910mm 그리드 위에 벽을 배치할 수 있는 간단한 평면도 작성 도구였습니다.
처음부터 모든 기능을 만들려고 하지 않았습니다. 일단 벽을 놓는 것부터 가능하게 하고, 실제로 조작해 보았습니다.
그러자 곧 신경 쓰이는 부분이 생겼습니다.
- 벽의 위치가 그리드와 미묘하게 맞지 않음
- 직각으로 벽을 연결했을 때, 벽 끝이 깔끔하게 정렬되지 않음
- 이 부품은 벽 안쪽에 배치하고 싶다
내용이 고도화되자 Codex를 이용한 구현으로 전환하여, 그때마다 AI에게 수정을 요청했습니다.
AI에게 구현 요청 → 실제로 조작해 보기 → 문제점 전달 → 수정 요청
기본적으로 이 과정의 반복이었습니다.
그리도리는 910mm를 기본 그리드로 사용하고 있습니다. 게다가 절반인 455mm 단위로도 벽의 길이를 조정할 수 있게 했습니다. 일본 목조 주택에서 자주 사용되는 치수에 맞춤으로써, 벽 배치를 생각하기 쉽게 만들었습니다.
벽 두께도 기본값을 140mm로 설정했습니다. 물론 주택에 따라 치수는 다르므로, 벽의 길이와 두께는 숫자 입력으로 변경할 수 있습니다.
구현 단계에서 특히 신경 쓴 부분은 벽과 그리드의 위치 관계입니다.
처음에는 단순히 그리드에 맞춰 벽을 배치했지만, 그것만으로는 벽을 직각으로 연결할 때 깔끔하게 연결되지 않았습니다.
그래서 벽의 중심선(벽심)을 그리드에 맞추는 방식으로 변경했습니다.
예를 들어, 벽 두께가 140mm인 경우, 그리드 선을 중심으로 좌우 또는 상하로 각각 70mm씩 벽이 확장됩니다.
게다가 벽의 끝 부분 역시 설정한 길이보다 벽 두께의 절반씩 바깥쪽으로 늘립니다.
즉,
실제로 그려지는 벽의 길이 = 설정 길이 + 벽 두께
가 됩니다.
예를 들어, 설정 길이가 2730mm이고 벽 두께가 140mm라면, 그려지는 벽의 길이는 2870mm입니다.
이렇게 함으로써 직각으로 벽을 연결할 때도 벽심끼리 같은 그리드 교점에서 연결되도록 할 수 있습니다.
단순한 것 같지만, 평면도를 깔끔하게 그리기 위해서는 중요한 부분이었습니다.
창문이나 문 역시 단순히 도면에 놓기만 하면 벽과의 위치 관계가 어긋나게 됩니다.
그래서 벽의 위치와 방향에 맞춰 배치할 수 있도록 했습니다.
벽의 두께까지 고려하여 평면도처럼 자연스럽게 보이도록 만들었습니다.
계단, 주방, 욕실(유닛 욕실), 세면대, 변기 등의 설비도 추가했습니다.
이러한 품목들은 단순히 부품을 놓는 것뿐만 아니라 벽과의 위치 관계가 중요합니다.
예를 들어, 유닛 욕실을 배치할 때 벽의 중심선을 기준으로 하면, 설비 일부가 벽에 겹쳐지게 됩니다.
그래서 벽 두께를 고려하여 벽 내부에 수용되도록 조정했습니다.
계단 역시 단순한 직선 계단만으로는 부족합니다.
일본 주택에서는 중간에 90도나 180도로 방향을 트는 계단이 자주 있습니다.
그래서 구부러진 계단이나 디딤 공간(참)을 표현할 수 있도록 했습니다.
처음부터 복잡한 계단을 구현한 것이 아니라, 실제로 필요한 형태를 생각하면서 AI에게 기능을 조금씩 추가하도록 요청했습니다.
이번에 평면도가 필요했던 이유 중 하나는 치수를 확인하고 싶었기 때문입니다.
따라서 단순히 평면도를 그리는 것만으로는 충분하지 않았습니다.
그리드에서는 작성된 평면도에서 외측 치수나 내측 치수를 계산하여 표시할 수 있도록 했습니다.
벽심을 기준으로 벽을 배치하고 각 벽 두께를 부여했기 때문에, 벽의 내부나 외부 위치를 구할 수 있습니다.
평면도를 만들면서 치수까지 확인할 수 있다는 점은 이번 용도에서 특히 편리한 기능이 되었습니다.
이 예시에서는 벽 내부 치수가 1680mm로 표시되어 있습니다.
작성된 평면도는 JSON 형식으로 저장할 수 있도록 했습니다.
앱 측에서 사용자의 도면을 저장하는 시스템은 갖추고 있지 않습니다.
작성된 데이터는 JSON 파일로 저장하고, 필요할 때 불러와 편집을 재개할 수 있습니다.
서버 쪽에 도면을 저장하는 시스템을 만들 필요가 없어 앱을 단순하게 유지할 수 있습니다.
자택 등의 평면도라는 정보를 다루기 때문에, 앱 측에 데이터를 맡기지 않아도 된다는 점도 장점이라고 생각합니다.
이번 개발에서는 제가 직접 코드를 많이 작성하지 않았습니다.
원하는 기능이나 동작을 AI에게 설명하고, 구현을 요청하며, 실제로 작동시켜 확인하는 과정을 반복하며 개발을 진행했습니다.
AI가 생성한 코드는 솔직히 말해 가독성이 매우 떨어집니다. 주석도 거의 없고, 나중에 제가 직접 수정하기는 쉽지 않습니다.
하지만 이번에는 처음부터 AI에게 구현을 받는 것을 전제로 했기 때문에, 소스 코드가 읽기 어렵다는 점을 반드시 문제라고 생각하지 않았습니다.
대신 중요하게 여긴 것은 테스트 코드입니다.
구현 코드에 비해 테스트 코드는 그렇게 읽기 어렵지 않습니다.
기능을 추가하거나 수정했을 때, AI가 추가/수정한 테스트 코드를 확인하며 예상한 입력에 대해 기대하는 결과가 나오는지 검증했습니다.
예를 들어, 벽의 길이나 두께, 벽심의 위치 관계 등은 수치로 기대하는 결과를 표현할 수 있습니다.
따라서 구현의 세부적인 처리를 모두 따라가지 않아도, 테스트 코드를 확인하는 것만으로 함수가 의도한 사양을 충족하는지 판단하기 쉬워집니다.
물론, 테스트가 통과했다고 해서 모든 것이 맞는 것은 아닙니다. 테스트에서 확인하지 않은 케이스도 있고, 화면상의 표시나 조작감에 대해서는 실제로 작동시켜 확인해야 합니다.
그래서 이번에는 다음과 같은 흐름으로 개발했습니다.
- 구현하고 싶은 기능이나 사양을 AI에게 전달한다.
- AI에게 구현 및 테스트 코드 추가/수정을 요청한다.
- 테스트 코드를 읽으며 기대하는 동작이 검증되었는지 확인한다.
- 실제로 앱을 조작하며 동작을 확인한다.
- 문제가 있으면 AI에게 수정을 요청한다.
구현은 AI에 맡기고, 사양과 테스트, 실제 동작은 사람이 확인한다.
이처럼 비교적 소규모의 웹 앱에서는, 이 개발 방법으로도 충분히 실용적인 결과물을 만들 수 있었습니다.
소스 코드를 직접 작성하지 않는 개발 과정에서는, 코드의 한 줄 한 줄을 이해하는 것보다 무엇을 구현하고 싶은지 명확하게 정의하고, 그것이 올바르게 작동하는지 어떻게 검증할 것인지가 중요하다는 것을 느꼈습니다.
실제로 사용 가능한 수준까지 만들었지만, 개선해야 할 부분은 많습니다.
예를 들어, 현재는 벽의 길이를 변경할 때 수치를 입력해야 합니다.
벽의 끝을 드래그하여 직관적으로 길이를 조정할 수 있도록 하고 싶습니다.
이 외에도 벽과 벽 사이의 연결이나 부품 조작 등, 더 사용하기 쉽게 만들 수 있는 부분이 있습니다.
하지만 처음에 생각했던 '일본 주택의 치수 감각으로 간편하게 평면도를 그리고 싶다'는 목적은 상당히 달성했다고 생각합니다.
처음에는 단순히 평면도 한 장이 필요했을 뿐이었습니다.
그것이 딱 맞는 도구를 찾지 못했다는 계기로 인해, 평면도 작성 앱을 만들어 버렸습니다.
이번에는 99%를 AI에게 코드를 작성하게 했지만, 무엇을 만들고 싶은지, 어떻게 작동했으면 좋겠는지 구체적으로 전달할 수 있다면 일정 수준의 앱을 만들어낼 수 있다는 것을 경험했습니다.
벽 중심선이나 그리드 처리 등 실제로 사용해 보지 않으면 알기 어려운 부분도 많았는데, 이것을 AI에게 설명하는 것이 사실 어려웠습니다. 하지만 이는 지금까지 개발과는 조금 다른 흥미로운 경험이었습니다.
아직 발전 단계에 있는 도구이지만, 편리하게 사용할 수 있게 되었다고 생각합니다.
마찬가지로 기존 주택의 평면도를 그리고 싶은 분이나, 910mm 모듈로 간편하게 평면을 그리고 싶은 분들께도 사용해 주시면 좋겠습니다.
그리どり(Gridori)
앞으로도 조금씩 개선해 나가겠습니다.
