산사에서 배운 것: 말없이 함께 머무는 웹 공간의 설계

한국어 · English · 日本語 · 简体中文

산사에서 해변으로 이어진 질문

웹으로 어떤 장소를 만든다고 하면 먼저 그곳의 모습을 생각하게 된다. 건물과 나무를 놓고, 빛을 비추고, 캐릭터가 돌아다니게 한다. 하지만 풍경이 완성된 뒤에도 질문은 남는다. 방문자는 그 안에서 무엇을 해야 할까. 다른 사람을 만나면 어떻게 반응할까. 조작을 멈췄을 때도 그곳에 머무를 이유가 있을까.

산사는 이 질문을 살펴보기 좋은 온라인 절이다. 공식 소개는 “말없이 같이 앉아 있는 온라인 절, 산사.”라고 적혀 있다. 장소와 행동, 다른 사람과 맺는 관계를 한 문장 안에서 설명한다. 무엇을 많이 해낼 수 있는지보다 어떤 상태로 있을 수 있는지를 먼저 알려주는 소개다.

내가 만든 Kortress Beach도 산사에서 영감을 받았다. 다만 해변에는 해변에 맞는 행동이 필요했다. 내 캐릭터인 코시를 사용하고, 불꽃을 켜거나 함께 앉고 걷는 방향으로 공간을 만들었다. 이 글에서는 먼저 산사의 화면과 행동 구성을 살펴본다. Beach의 실제 코드와 수정 과정은 별도의 제작기에서 다룬다.

산사는 다른 제작자의 서비스다. 여기 실린 세 장의 이미지는 글을 준비하며 실제 접속한 데스크톱 화면을 촬영한 것이다. 화면에서 확인한 조작과 제작자가 인터뷰에서 설명한 내용, 제작 관점에서의 해석을 구분해 읽을 수 있도록 정리했다. 기능은 2026년 11월 확인한 화면을 기준으로 한다.

절이라는 장소가 첫 행동을 알려준다

산사의 제작자는 박진원이다. 연합뉴스와의 인터뷰에서는 실제 절에서 잠깐 쉬고 싶어도 갈 시간과 기운이 부족해 온라인 공간을 만들었다고 설명했다. AI의 도움을 받아 구현했다는 제작 과정 역시 이 인터뷰에 소개되어 있다. 연합뉴스 제작자 인터뷰

이 배경은 화면의 구성과도 이어진다. 법당 앞에는 길이 놓여 있고, 안쪽에는 불상과 방석이 보인다. 캐릭터는 그 방향을 바라본다. 화면 아래에는 합장, 절하기, 목탁, 염주가 나란히 있다. 긴 설명을 읽기 전에도 공간의 용도와 할 수 있는 행동을 함께 짐작할 수 있다.

2026년 11월 직접 접속해 촬영한 법당 앞 화면. 화면 가운데의 조작 안내와 하단 행동 메뉴를 함께 볼 수 있다.

여기서 주목할 점은 건물의 사실성만이 아니다. 중앙의 불상, 그 앞에 놓인 자리, 그곳으로 이어지는 길이 같은 방향을 가리킨다. 방문자가 어디를 바라봐야 하는지 공간 자체가 설명한다. 길과 배치가 안내 역할을 나눠 맡으면, 화면 위의 설명문이 모든 것을 떠안을 필요도 줄어든다.

물론 절이라는 장소가 모든 사람에게 똑같이 익숙한 것은 아니다. 합장이나 염주를 모를 수도 있다. 그래서 메뉴에 붙은 짧은 이름이 중요하다. 장소를 아는 사람에게는 예상 가능한 행동을 제공하고, 처음 보는 사람에게는 눌러 볼 수 있는 구체적인 항목을 준다. 분위기만 있는 화면에서 한 걸음 더 나아가는 부분이다.

처음에는 이동과 시점 조작을 나눠 보면 된다

촬영한 데스크톱 화면에는 “바닥 클릭 · 드래그로 둘러보기 · 휠로 확대/축소”라는 안내가 보인다. 산사를 처음 열었다면 우선 이 세 가지를 나눠 확인하면 된다. 가고 싶은 바닥을 클릭하고, 화면을 드래그해 주위를 살펴보고, 휠로 거리를 조절하는 식이다.

