작성자: 컴맹 집사
대표 이미지: 사진이 없을 때 처음에는 발바닥 문양만 보였다 (출처: 앱에서 발급한 작위증, 직접 저장)
이 글에서 얻는 것
- 이런 분께 사진이나 값이 비었을 때 화면이 이상하게 나오는 분
- 핵심 답 사진이 없으면 기본 이미지를, 그마저 못 불러오면 왕관 이모지를 보여 주도록 두 겹으로 대비했다
- 바로 쓰는 팁 새 화면마다 “이 칸이 비면 무엇이 보이나, 불러오다 실패하면 어떻게 되나, 기본값도 분위기에 맞나” 세 가지를 물어보자
사진 업로드 기능을 배포하고 며칠 뒤, 친구가 작위증 캡처를 보내왔다. 한가운데 동그란 액자가 텅 비어 있었다. 사진을 넣지 않고 발급받은 것이다.
빈 액자는 생각보다 허전했다. “여기 뭔가 빠졌어요”라고 말하는 것 같았다. 사진은 선택 사항이라 모두가 넣지는 않는다. 사진이 없어도 작위증이 완성돼 보여야 했다.
사진이 없는 경우는 생각보다 많았다
사진이 비는 상황을 정리해 보니 한두 가지가 아니었다.
- 사용자가 일부러 사진을 안 넣은 경우
- 휴대폰에 마땅한 사진이 없는 경우
- 사진을 골랐는데 불러오기에 실패한 경우
- 저장 공간이 부족해서 사진만 빠지고 저장된 경우
어느 경우든 빈 액자 대신 기본 이미지가 보이게 하기로 했다.
기본 이미지로 무엇을 쓸까
처음 계획은 이미지 생성 AI로 “왕관을 쓴 강아지의 왕실 초상화”를 만드는 것이었다. 세계관에 잘 맞고, 실제 사진처럼 저작권 걱정도 덜할 것 같았다.
출처: 앱에 넣은 기본 이미지 파일
그런데 고민 끝에 방향을 바꿨다. 실제 강아지 사진을 기본 이미지로 쓰기로 한 것이다. 하얀 푸들이 초록색 하네스를 하고 정면을 바라보는 사진이었다. AI가 그린 그림은 예쁘지만 어딘가 비슷비슷해 보였고, 반려인을 위한 앱이라면 실제 강아지의 표정이 주는 따뜻함이 더 어울린다고 생각했다. AI는 원래 기획과 다르다는 점을 짚어 줬지만, 최종 선택은 내가 했다. 왕관이 없어도 충분히 “우리 집 왕”처럼 보였다.
이 사진은 두 곳에서 쓴다.
- 작위증: 사진을 넣지 않았을 때 동그란 액자에 들어간다.
- 첫 화면의 “우리 집 왕”: 사용자가 자기 강아지 사진을 올리기 전까지 기본 사진을 보여 준다. 이 사진은 작위증 사진과 따로 저장되게 했다.
동그란 액자에 맞게 자르기
기본 사진을 넣고 나니 새 문제가 보였다. 사진은 네모인데 액자는 동그라미다. 정사각형으로 잘라 동그랗게 보여 주니 머리 위 여백이 너무 많았다. 강아지가 액자 아래쪽에 쏠려 보였다.
위쪽 경계를 머리에 더 가깝게 당겨서 다시 잘랐다. 이때 쓴 방법이 유용했다. 매번 앱을 고쳐서 배포해 보는 대신, AI에게 동그란 틀을 씌운 미리 보기 그림을 여러 장 만들어 달라고 했다. 마음에 드는 것을 고른 뒤 한 번만 앱에 반영했다. 덕분에 헛배포를 여러 번 줄일 수 있었다.
조건문으로 사진과 기본 이미지 고르기
규칙은 앞에서 배운 조건문 그대로다.
- 만약 사용자가 고른 사진이 있으면 → 그 사진을 액자에 넣는다.
- 그렇지 않으면 → 기본 사진을 액자에 넣는다.
작위증의 사진 액자에, 사용자가 사진을 넣지 않았으면
기본 이미지(assets/default-royal-dog.jpg)를 넣어 줘.
강아지 얼굴이 액자 가운데 오도록 잘라서.
사용자가 사진을 넣으면 기본 이미지 대신 그 사진으로 바뀌게.
이미지가 깨졌을 때를 위한 안전장치
이미지 파일을 못 불러오는 경우도 있다. 파일 이름을 잘못 적었거나, 인터넷이 잠깐 끊겼거나, 파일이 아직 올라가지 않은 경우다. 그러면 액자 안에 깨진 그림 아이콘이 나온다.
AI가 알려 준 방법은 두 겹이었다.
- 이미지에 불러오기 실패 시 실행할 동작(
onerror)을 둔다. (출처: MDN 웹 문서, img 요소) - 첫 화면 사진 액자 아래에는 왕관 이모지(👑)를 깔아 두고, 그 위에 사진을 올린다. 사진을 못 불러오면 사진만 숨기면 되고, 아래 왕관이 자연스럽게 드러난다. 깨진 아이콘이 보일 틈이 없다.
이 안전장치 덕을 실제로 봤다. 기본 사진 파일을 준비하기 전에 기능을 먼저 배포했는데, 그동안 사람들은 깨진 아이콘 대신 왕관을 봤다. 나중에 영어판에서 기본 사진 파일이 빠져 있었을 때도 이 덕분에 화면이 망가지지 않았다.
작위증 배경 그림도 같은 원칙으로 만들었다. 배경 그림을 못 불러오면 코드로 그린 리본과 인장이 대신 나온다.
파일 이름과 폴더 정리
첫 배포 날 대문자 파일 이름 때문에 그림이 깨졌던 경험이 있어서, 이번에는 처음부터 영어 소문자와 하이픈만 썼다. 이미지는 assets 폴더에 따로 모았다.
kba-butler-app/
├─ index.html
└─ assets/
├─ default-royal-dog.jpg (기본 강아지 사진)
├─ cert-bg.jpg (작위증 배경)
└─ home-bg.jpg (첫 화면 배경)
내 앱에도 써먹는 “빈자리” 점검 3가지
이번 일을 겪고 나서, 새 화면을 만들 때마다 스스로 묻는 질문이 생겼다. 사진뿐 아니라 이름, 점수, 기록처럼 “비어 있을 수 있는 칸”이 있는 앱이라면 누구에게나 쓸모 있는 질문이다.
- 이 칸이 비면 화면에 뭐가 보이나? 텅 빈 네모, “undefined” 같은 이상한 글자가 보인다면 대신 보여 줄 기본값이 필요하다.
- 불러오다 실패하면 어떻게 되나? 인터넷이 끊기거나 파일이 빠져도 화면 전체가 무너지지 않게, 한 단계 더 아래의 대비책을 둔다. 우리 앱의 “사진 → 기본 사진 → 왕관 이모지”처럼.
- 기본값도 세계관에 맞나? 회색 사람 아이콘 하나만 띄우면 앱의 분위기가 깨진다. 우리 앱에서는 기본값도 “우리 집 왕”처럼 보이게 하는 데 신경 썼다.
AI에게 부탁할 때는 이렇게 말하면 된다. “사진이 없거나 불러오지 못하면 기본 강아지 사진을 보여 줘. 그것마저 실패하면 왕관 그림을 보여 줘.” 단계별로 말해 주면 AI가 빈틈없이 만들어 준다.
이제 작위증이 완성됐다. 다음 과제는 이 작위증을 이미지 파일로 저장하는 기능이었다. 캡처로는 증서 전체가 깔끔하게 담기지 않는다는 불만이 있었기 때문이다.
이전 글: 강아지 사진 올리기 기능, 서버 없이 안전하게 만든 방법
다음 글: 결과 이미지 저장, 아이폰만 안 되던 미스터리 해결기
답글 남기기