처음 가는 오락실을 찾을 때는 주소를 알아도 건물 앞에서 다시 망설일 수 있다. 어느 입구로 들어가는지, 내부가 어떤 모습인지 글만으로는 쉽게 떠올리기 어렵기 때문이다. 같은 게임이 있는 두 장소를 비교할 때도 사진이 있으면 공간을 이해하는 데 도움이 된다.

Beta에서는 이메일로 사진을 제보받고 운영자가 확인해 수동 등록하는 방식을 사용한다. 이렇게 등록한 사진을 오락실 상세의 갤러리에서 볼 수 있도록 했다.

방문 안내에 사용하는 사진

주소와 게임 목록은 위치와 보유 내용을 설명한다. 사진은 입구와 내부 배치처럼 문장으로 길게 적어도 이해하기 어려운 모습을 보여준다. 예를 들어 건물 안에 여러 업장이 있다면 외관과 입구의 사진이 방문 전 확인에 도움이 될 수 있다.

그러나 사진이 많다고 안내가 정확해지는 것은 아니다. 다른 장소의 사진을 붙이거나 내부가 바뀐 뒤에도 옛 사진만 두면 혼란이 생긴다. 그래서 운영자가 대상 장소와 장면을 확인한 다음 등록하는 과정을 마련했다.

이메일 제보와 장소별 사진 등록

메일을 받은 운영자는 첨부를 내려받고 어느 오락실의 사진인지 확인한다. 관리자 도구에서 대상 장소를 고르고 파일을 미리 본 뒤, 잘못 선택한 것은 제외해 등록한다. 이용자가 사이트에 파일을 올려 바로 공개하는 방식은 아니다.

저장할 때는 사진을 오락실 ID에 연결한 별도 기록으로 관리한다. ID는 이름이 비슷한 장소도 구별할 수 있는 식별값이다. 여러 파일을 같은 기록에 묶으면 상세 화면에서 그 장소의 사진을 함께 불러올 수 있고, 설명문을 수정하지 않고 이미지 목록을 관리할 수 있다.

2023-12-25 Beta 코드 재현 · 합성 예시 데이터. 사진은 당시 저장소에 포함된 샘플 이미지를 사용했다.

flowchart TD
    accTitle: 오락실과 사진 묶음의 연결
    accDescr: 오락실 ID로 사진 기록을 찾으면 그 기록에 연결된 여러 파일을 읽는다. 이름과 주소는 별도의 장소 정보로 유지한다.
    A[오락실 ID] --> P[사진 기록]
    P --> I1[사진 파일 1]
    P --> I2[사진 파일 2]
    A --> T[이름과 주소 등 장소 정보]

업로드와 갤러리 조회

관리자 업로더는 WebP 형식과 파일 용량 제한을 적용한다. 선택 후 보이는 미리보기는 브라우저에서 확인하기 위한 것이며, 등록할 때는 실제 파일과 오락실 ID를 PocketBase SDK로 전송한다. 따라서 관리자 브라우저를 닫아도 서버에 저장된 파일을 조회할 수 있다.

상세 화면은 대상 오락실의 사진 기록을 조회하고, 기록 ID와 파일 이름으로 이미지 주소를 구성한다. 사진이 없으면 갤러리를 표시하지 않는다. 여러 장은 가로로 살펴보고 필요한 한 장만 크게 열도록 해, 목록 확인과 세부 확인을 이어서 할 수 있게 했다.

오락실별 관리자 업로더의 드래그 영역과 업로드 동작. 같은 Beta 원본 코드로 재현했다.

sequenceDiagram
    accTitle: 사진 등록과 상세 조회
    accDescr: 운영자가 파일을 확인해 오락실에 등록하면 상세 화면은 장소 ID로 사진 기록을 조회하고 서버의 파일을 갤러리에 표시한다.
    participant U as 제보자
    participant M as 이메일
    participant O as 운영자
    participant S as 사진 저장소
    participant V as 오락실 상세
    U->>M: 오락실 사진 제보
    M->>O: 첨부 확인·다운로드
    O->>O: 장소 확인·파일 선택·미리보기
    O->>S: 오락실 ID와 사진 등록
    V->>S: 해당 오락실 사진 조회
    S-->>V: 기록 ID와 파일 목록
    V->>S: 표시할 파일 요청
    S-->>V: 사진

사진 보기와 이미지 운영

큰 보기에는 오락실 이름을 함께 표시한다. 닫기 버튼과 배경 선택, Escape로 돌아올 수 있으므로 사진을 본 뒤 같은 장소의 정보를 계속 읽을 수 있다. 예를 들어 입구를 확인하고 나서 가격이나 게임 목록으로 돌아오는 흐름이다.

이미지는 텍스트보다 저장 공간과 전송량을 많이 사용한다. 형식과 용량 제한은 한 파일의 크기를 줄여도 전체 사진 수의 증가까지 해결하지는 못한다. 입구를 알아볼 수 있을 정도의 화질을 유지하면서 파일 크기를 조절해야 하고, 간판이나 내부가 바뀌면 등록된 사진도 다시 확인해야 한다.

갤러리 사진을 선택하면 장소 이름과 함께 크게 볼 수 있다. 가상의 오락실에 연결한 예제다.

flowchart LR
    accTitle: 사진의 두 가지 보기와 운영 비용
    accDescr: 가로 갤러리에서 고른 사진은 큰 보기로 이어진다. 표시할 사진의 양과 품질은 저장 및 전송 비용에도 영향을 준다.
    G[가로 갤러리] -->|사진 선택| F[한 장 크게 보기]
    F -->|닫기| G
    Q[등록 사진의 양과 품질] --> C[저장 공간과 전송량]

관련 업데이트

• 뮤즈캣³ 4월 12일 5차 업데이트