[작성자:] 컴맹 집사

작성자: 컴맹 집사

대표 이미지: 저장된 결과가 있으면 첫 화면에 “이전에 받은 작위증 보기” 버튼이 나타난다 (출처: 직접 캡처한 화면(2026년 9월 20일))

“어제 받은 작위증 다시 보여 주려고 했는데, 처음부터 다시 해야 하네.”

친구의 말이었다. 전날 받은 작위증을 다른 사람에게 보여 주려고 앱을 다시 열었더니 결과가 남아 있지 않았다. 앱을 닫거나 새로고침만 해도 결과가 사라졌다.

나는 이게 당연한 줄 알았다. 진단은 한 번 하고 끝나는 거니까. 그런데 작위증을 나중에 다시 보여 주고 싶은 사람에게는 꽤 불편한 일이었다.

왜 결과가 사라질까

AI에게 먼저 원인을 물었다.

지금 앱은 결과를 화면이 열려 있는 동안만 기억합니다. 화면을 닫거나 새로고침하면 앱이 처음부터 다시 시작되기 때문에, 그동안 기억하던 내용이 모두 지워집니다.

비유하자면 지금 앱은 칠판에 결과를 적어 두는 것과 같았다. 수업이 끝나면(화면을 닫으면) 칠판을 지운다. 결과를 남기려면 공책에 적어야 한다.

그 공책을 어디에 둘 것인가가 문제였다.

공책을 둘 수 있는 곳은 두 군데

AI가 알려 준 선택지는 두 가지였다.

1. 서버에 저장하기
결과를 인터넷 저 너머의 서버에 보관한다. 어느 기기에서든 볼 수 있다. 대신 회원가입이나 로그인이 있어야 누구의 결과인지 구분할 수 있고, 서버와 데이터베이스를 준비해야 한다.

2. 사용자의 휴대폰(브라우저)에 저장하기
결과를 그 휴대폰의 브라우저 안에 보관한다. 로그인도 서버도 필요 없다. 대신 그 휴대폰, 그 브라우저에서만 볼 수 있다.

사진 기능 때와 같은 고민이었다. 결론도 같았다. 이 앱에 로그인을 넣을 이유는 없었다. 재미로 하는 집사 진단을 위해 회원가입을 할 사람은 많지 않다. 휴대폰 안에 저장하는 방식으로 정했다. 이 방식에 쓰이는 것이 LocalStorage라는 기능인데, 이야기가 길어서 다음 글에 따로 적었다. (출처: MDN 웹 문서, Window.localStorage) 이 글에서는 무엇을, 어떻게 보여 줄지 기능을 설계한 과정을 다룬다.

무엇을 저장할지 정하기

완성된 작위증 그림을 통째로 저장하면 될까? AI의 생각은 달랐다. 그림은 용량이 크고, 나중에 작위증 디자인을 바꾸면 옛날 그림이 그대로 남는다. 대신 작위증을 다시 그리는 데 필요한 재료만 저장하자고 했다.

재료만 있으면 앱이 작위증을 그 자리에서 다시 그린다. 나중에 작위증 디자인을 크게 바꿨을 때도, 예전에 받은 작위증이 새 디자인으로 자연스럽게 다시 그려졌다. 재료를 저장해 둔 덕을 톡톡히 봤다.

사진은 가장 고민한 부분이다. 사진을 남기면 편하지만 용량이 크다. 그래서 사진 업로드 때 이미 작게 줄여 둔 사진만 저장하게 했다. 그래도 저장 공간이 부족하면 사진만 빼고 나머지를 저장해서, 저장이 실패해도 작위증 기록 자체는 남게 했다. 이 사진도 그 휴대폰 브라우저 안에만 남고, 어디로도 전송되지 않는다.

하나만 남길까, 여러 개를 남길까

처음엔 지난 결과를 목록으로 여러 개 남기는 방법도 생각했다. 하지만 이 앱에서 작위증은 “지금 나의 집사 작위”라는 의미가 컸다. 목록을 만들면 화면도, 지우기 기능도, 설명도 늘어난다. 그래서 가장 최근에 받은 작위증 하나만 남기기로 했다. 새로 진단을 받으면 이전 기록은 새 기록으로 바뀐다.

단순하게 정하고 나니 만들 것도, 설명할 것도 줄었다. 초보자에게는 이게 큰 장점이었다.

어디서 보게 할까

첫 화면에 “이전에 받은 작위증 보기” 버튼을 만들었다. 누르면 저장해 둔 재료로 작위증이 다시 그려지고, 거기서 저장과 공유도 그대로 할 수 있다.

처음에는 저장된 작위증이 있을 때만 이 버튼이 보이게 했다. 그런데 앱을 다시 보다가 생각이 바뀌었다. 처음 온 사람에게는 첫 화면에 볼거리가 너무 적었다. 그래서 버튼을 항상 보이게 하고, 작위증이 아직 없으면 버튼 글자를 “아직 작위가 없어요 · 지금 받기”로 바꿔서 누르면 바로 진단이 시작되게 했다. 같은 자리의 버튼이 상황에 따라 다른 일을 하게 만든 것이다.