3D 화면에서는 이동과 카메라 회전이 섞여 헷갈리기 쉽다. 캐릭터가 걷는 것인지 시점만 바뀌는 것인지 처음에는 구별하기 어려울 수 있다. 산사의 안내는 입력 방법을 짧게 나누어 보여준다. 이 글의 조작 설명은 데스크톱 기준이며, 휴대전화의 조작감과 성능은 별도로 확인하지 않았다.

그다음에는 하단 메뉴에서 행동을 하나씩 선택해 볼 수 있다. 처음부터 여러 항목을 누르기보다 이동을 멈춘 뒤 한 행동의 변화부터 보는 편이 화면을 이해하기 쉽다. 특히 절하기와 염주는 선택한 뒤 화면이 어떻게 달라지는지 비교하기 좋은 항목이다.

오른쪽 위에는 소리와 설정을 나타내는 아이콘, “염불 듣기”라는 표시가 있다. 촬영 화면의 스피커에는 음소거 표시가 보인다. 소리가 중요한 공간이어도 방문자가 현재 상태를 확인할 수 있어야 한다. 소리 관련 조작은 행동 메뉴와 다른 자리에 배치되어 있다.

이런 배치는 제작할 때 참고할 만하다. 이동하는 법, 지금 할 행동, 소리와 설정은 사용 빈도와 역할이 다르다. 모두를 같은 크기의 버튼으로 늘어놓기보다 자리를 나누면 방문자는 화면에서 무엇을 먼저 찾아야 하는지 판단하기 쉬워진다.

절하기에는 시작하는 법만큼 멈추는 법이 필요하다

하단에서 절하기를 선택한 화면에서는 해당 메뉴가 “멈추기”로 바뀐다. 위쪽에는 “둘러보며 기다리거나 멈출 수 있어요”라는 안내가 나타난다. 실행 중인 행동과 중단 방법을 같은 화면에서 알 수 있는 구성이다.

절하기 실행 상태를 직접 촬영했다. 하단의 “멈추기”와 화면 위쪽 안내가 현재 상태를 알려준다.

반복되는 행동은 시작 버튼 하나로 끝나지 않는다. 지금 실행되고 있는지, 얼마나 기다려야 하는지, 다른 곳을 둘러봐도 되는지, 원할 때 멈출 수 있는지를 방문자에게 알려줘야 한다. 화면이 조용할수록 이런 작은 변화가 더 중요해진다. 큰 알림이 없으니 버튼 이름 하나가 상태 설명을 맡는다.

제작 관점에서 보면 이는 애니메이션의 품질과 다른 종류의 완성도다. 캐릭터가 그럴듯하게 절을 하더라도 사용자가 멈추는 법을 찾지 못하면 행동은 답답해진다. 반대로 현재 상태와 빠져나오는 길이 보이면 반복 동작을 지켜보거나 시점을 바꿀 여유가 생긴다. 움직임을 만드는 일과 그 움직임을 사용자가 다루게 하는 일은 함께 설계해야 한다.

이 원칙은 종교적인 행동에만 해당하지 않는다. 함께 앉기, 춤추기, 낚시하기처럼 일정 시간 이어지는 행동에도 같은 질문을 할 수 있다. 버튼을 누르기 전과 누른 뒤의 이름이 달라지는가. 중간에 나갈 수 있는가. 종료했을 때 원래 조작으로 돌아오는가. 공간을 만드는 입장에서는 이런 전환을 구체적으로 살펴볼 필요가 있다.

염주는 공간을 지우지 않고 시선을 좁힌다

염주를 선택하면 화면 중앙에 염주가 크게 나타나고 뒤의 법당은 흐려진다. 촬영 화면에는 “0 / 108”, “첫 번째 바퀴”, “잡고 쓸어 넘기기”가 보인다. 아래에는 “접기”가 있다. 무엇을 만져야 하는지, 어떤 입력을 해야 하는지, 어떻게 닫는지가 한 화면에 모여 있다.

