교회 전자주보를 만들면서 가장 크게 되돌린 결정입니다. 처음엔 종이 주보처럼 한 면씩 좌우로 넘기게 만들었습니다. 다 만들고 배포까지 했다가, 며칠 뒤 통째로 갈아엎었습니다.
이 글은 교회 전자주보 만들기 시리즈의 2편입니다.
좌우로 넘기게 만든 이유
종이 주보는 접혀 있습니다. 펼치고, 넘기고, 다시 접습니다. 그 감각을 그대로 옮기면 성도들이 익숙하게 느낄 거라 생각했습니다.
그래서 면 하나를 화면 하나로 잡고, 손가락으로 좌우로 밀어 넘기게 했습니다. 아래에는 지금 몇 번째 면인지 알려 주는 점을 찍었습니다. 만들어 놓고 보니 꽤 그럴듯했습니다.
무엇이 문제였나
첫째, 무엇이 실려 있는지 알 수 없었습니다.
종이 주보는 펼치면 전체가 한눈에 들어옵니다. 어디에 뭐가 있는지 보이니까 필요한 곳으로 바로 갑니다. 그런데 한 면씩 넘기는 화면은 끝까지 넘겨봐야 무엇이 있는지 압니다. 광고를 보려면 몇 번을 넘겨야 하는지 알 수가 없습니다.
종이의 “펼침”을 옮긴 게 아니라 “넘김”만 옮긴 셈이었습니다.
둘째, 넘기는 동작 자체가 장벽이었습니다.
이게 더 컸습니다. 좌우 스와이프는 배워야 하는 동작입니다. 앱을 많이 쓰는 사람에게는 당연하지만, 교회에서 주보를 보시는 분들 중 상당수는 폰으로 위아래 스크롤만 하십니다. 카카오톡을 보고, 유튜브를 보고, 뉴스를 봅니다. 전부 위아래입니다.
이미 아시는 동작을 두고 새 동작을 요구한 것이었습니다.
어떻게 바꿨나 — 한 장으로 이어 붙이고, 위에 목차를 달았습니다
위아래 한 장으로 이어 붙였습니다. 표지부터 교회 정보까지 쭉 스크롤하면 끝까지 읽힙니다. 종이를 펼친 것과 같은 구조입니다.
대신 페이지가 길어집니다. 그래서 화면 위에 바로가기 칩을 붙였습니다.
[설교] [예배순서] [모임] [광고] [새가족] [참여] [선교지] [지난 설교] [교회 정보]누르면 그 대목으로 건너뛰고, 지금 읽고 있는 대목의 칩에 표시가 들어옵니다. 스크롤을 내리면 표시도 따라 움직입니다. 위치를 잃지 않게 하는 장치입니다.
표지는 칩에 넣지 않았습니다. 맨 위로 가는 건 하단 메뉴가 이미 하고 있어서 중복이었습니다.
넓은 화면(PC·태블릿)에서는 두 단으로 벌립니다. 진짜 펼친 주보처럼 보입니다.
지금은 칩이 더 늘었습니다(2026년 9월). 주중예배·추천 영상·달력·게시판·사역보고·자유 면까지 열일곱 가지 중에서 교회가 쓸 것만 고릅니다. 칩 이름은 교회가 지은 면 이름이 아니라 앱이 들고 있는 짧은 이름을 씁니다 — 그래야 영어 주보로 바꿀 때 함께 옮길 수 있습니다.
여기서 만든 버그 — 반응형이 순서를 바꿔 버립니다
두 단으로 벌리는 걸 처음엔 이렇게 만들었습니다. 면을 홀수·짝수로 쪼개서 왼쪽 단과 오른쪽 단에 각각 쌓았습니다. PC에서는 잘 나왔습니다.
그런데 폰에서 열어 보니 순서가 엉망이었습니다.
폰은 화면이 좁으니 두 단이 위아래로 붙습니다. 그러면 왼쪽 단 전체를 다 읽은 다음 오른쪽 단이 시작됩니다. 그 결과가 이랬습니다.
| 의도한 순서 | 폰에서 실제로 나온 순서 |
|---|---|
| 설교 → 예배순서 → 모임 → 광고 | 설교 → 모임 → 새가족 → 선교지 → … → 예배순서 |
예배순서가 설교 바로 뒤가 아니라 한참 뒤로 밀렸습니다. 주보에서 가장 많이 보는 면인데 말입니다.
고친 방법은 간단합니다. 단을 둘로 쪼개지 말고, 한 줄에 좌·우로 채우는 격자로 바꿨습니다. 이러면 화면이 좁아져 한 줄에 하나만 들어가도 순서가 그대로 유지됩니다.
반응형을 만들 때 흔히 놓치는 지점입니다. 넓은 화면에서 예쁘게 보이려고 나눈 구조가, 좁은 화면에서 합쳐질 때 순서를 바꿔 버립니다. 나누기 전에 “이게 세로로 쌓이면 어떤 순서가 되나”를 먼저 그려 보시기 바랍니다.
그 뒤에 하나 더 배운 것 — 광고를 어디에 두는가
목적헌금 모금 같은 안내 띠를 주보 아래쪽 카드 줄에 넣은 적이 있습니다. 아무도 못 봤습니다. 아래쪽은 주보를 끝까지 넘긴 사람만 닿는 자리라 광고가 되지 못합니다. 지금은 표지 바로 앞, 맨 위에 둡니다.
같은 이유로 교회 홈페이지로 가는 단추도 표지 바로 아래로 올렸습니다. 교회 정보 면까지 내려가야 주소가 나오면 아무도 누르지 않습니다.
한 번은 반대로 광고 띠가 너무 커서 주보가 반밖에 안 보인 적도 있습니다. 위에 두는 것과 자리를 차지하는 것은 다른 문제였습니다.
정리 — 교회 주보 앱 화면 설계 원칙
- 종이의 형태가 아니라 읽는 순서를 옮기세요. 접힘과 넘김은 종이의 물리적 제약이지 좋은 설계가 아닙니다
- 사용자가 이미 아는 동작을 쓰세요. 어르신이 많은 교회라면 위아래 스크롤이 정답입니다
- 길어지는 건 목차로 해결하세요. 스크롤이 길어도 어디로 갈지 알면 문제가 없습니다
- 반응형은 좁은 화면에서 먼저 확인하세요. 넓은 화면 기준으로 나눈 구조가 좁은 화면에서 순서를 깨뜨립니다
- 꼭 봐야 할 것은 위에 두세요. 아래쪽은 끝까지 내려온 사람만 보는 자리입니다
다음 편은 더 어이없는 이야기입니다. “등록이 안 된다”는 말을 듣고 코드를 아무리 봐도 정상이었던 건입니다.
→ [3편] “등록이 안 돼요” — 실은 버튼이 안 보였습니다
교회 전자주보 만들기 시리즈
- 1. 교회 전자주보 만들기 — 주일 아침, 주보가 모자랐습니다
- 2. 종이 주보를 그대로 옮기면 안 되는 이유 ← 지금 읽고 계신 글
- 3. “등록이 안 돼요” — 실은 버튼이 안 보였습니다
- 4. 교회에 카카오 로그인 붙이기
- 5. 서버를 옮겼더니 업로드만 막혔습니다
- 6. 매주 주보 만드는 시간을 20분으로