진단을 마치면 폐하 정보, 답 7개, 발급일, 줄인 사진을
이 휴대폰 브라우저에 저장해 줘. 가장 최근 것 하나만.
저장 공간이 부족하면 사진만 빼고 저장해 줘.
첫 화면에 "이전에 받은 작위증 보기" 버튼을 항상 보여 주고,
저장된 게 없으면 "아직 작위가 없어요 · 지금 받기"로 바꿔서 진단을 시작하게 해 줘.

테스트하며 발견한 것

• 새로고침 후에도 작위증이 남는가 → 남는다.
• 앱을 닫았다 다시 열어도 남는가 → 남는다.
• 다른 휴대폰에서는 보이는가 → 안 보인다. (의도한 대로)
• 같은 휴대폰이라도 다른 브라우저에서는 보이는가 → 안 보인다.
• 저장 기능이 막힌 환경(일부 비공개 모드 등)에서도 앱이 멈추지 않는가 → 저장만 안 되고 앱은 그대로 쓸 수 있다.

네 번째 항목이 뜻밖이었다. 카카오톡에서 링크를 열어 진단한 뒤 나중에 크롬으로 열면 작위증이 없다. 카카오톡 안의 브라우저와 크롬은 서로 다른 공책을 쓰기 때문이다. 기술적으로 어쩔 수 없는 부분이라, 이용안내에 “작위증은 이 브라우저에만 저장된다”는 설명을 넣었다.

이전 글: 카톡으로 자랑하고 싶게! 웹앱 공유 버튼 만드는 법
다음 글: LocalStorage, 브라우저 속 작은 공책? 컴맹도 이해한 저장의 원리

작성자: 컴맹 집사

대표 이미지: 처음 발급하던 작위증. 이름과 작위를 문장 속에 넣었다 (출처: 직접 캡처한 화면(2026년 9월 19일))

“당신의 작위: 왕실 돌봄근위관”

첫 버전의 결과 화면에는 이 한 줄뿐이었다. 틀린 건 아니었지만 재미가 없었다. 친구들도 결과를 보고 “오” 한마디 하고 끝이었다.

처음 기획할 때부터 이 앱의 하이라이트는 작위증이었다. 왕립 개집사협회가 집사에게 내리는 임명장 같은 증서, 캡처해서 자랑하고 싶어지는 화면이다. 이 글은 결과 한 줄을 증서로 바꾼 기록이다.

진짜 증서에는 무엇이 들어갈까

AI에게 “상장이나 임명장에는 보통 어떤 항목이 들어가?”라고 물었다. 답을 참고해 작위증에 넣을 항목을 정했다.

• 머리글: 왕립 개집사협회 작위증
• 폐하의 사진: 동그란 액자 안에
• 받는 이: 집사 닉네임과 모시는 폐하의 이름
• 작위: 견국 수습집사부터 왕실 총집사까지 5단계 중 하나
• 집사 유형과 수여 사유: 유형에 어울리는 한두 줄 문장
• 발급일: 오늘 날짜
• 발급인: 왕립 개집사협회장
• 인장: RKBA라고 새겨진 붉은 도장

작위와 유형마다 문구 만들기

증서의 맛을 살리는 건 문구였다. 작위마다 뜻과 별칭을, 집사 유형마다 한 줄 소개와 재치 있는 한마디를 준비했다. AI에게 초안을 받고, 반려인들이 읽으며 웃을 수 있도록 손봤다.

• 1단계 견국 수습집사: 왕실 집사 업무를 처음 시작한 새내기, “떠오르는 새싹 집사”
• 4단계 발바닥 궁정대신: 왕실의 주요 업무를 맡은 핵심 참모, “왕의 오른발 집사”
• 간식 협상형 집사: “앉아 한 번에 간식 하나, 이것이 외교입니다.”
• 전략적 회피형 집사: “못 들은 게 아니라, 전략적으로 안 들은 것입니다.”

문구를 쓰면서 원칙을 하나 정했다. 어떤 작위가 나와도 기분이 좋아야 한다. 1단계가 나와도 “떠오르는 새싹”처럼 앞으로가 기대되는 말로 채웠다. 테스트 앱은 결과가 마음에 들어야 공유된다.

이 문구들도 질문 목록처럼 데이터 파일에 모아 두었다. 문구를 고칠 때 한 곳만 보면 된다.

이름을 문장 속에 넣기

“위 집사는”보다 “초코 폐하의 집사”가 훨씬 좋다. 입력받은 폐하 이름과 집사 닉네임을 문장 속에 넣어 달라고 요청했다.

한국어는 이름 뒤에 붙는 조사(은/는, 이/가)가 받침에 따라 달라서 까다로울 수 있다. 이 앱은 세계관 말투상 이름 뒤에 늘 “폐하”를 붙인다. “초코 폐하의 왕국”, “보리 폐하의 집사”처럼 쓰니 조사 문제를 자연스럽게 피할 수 있었다. 집사 닉네임을 비워 두면 “이름 없는 집사”로 표시되게 했다.

