앱 아이콘과 첫 화면

쉽게 말하면

이 두 가지는 기능이 아니라 규격 맞추기예요. 디자인 감각이 필요한 일이 아니고, 정해진 크기와 정해진 여백에 맞춰 내보내면 끝나는 일이에요. 그래서 처음 하는 사장님도 30분이면 해요.

다만 규격을 모르고 손대면 결과가 눈에 확 띄게 망가져요. 로고 글자가 잘려 나가고, 아이콘 밑에 엉뚱한 글자가 붙고, 열 때마다 검은 화면이 번쩍여요. 손님은 그걸 "급하게 만든 가게"로 읽어요.

아이콘 한 장이 나가는 자리

만드는 건 한 장인데, 그 한 장이 여러 자리에 따라다녀요. 어디에 나오는지 알면 왜 정사각형이어야 하는지도 같이 이해돼요.

규격은 세 가지만 기억해요

숫자가 많아 보여도 사장님이 실제로 챙길 건 세 가지예요. 정사각형·큰 원본 한 장·안쪽 여백이에요.

세 번째가 제일 많이 어긋나는 칸이에요. 안드로이드 폰들은 아이콘을 기기 모양대로 둥글게 깎거나 원으로 잘라내요. 원으로 잘리면 정사각형의 네 귀퉁이는 사라져요. 그 귀퉁이에 글자를 뒀다면 그 글자가 없어지는 거예요.

1. 1마크 한 조각을 정해요. 로고 전체가 아니라 상징 하나, 또는 가게 이름 첫 글자 하나예요. 정사각형 안에 넣는다고 생각하고 고르면 판단이 빨라요.
2. 2정사각형 판에 배경색을 꽉 채워요. 우리 가게 색으로요. 색이 아직 없다면 진한 색 하나만 정해도 충분해요. 색 정하는 이야기는 가게 이름과 색 정하기에 있어요.
3. 3마크를 가운데에 두고 사방을 비워요. 판의 안쪽 8할 안에만 마크가 들어가게요. 넉넉해 보여도 그게 정상이에요. 원으로 잘려도 살아남는 크기예요.
4. 4512점 정사각형으로 한 장 저장해요. 이 한 장이 원본이에요. 나머지 크기는 여기서 줄여 나와요.
5. 5아이콘 아래 뜰 이름을 짧게 정해요. 열 글자 안쪽이 안전해요. 긴 이름은 홈 화면에서 중간이 잘려요. 정식 이름과 짧은 이름을 따로 정해 두면 깔끔해요.

첫 화면은 무엇을 하나

손님이 아이콘을 누르면 화면이 바로 뜨지 않아요. 필요한 것을 불러오는 짧은 시간이 있어요. 그 시간에 아무것도 안 그리면 흰 화면이나 검은 화면이 지나가요.

첫 화면은 사장님이 그림으로 만드는 게 아니에요. 폰이 이름·아이콘·바탕색 세 가지를 모아 알아서 그려요. 그래서 사장님이 할 일은 그 세 칸을 채우는 것뿐이에요. 기기와 브라우저에 따라 그려지는 모양은 조금씩 달라요.

첫 화면을 길게 보여주려고 애쓸 필요는 없어요. 손님은 첫 화면을 보러 온 게 아니에요. 짧을수록 좋아요. 첫 화면이 3초나 뜬다면 그건 디자인 문제가 아니라 화면이 무겁다는 신호이고, 그건 사진 무게 줄이기 쪽 일이에요.

지금은 신경 쓰지 않아도 되는 때

정직하게 먼저 말씀드릴게요. 이 문서를 읽고 아무것도 안 하는 게 맞는 경우가 꽤 많아요. 아래에 하나라도 해당하면 오늘 할 일이 아니에요.

1. 1아직 문을 안 열었어요. 세상에 나가지 않은 화면은 홈 화면에 붙을 일이 없어요. 세상에 내보내기(배포)가 순서예요.
2. 2손님이 폰 홈 화면에 붙일 일이 없는 장사예요. 상담 예약, 견적 문의, 청첩장처럼 한 번 열고 끝나는 화면은 링크가 더 빨라요. 붙일 손님이 없으면 아이콘도 필요 없어요.
3. 3브라우저에서만 쓰이는 화면이에요. 그럼 지금 챙길 건 이 문서가 아니라 파비콘(탭 아이콘) 한 장이에요. 그게 10분이고 효과가 바로 보여요.
4. 4로고가 아직 없어요. 로고를 만들 때까지 미루지 마세요. 진한 배경에 가게 이름 첫 글자 하나만 흰색으로 올린 임시판이면 충분해요. 비어 있는 것보다 훨씬 낫고, 나중에 갈아 끼우면 돼요.
5. 5스토어 등록을 검토 중이에요. 그럼 규격을 먼저 알아볼 곳이 스토어 정책 문서예요. 스토어가 요구하는 아이콘 크기·형식·심사 기준은 여기 적힌 웹 관례와 별개이고, 자주 바뀌어요.