염주를 펼친 직후의 0회 상태. 108회 완료 이후의 동작은 이번 촬영에서 확인하지 않았다.

작은 3D 물건을 멀리 둔 채로 조작하게 하면 어디를 잡아야 하는지 알기 어렵다. 이 화면은 염주를 크게 보여주고 손을 움직이는 방향을 글로 안내한다. 배경을 흐리게 처리해 주의를 가운데로 모으면서도 법당의 색과 형태는 남긴다. 다른 장소로 이동했다기보다 같은 공간 안에서 한 행동에 집중하는 구성으로 읽힌다.

염주와 절하기를 비교하면 행동마다 필요한 화면이 다르다는 점도 드러난다. 절하기에서는 캐릭터와 법당의 관계가 계속 중요하다. 염주에서는 만져야 할 대상이 충분히 커야 한다. 같은 하단 메뉴에서 시작하더라도 이후의 시각적 우선순위는 달라진다. 모든 기능을 한 가지 화면 틀에 맞추기보다 행동에 맞는 크기와 거리를 택한 셈이다.

화면의 숫자는 반복의 단위를 알려준다. 같은 동작을 이어가더라도 지금 몇 번째에 있는지 알 수 있다면 진행 상태를 놓치지 않는다. 염주라는 물건을 크게 보여주는 것과 횟수를 읽게 하는 것이 함께 작동하는 화면이다.

말하지 않는 행동도 서로를 향할 수 있다

산사의 특징을 설명할 때 채팅이 없다는 사실만 말하면 중요한 부분이 빠진다. 말을 덜 쓰는 공간에서도 방문자가 할 수 있는 행동은 필요하다. 합장, 절하기, 염주처럼 이 장소에 맞는 작은 행동이 화면의 중심을 차지한다. 대화창을 대신할 것이 무엇인지 살펴봐야 공간의 성격이 보인다.

제작자 박진원은 MBN 전화 인터뷰에서 채팅을 별도로 만들지 않았으며, 말은 하지 않아도 혼자라는 느낌이 들지 않는 점을 특징으로 설명했다. MBN 제작자 인터뷰

이 말을 행동 설계의 관점에서 읽으면, 다른 사람에게 자신을 설명하는 부담을 얼마나 줄일 수 있는가라는 질문이 생긴다. 채팅에서는 문장을 생각하고, 보내고, 답을 기다린다. 합장처럼 의미가 비교적 정해진 행동은 선택해야 할 내용을 좁혀 준다. 인사를 할 수 있으면서도 긴 대화를 반드시 시작할 필요는 없다.

물론 행동의 의미가 모든 방문자에게 저절로 전달되는 것은 아니다. 상대에게 보이는지 알 수 없거나 반응을 구별하기 어렵다면, 단순한 행동도 어색해질 수 있다. 그래서 말없는 공간을 만들 때는 캐릭터의 방향, 동작의 시작과 끝, 서로의 거리 같은 단서를 더 신경 써야 한다. 글자가 적다는 이유로 설계할 정보까지 줄어드는 것은 아니다.

버튼의 모양과 풍경은 같은 경험을 만든다

3D 공간을 평가할 때 모델이나 조명만 보면 놓치는 것이 있다. 화면 아래의 메뉴, 모서리의 설정, 안내 문장의 글씨도 방문자가 계속 바라보는 풍경의 일부다. 건물과 캐릭터가 한 분위기를 만들더라도 버튼이 다른 문법을 사용하면 시선이 자주 끊길 수 있다.

산사의 촬영 화면에서는 행동 메뉴가 반투명한 둥근 영역 안에 모여 있고, 각 항목은 아이콘과 짧은 글자로 표시된다. 법당을 넓게 보여주면서도 조작할 곳을 아래쪽에서 찾을 수 있게 한 구성이다. 개별 버튼의 장식을 자세히 보는 것보다, 배경이 복잡해도 글씨가 읽히는지와 선택한 항목이 구별되는지를 함께 보는 편이 유용하다.