발급일은 오늘 날짜가 자동으로 들어가야 한다. JavaScript에는 현재 날짜를 알려 주는 기능(Date)이 있어서, AI가 “2026년 9월 22일” 같은 한국식 날짜로 바꿔 표시해 줬다. (출처: MDN 웹 문서, Date)

화면이 아니라 그림으로 그린 이유

처음에는 작위증을 일반 화면처럼 글자와 테두리로 꾸몄다. 그런데 이렇게 만들면 이미지로 저장하기가 어려웠다. AI는 캔버스(Canvas)라는 기능을 추천했다. (출처: MDN 웹 문서, Canvas API) 화면 위에 도화지를 깔고, 그 위에 배경, 사진, 글자를 차례로 그려 넣는 방식이다. 다 그린 도화지는 그대로 그림 파일로 저장할 수 있다.

배경은 이미지 생성 AI로 만들었다

코드로 그린 테두리만으로는 증서 느낌이 나지 않았다. 그래서 배경 그림을 이미지 생성 AI로 만들었다. 요청할 때 가장 신경 쓴 부분은 이것이다.

왕실 증서 배경 이미지를 만들어 줘.
- 크림색 양피지, 금색 이중 테두리, 위쪽에 왕관
- 발바닥·뼈다귀 무늬가 들어간 모서리 장식
- 붉은 리본과 붉은 밀랍 인장 자리
- 글자는 넣지 말 것 (이름·작위·날짜는 앱이 따로 적는다)

글자를 그림에 넣지 않은 것이 핵심이었다. 이미지 생성 AI는 한글을 자주 틀리게 그린다. 이름과 작위는 사람마다 다르기도 하다. 그래서 배경만 그림으로 쓰고, 글자는 전부 앱이 코드로 그 위에 적게 했다.

시안 세 가지를 받아 비교했다. 왕관이 크고 파란 리본이 들어간 안은 가운데 공간이 좁았고, 격식이 너무 강한 안은 앱의 귀엽고 따뜻한 분위기와 맞지 않았다. 크림색 양피지에 붉은 리본과 밀랍 인장이 들어간 안을 골랐다. 작위 이름은 붉은 리본 위에 크림색 글자로, 밀랍 인장 자리에는 RKBA 도장을 그려 넣었다. 배경 그림을 불러오지 못하는 경우에 대비해, 코드로 그린 리본과 인장이 대신 나오게 하는 안전장치도 넣었다.

글자가 잘 안 보이는 문제

배경을 바꾸자 새 문제가 보였다. 금색 작위 이름이 크림색 배경 위에서 너무 흐렸다. AI에게 글자와 배경의 대비를 재 달라고 하니, 읽기 편한 기준(4.5:1)에 한참 못 미치는 2:1 정도였다. 금색은 테두리와 장식에만 쓰고, 글자는 진한 색으로 따로 정해 해결했다.

이후 작위증을 한 번 더 손봤다. 가장 급했던 건 발급인(협회장) 문구가 너무 작아서 안 보인다는 점이었다. 발급인 글자를 거의 두 배로 키우고 위에 구분선을 넣어 서명처럼 보이게 했다. 집사 이름은 더 크고 진하게, 왕국 이름은 한 단계 작게 줄여 중요도가 한눈에 보이도록 순서를 다시 잡았다. 사진 액자에는 훈장 같은 테두리를 둘렀다.

이때 배운 확인 방법이 있다. 화면을 눈으로만 보면 글자가 겹치는지 정확히 알기 어렵다. 그래서 “이미지로 저장”을 눌러 실제로 저장된 파일을 열어 확인했다. 사람들이 받아 가는 것은 결국 그 파일이기 때문이다.

친구들 반응

작위증을 넣은 버전을 배포하자 반응이 달라졌다. 친구들이 결과를 캡처해서 단체방에 올리기 시작했다. 결과 한 줄일 때는 없던 일이었다.

사진 이야기도 계속 나왔다. 작위증 한가운데 동그란 액자에 우리 폐하 사진이 들어가야 완성이라는 것이다. 원래 계획에 있던 기능이지만, 사용자 입에서 먼저 나오니 우선순위가 분명해졌다.

증서 문구에서 조심한 점

재미로 만든 증서라도 진짜 공문서처럼 오해받지 않도록 조심했다. 실제 기관 이름이나 공식 도장처럼 보이는 표현은 쓰지 않았고, 발급 주체도 세계관 속 단체인 “왕립 개집사협회”로 했다. 앱에는 “본 콘텐츠는 재미를 위한 오락용이며, 실제 반려동물 양육 능력이나 건강 상태를 평가하지 않는다”는 안내를 넣었다.

다음 글에서는 친구들이 가장 원했던 기능, 강아지 사진 업로드를 만든 이야기를 적었다.

이전 글: 조건문, “만약에” 한 마디면 끝! 앱이 알아서 결과를 고르는 원리
다음 글: 강아지 사진 올리기 기능, 서버 없이 안전하게 만든 방법