반대로 한 번 해 두면 계속 남는 종류이기도 해요. 나중에 다시 뜯어고칠 일이 거의 없어요. 그래서 급하지 않은 만큼, 여유가 생긴 날 30분 잡아서 끝내 두면 오래 편해요.

AI에게 그대로 말할 문장

용어를 몰라도 돼요. 지금 눈에 보이는 증상을 왼쪽에서 찾아서, 오른쪽 문장을 그대로 옮기면 통해요. 가게 이름과 색만 내 것으로 바꿔서요.

실제로 겪는 장면

자주 묻는 것

Q. 디자이너 없이 제가 만들 수 있나요?

네, 이건 감각보다 규격 일이에요. 진한 배경 정사각형에 첫 글자 하나면 이미 합격선이에요. 그림이 필요하면 AI로 그림 만들기로 마크를 뽑아 쓸 수도 있어요. 다만 아주 작게 줄여도 알아볼 수 있는 단순한 모양으로 뽑아야 해요.

Q. 탭 아이콘이랑 그림이 달라도 되나요?

안 됩니다. 같은 마크여야 손님이 같은 가게로 알아봐요. 크기와 여백만 자리에 맞게 다르게 뽑는 거예요. 자리마다 다른 그림을 쓰면 브랜드가 흩어져요.

Q. 스토어에 올릴 때도 이 아이콘을 쓰면 되나요?

그림은 그대로 쓰지만 크기와 형식 요구가 따로 있어요. 스토어가 요구하는 규격과 심사 기준은 스토어마다 다르고 바뀌기도 해서, 올리기 전에 각 스토어 정책 문서에서 확인하는 게 정확해요. 심사 흐름은 앱 스토어 심사에 정리돼 있어요.

Q. 첫 화면에 광고나 안내 문구를 넣어도 되나요?

권하지 않아요. 첫 화면은 손님이 읽는 화면이 아니라 지나가는 순간이에요. 읽히기도 전에 사라져요. 알릴 게 있으면 실제 화면 안에 두는 게 맞아요. 그리고 광고 표시 의무가 걸리는 문구라면 지나가는 화면이 아니라 손님이 볼 수 있는 자리에 두어야 해요.

Q. 아이폰과 안드로이드용을 따로 만들어야 하나요?

그림은 하나면 돼요. 필요한 크기 몇 장을 뽑아 두면 양쪽이 각자 맞는 걸 가져가요. 다만 잘리는 방식이 달라요. 안드로이드는 원으로도 잘라내고 아이폰은 모서리를 둥글게 깎아요. 그래서 여백을 넉넉히 둬야 양쪽에서 다 살아요.

Q. 글자가 여러 개 들어간 로고는 왜 안 되나요?

홈 화면 아이콘은 실제로 손톱 두 개 크기예요. 글자 두 개만 넘어가도 서로 붙어 얼룩처럼 보여요. 글자는 한 개까지, 그게 안전선이에요.

Q. 색은 무슨 색으로 하는 게 좋아요?

밝은 배경 화면과 어두운 배경 화면 양쪽에서 다 보이는 색이 좋아요. 그래서 아주 밝은 색이나 아주 옅은 색은 피해요. 진한 색 배경에 밝은 마크가 가장 안전한 조합이에요. 색이 서로 잘 구분되는지 판단하는 기준은 글자와 배경 색 대비에 있어요.

헷갈리기 쉬운 것

아이콘이 세 종류라는 게 제일 헷갈려요. 브라우저 탭에 붙는 아주 작은 것, 폰 홈 화면에 앉는 큰 것, 스토어 목록에 뜨는 것이 각자 다른 파일이에요. 그림은 하나, 파일은 여러 장이라고 외우면 정리가 돼요.

첫 화면과 로딩 표시도 다른 거예요. 첫 화면은 앱이 열리는 순간 한 번 지나가는 화면이고, 화면 안에서 내용을 기다릴 때 도는 표시는 따로예요. 그 이야기는 기다리는 동안 보여줄 것에 있어요. 첫 화면을 손봤는데도 안이 느리게 채워진다면 손댈 곳은 그쪽이에요.

"앱 아이콘이 있으면 앱이다"도 아니에요. 홈 화면에 아이콘이 생겨도 스토어에 등재된 앱과는 다른 길이에요. 그 차이는 앱과 웹사이트의 차이에서 갈라 보고 있어요.