절하기가 멈추기로 바뀌는 것, 염주가 선택되었을 때 해당 항목의 상태가 달라지는 것처럼 버튼은 행동의 결과도 설명한다. 따라서 디자인을 다듬는 과정은 색이나 모서리 반경을 고르는 데서 끝나지 않는다. 누르기 전의 기대와 누른 뒤의 화면이 맞는지, 같은 종류의 행동이 같은 방식으로 표시되는지까지 확인해야 한다.

내 사이트와 Beach를 다듬을 때도 이 관점은 이어진다. 풍경을 더 자세히 만드는 일과 글씨·버튼을 정리하는 일은 서로 다른 완성도를 만든다. 캐릭터를 잘 보여주는 카메라 각도라도 메뉴가 손이나 얼굴을 가리면 사용하기 어렵다. 예쁜 스크린샷을 고르는 일과 실제 조작에 적합한 구도를 만드는 일을 함께 살펴봐야 한다.

작게 보이는 행동 뒤에는 구체적인 운영이 있다

방문자가 보는 기능의 수와 제작자가 관리해야 할 일의 수는 같지 않다. 화면에서 버튼이 몇 개뿐이어도 접속을 기다리는 상황, 동작을 취소하는 상황, 소리가 나오지 않는 상황은 각각 생길 수 있다. 처음부터 모든 기능을 늘리기보다 기본 행동이 이어지는지를 확인하는 일이 중요하다.

중앙일보 인터뷰에서 산사 제작자는 서버 안정화와 염불·108배 같은 기본 기능의 완성도를 우선하는 방향을 설명했다. AI를 활용한 코드 작성과 본인이 맡은 기획·소통의 역할도 이야기했다. 공개한 뒤에도 기본 경험을 다듬는 데 집중하겠다는 설명이다. 중앙일보 팩플 제작자 인터뷰

보도에 등장하는 방문 통계와 개발시간은 당시의 설명이므로 이 글에서 현재 성과로 비교하지 않았다. 산사에서 살펴볼 만한 것은 화면에 드러난 구체적인 선택들이다. 합장처럼 짧게 의미를 전하는 행동, 실행 상태를 알려주는 버튼, 조작할 대상을 크게 보여주는 화면은 다른 장소를 만들 때도 참고할 수 있다.

Beach에서는 같은 질문에 다른 행동으로 답했다

산사에서 받은 영감은 온라인에서 함께 머무는 공간을 만들 수 있다는 점이었다. Beach에는 내 마스코트 코시를 사용했다. 장소는 해변으로 바뀌었고, 방문자의 행동도 불꽃을 켜고, 빛으로 글씨를 쓰고, 나란히 앉거나 손을 잡고 걷는 쪽으로 이어졌다. 공간의 성격을 행동으로 드러내려는 질문이 서로 다른 모습으로 이어졌다.

비교할 지점은 각 공간에서 무엇이 자연스러운 행동이 되는가다. 절에서 합장이나 염주가 장소를 설명하듯, Beach에서는 해변과 불꽃, 캐릭터 사이의 행동이 그 역할을 맡는다. 배경을 바꾼 뒤 메뉴 이름만 바꾸는 것으로 충분하지 않다. 손에 든 도구의 위치와 다른 사람과의 거리, 화면에서 조작하는 방법도 그 장소에 맞게 연결해야 한다.

Beach에서는 그 행동을 실제로 연결하며 고친 과정을 더 자세히 설명할 수 있다. 왜 파도가 오기 전에 바닥이 먼저 젖어 보였는지, 함께 앉는 동작을 시작할 때 무엇을 준비해야 했는지, 이를 위해 어떤 코드를 바꿨는지 같은 제작 기록이다.

이어지는 Kortress Beach 제작기에서는 그 차이를 실제 화면과 개발 중 영상으로 보여준다. 산사에서 살펴본 것은 작은 행동이 공간의 성격을 만드는 방식이었다. Beach에서는 그 행동이 코드와 캐릭터, 다른 방문자의 화면 사이에서 어떻게 이어지도록 만들었는지 설명하려 한다.