아이콘 한 세트로 맞추기
메뉴, 장바구니, 전화 그림이 각자 다른 데서 온 것처럼 보이면 화면 전체가 허술해져요. 아이콘을 한 집안 그림으로 통일하는 방법이에요.
화면은 다 만들었는데 어딘가 어설픈 느낌이 남을 때가 있어요. 글도 멀쩡하고 색도 나쁘지 않은데 싸구려 같아 보이는 그 느낌이요. 열 번 중 여섯 번은 아이콘 때문이에요.
| 눈에 보이는 증상 | 실제로 일어난 일 |
|---|---|
| 어떤 그림은 굵고 어떤 건 가느다랗다 | 서로 다른 아이콘 집안에서 하나씩 가져다 붙었어요 |
| 장바구니만 알록달록하고 나머지는 검정 | 색 아이콘과 단색 아이콘이 섞였어요 |
| 그림 크기가 서로 다르다 | 각자 다른 크기로 들어가서 글자 높이와도 안 맞아요 |
| 아이콘 자리에 이모지가 있다 | 그림이 없어서 이모지로 대신 채웠어요. 기기마다 모양이 달라져요 |
| 키우면 뿌옇게 번진다 | 사진 형식 그림이라 확대하면 깨져요 |
| 뭘 뜻하는지 모르겠다 | 그림만 있고 이름이 없어요. 손님은 눌러 보기 전엔 몰라요 |
이 증상들은 전부 같은 뿌리에서 나와요. 아이콘을 하나씩 따로 구했다는 거예요. 그러니 고치는 방법도 하나예요. 한 세트로 다시 맞추는 거요.
쉽게 말하면
가게 안에 붙는 안내판을 생각해 보세요. 화장실 표시는 인쇄소에서 뽑았고, 금연 표시는 문구점에서 사 왔고, 영업시간은 사장님이 매직으로 썼어요. 하나씩 보면 다 멀쩡해요. 그런데 한 벽에 나란히 붙으면 그 가게는 급하게 문 연 곳처럼 보여요. 아이콘이 딱 이 안내판이에요. 같은 인쇄소에서 같은 서체로 한 번에 뽑아야 가게가 정돈돼 보여요.
손님은 왜 이상한지 설명하지 못해요. 그냥 "믿음이 덜 간다"고 느끼고 나가요.
같은 사람이 같은 펜으로 그린 것처럼 보여요. 이 하나로 화면 급이 올라가요.
아이콘 세트는 한 사람이 같은 규칙으로 그린 그림 모음이에요. 선 굵기, 모서리를 얼마나 둥글게 깎는지, 사각 격자 안에 얼마나 꽉 채우는지가 전부 정해져 있어요. 그래서 세트 안에서는 아무 그림을 뽑아 나란히 놓아도 어울려요.
왜 제각각이 되나
사장님이 실수한 게 아니에요. 만드는 과정 자체가 그렇게 되기 쉬워요.
- 1나눠서 말했어요. 처음에 메뉴 화면을 만들고, 다음 날 장바구니를 붙이고, 그다음 주에 전화 버튼을 넣었어요. 요청이 나뉘면 그때그때 다른 세트에서 그림을 가져올 수 있어요.
- 2이모지로 급하게 메웠어요. 마땅한 그림이 없으면 이모지가 손쉬워요. 그런데 이모지는 그림이 아니라 글자예요. 아이폰과 안드로이드와 윈도우가 각자 다른 그림을 보여줘요. 내 화면에서 예뻐도 손님 화면에서는 다르게 보여요.
- 3색 아이콘과 단색 아이콘을 섞었어요. 색이 들어간 그림 하나가 단색 아이콘 옆에 서면 그것만 튀어요. 손님 눈은 튀는 걸 먼저 보니, 중요하지 않은 버튼이 제일 먼저 눈에 들어와요.
- 4크기를 각자 정했어요. 어떤 건 글자보다 크고 어떤 건 작아요. 아이콘은 옆에 붙은 글자와 높이가 맞아야 줄이 가지런해 보여요.
- 5너무 많이 넣었어요. 문단마다 아이콘이 붙으면 강조가 아니라 소음이에요. 아이콘이 많으면 아무것도 강조되지 않아요.
먼저 정하면 안 흔들려요
아이콘을 고칠 때 하나씩 갈아 끼우면 끝이 안 나요. 어떤 세트로 갈지 먼저 한 번 정하고, 화면 전체를 그 세트로 한꺼번에 바꿔 달라고 말하세요. 이게 훨씬 빠르고 결과도 깔끔해요.
AI에게 이렇게 말하세요
사장님이 직접 그림을 찾아 오릴 필요는 없어요. 보이는 증상을 그대로 말하면 돼요. 전문 용어를 외우지 않아도 아래 문장으로 거의 다 해결돼요.
| 사장님이 본 증상 | 이렇게 말하세요 |
|---|---|
| 그림들이 제각각이에요 | "화면에 있는 아이콘이 서로 달라 보여요. 전부 같은 세트로 통일해주세요" |
| 어떤 건 색이 있고 어떤 건 흑백이에요 | "아이콘을 전부 선으로만 그린 단색으로 맞춰주세요" |
| 굵기가 다르게 보여요 | "아이콘 선 굵기를 다 같게 맞춰주세요" |
| 크기가 서로 안 맞아요 | "아이콘 크기를 전부 같게 하고, 옆 글자와 높이를 맞춰주세요" |
| 이모지가 섞여 있어요 | "이모지를 쓰지 말고 아이콘으로 바꿔주세요. 기기마다 다르게 보이는 게 싫어요" |
| 장바구니 하나만 튀어요 | "장바구니 그림만 다른 데서 온 것 같아요. 나머지와 같은 모양으로 다시 그려주세요" |
| 무슨 뜻인지 모르겠어요 | "아이콘만 있으면 뜻을 모르겠어요. 아이콘 아래에 짧은 이름을 같이 넣어주세요" |
| 키우면 뿌옇게 번져요 | "아이콘을 크게 키워도 안 깨지는 그림으로 바꿔주세요" |
| 배경과 비슷해서 잘 안 보여요 | "아이콘 색이 배경에 묻혀요. 더 진한 색으로 바꿔서 잘 보이게 해주세요" |
| 그림이 너무 많아 어지러워요 | "아이콘이 너무 많아 정신없어요. 꼭 필요한 데만 남기고 나머지는 빼주세요" |
한 줄에 하나만 시키는 게 좋아요. 통일부터 시키고, 결과를 보고 나서 굵기나 크기를 말하세요. 말하는 요령은 프롬프트 문서에 더 있어요.
"같은 세트로"가 마법의 말이에요
이 다섯 글자만 기억하면 돼요. 어떤 세트 이름을 알아야 하는 게 아니에요. "전부 같은 세트로 통일해주세요" 라고만 하면, 나머지 판단은 알아서 해요. 특정 느낌을 원하면 "좀 더 둥글둥글하게" 나 "좀 더 각지고 단정하게" 같은 말을 덧붙이면 돼요.
말했는데 일부만 바뀌었을 때
통일해 달라고 했는데 서너 개만 바뀌고 하나가 그대로 남는 일이 자주 있어요. 대개 그 하나가 다른 화면에 있거나, 버튼 안에 숨어 있어서 같이 손대지 못한 거예요. 이럴 때는 이 순서로 말하면 거의 다 잡혀요.
- 1어디가 남았는지 지목해요. "장바구니 화면의 쓰레기통 그림이 아직 예전 것이에요" 처럼요. 화면 이름과 그림 이름을 같이 대면 정확하게 찾아요.
- 2한 화면씩 돌아요. "이번엔 주문 확인 화면 아이콘도 같은 세트로 맞춰주세요" 라고 화면을 옮겨 가며 말하세요. 화면이 여러 장이면 한 번에 다 잡히기 어려워요.
- 3작은 자리도 짚어요. 버튼 안, 안내문 옆, 목록 오른쪽 화살표 같은 작은 그림이 자주 남아요. "버튼 안에 있는 작은 그림들도 같이 맞춰주세요" 라고 덧붙여요.
- 4한 번에 되돌릴 수 있어요. 바뀐 결과가 더 이상하면 되돌리면 돼요. 손해가 없으니 부담 없이 시켜 보세요. 되돌리는 방법은 되돌리기에 있어요.
말할 때 화면 이름을 붙이세요
"아이콘 바꿔주세요" 만으로는 어느 화면인지 알 수 없어요. "주문 확인 화면의 아이콘" 처럼 장소를 붙이는 것만으로 정확도가 크게 올라가요. 사람에게 심부름 시킬 때 "창고에서" 를 붙이는 것과 같아요.
한 세트인지 확인하는 네 가지
고쳐 달라고 한 뒤에 사장님이 눈으로 볼 곳은 네 군데예요. 이 네 개만 맞으면 한 세트로 보여요.
| 볼 곳 | 맞았을 때 | 틀렸을 때 하는 말 |
|---|---|---|
| 그리는 방식 | 전부 선으로만 그렸거나, 전부 속이 채워져 있어요 | "선으로만 된 아이콘으로 통일해주세요" |
| 선 굵기 | 가까이 봐도 굵기가 똑같아요 | "굵기가 다른 게 섞여 있어요. 같게 해주세요" |
| 크기와 여백 | 나란히 놓으면 위아래 높이가 딱 맞아요 | "아이콘 크기와 간격을 통일해주세요" |
| 색 | 한 색 또는 두 색 안에서만 써요 | "아이콘 색을 하나로 통일하고, 강조할 것만 다른 색으로 해주세요" |
여기서 색은 브랜드에서 정한 색을 그대로 쓰면 돼요. 아이콘 색을 따로 새로 정하지 마세요. 색이 늘어날수록 화면은 산만해져요.
그림 형식도 한 가지만 알아 두면 좋아요. 아이콘은 선으로 정의된 그림이라야 크게 키워도 테두리가 매끈해요. 사진처럼 점으로 만든 그림은 확대하면 뿌옇게 번져요. "키워도 안 깨지게" 라고만 말해도 알맞은 형식으로 바꿔 줘요.
그림만으로는 뜻이 안 통해요
아이콘을 통일하고 나면 다음 함정이 와요. 그림이 예쁘니까 글자를 지우고 싶어져요. 그런데 손님은 사장님만큼 이 화면에 익숙하지 않아요.
| 아이콘 | 사장님 생각 | 손님이 실제로 하는 생각 |
|---|---|---|
| 가로줄 세 개 | 메뉴 열기 | 이건 대부분 알아요. 예외적으로 통하는 그림이에요 |
| 돋보기 | 검색 | 이것도 통해요. 두 개는 안심하고 써도 돼요 |
| 하트 | 찜하기 | "좋아요"인지 "장바구니"인지 헷갈려요 |
| 동그라미 안 사람 | 내 정보 | "로그인"인지 "고객센터"인지 몰라요 |
| 종 | 알림 | 누르면 뭐가 켜지는지 겁이 나서 안 눌러요 |
그래서 규칙은 간단해요. 가로줄 세 개와 돋보기 말고는 짧은 이름을 옆이나 아래에 붙여요. 글자 두세 자면 충분해요. 눌러 보게 만드는 게 예뻐 보이는 것보다 중요하잖아요.
그림만 있는 버튼에는 눈에 안 보이는 이름도 하나 달아야 해요. 화면을 소리로 읽어 주는 기기가 그 이름을 읽어요. 이건 대체 텍스트에서 더 다뤄요. 말은 이렇게 하면 돼요. "아이콘만 있는 버튼에 읽어 주는 이름을 넣어주세요".
사장님이 실제로 겪는 장면
장면 1 · 지인이 화면을 보고 한 말
“잘 만들었는데 뭔가 좀 아마추어 같아. 어디가 그런지는 나도 모르겠어.”
이 말이 나오면 아이콘부터 보세요. 사람은 어긋난 것을 느끼지만 이름을 못 붙여요. 글꼴이 섞였거나 아이콘이 섞였을 때 거의 항상 이 말이 나와요. 아이콘 통일 한 번으로 같은 화면이 다르게 보여요. 글꼴 쪽이 의심되면 글꼴도 같이 확인하세요.
장면 2 · 내 폰에서는 예뻤는데
“제 폰에서는 장바구니 그림이 귀여운데, 손님이 보낸 사진에는 완전 다른 모양이에요.”
이모지를 아이콘으로 쓴 화면에서 나오는 증상이에요. 이모지는 그림 파일이 아니라 글자라서 기기가 각자 그려요. 같은 자리에 아이폰은 이 그림, 안드로이드는 저 그림을 넣어요. "이모지 대신 아이콘으로 바꿔주세요" 한마디로 끝나요.
장면 3 · 인쇄소에 명함을 맡기며
“화면에 있는 그 전화 그림 그대로 명함에도 넣어 주세요.”
여기서 세트의 진짜 값어치가 나와요. 한 세트로 맞춰 놨으면 명함, 간판, 포장 스티커까지 같은 그림을 그대로 쓸 수 있어요. 그림이 제각각이면 그때마다 새로 고르고, 새로 고른 게 또 어긋나요.
자주 묻는 것
- Q. 아이콘 세트를 제가 사야 하나요?
- 아니에요. 세상에는 누구나 무료로 쓸 수 있게 공개된 아이콘 모음이 여러 개 있고, 만들 때 그중에서 골라 써요. 사장님이 어느 세트인지 알 필요도 없어요. "같은 세트로 통일해주세요" 라고만 하면 돼요.
- Q. 이모지는 아예 쓰면 안 되나요?
- 버튼이나 메뉴 같은 기능 자리에는 쓰지 마세요. 기기마다 모양이 달라지고, 크기도 마음대로 조절이 안 돼요. 글 안에서 분위기를 내는 정도라면 판단해서 쓰되, 화면이 정돈돼 보이길 원한다면 아이콘 쪽이 낫습니다.
- Q. 아이콘이 몇 개쯤 필요해요?
- 웬만한 가게 화면은 열 개에서 스무 개 안에서 끝나요. 메뉴, 검색, 장바구니, 전화, 위치, 시간, 닫기 정도예요. 개수를 늘리려 애쓰지 마세요. 아이콘이 적은 화면이 더 정돈돼 보여요.
- Q. 브라우저 탭에 뜨는 작은 그림도 같은 건가요?
- 역할이 달라요. 그건 사이트 하나에 한 개만 두는 대표 그림이고, 파비콘 문서에서 따로 다뤄요. 화면 안에서 여러 개 쓰는 아이콘과는 만드는 방식도 크기도 달라요.
- Q. 직접 위치를 옮기거나 크기를 바꿀 수도 있나요?
- 네. 말로 시키는 것 말고 화면에서 직접 집어 옮기는 방법도 있어요. 캔버스 편집기에서 아이콘을 눌러 크기와 색을 손으로 조절할 수 있어요. 여러 개를 한꺼번에 맞출 때는 말로 시키는 게 빠르고, 하나만 미세하게 옮길 때는 손이 빨라요.
- Q. 손님이 올린 사진이나 로고도 아이콘처럼 맞춰야 하나요?
- 아니에요. 사진과 로고는 아이콘이 아니라 내용이에요. 통일 대상은 기능을 가리키는 작은 그림들이에요. 다만 로고가 화면에서 유독 크거나 색이 튀면 그것도 어수선해 보이니, 크기는 한 번 봐 주세요.
- Q. 우리 업종에 딱 맞는 그림이 세트에 없어요
- 흔한 일이에요. 그럴 때는 그림을 새로 구하지 말고 비슷한 뜻의 그림으로 대신하고 글자로 설명하세요. 예를 들어 "반려동물 미용" 그림이 없으면 가위 그림에 이름을 붙여요. 세트 밖에서 하나 데려오면 그 하나 때문에 전체가 어긋나요.
확인해 보세요
메뉴, 검색, 전화는 얇은 선 그림인데 장바구니만 색이 들어간 통통한 그림이에요. 어떻게 말하는 게 좋을까요?
하나 더
내 폰에서는 예쁜 장바구니 그림인데 손님 폰에서는 다른 모양이래요. 원인이 뭘까요?
직접 해보기
지금 내 화면 아이콘을 세어 보세요
만들던 화면을 열고 그림이 몇 종류인지, 굵기가 서로 같은지만 보세요. 두 종류 이상 섞여 있으면 "전부 같은 세트로 통일해주세요" 한 줄만 보내면 돼요. 오래 안 걸려요.
내 작업 열기더 깊이 (안 읽어도 괜찮아요)
세트가 같아도 어긋나 보이는 이유 · 같은 세트에서 뽑았는데도 하나가 크거나 작아 보일 때가 있어요. 세트는 보통 같은 크기의 네모 칸 안에 그림을 그리는데, 그 칸을 얼마나 채우는지가 그림마다 조금씩 달라요. 동그란 그림은 네모 칸을 꽉 채우면 오히려 커 보이고, 세로로 긴 그림은 같은 크기여도 작아 보여요. 눈에 걸리면 "이 아이콘만 눈으로 봤을 때 크기가 안 맞아요. 살짝 조절해주세요" 라고 하면 돼요. 자로 잰 숫자보다 눈에 맞는 것이 정답이에요.
아이콘은 강조 수단이라 아낄수록 세진다 · 아이콘이 하는 일은 눈길을 끄는 거예요. 그런데 화면의 모든 줄에 아이콘이 붙으면 전부가 눈길을 끌겠다고 손을 드는 셈이라, 결과적으로 아무것도 안 끌려요. 정말 중요한 세 자리에만 남겨 보세요. 나머지를 지운 것만으로 남은 세 개가 눈에 들어와요. 목록에 줄줄이 붙은 점 대용 아이콘은 지우는 쪽이 거의 항상 나아요.
세트를 정해 두면 다음 작업이 빨라져요 · 화면을 한 번 통일해 놓으면 나중에 새 화면을 만들 때 그 화면만 보고 이어서 맞춰 줘요. 그래서 아이콘 통일은 미루면 미룰수록 손해예요. 화면이 스무 개일 때 통일하는 것보다 세 개일 때 통일하는 게 훨씬 싸요. 통일한 규칙은 색과 여백 규칙과 함께 굴러가니 스타일 규칙 문서도 같이 보면 그림이 맞아떨어져요.
이것만 기억하세요
- ·화면이 어설퍼 보이면 아이콘이 섞였는지 먼저 보세요
- ·고치는 말은 한 줄이에요. "전부 같은 세트로 통일해주세요"
- ·볼 곳은 네 군데. 그리는 방식, 선 굵기, 크기, 색
- ·이모지는 기기마다 모양이 달라져요. 기능 자리에는 쓰지 마세요
- ·가로줄 세 개와 돋보기 말고는 짧은 이름을 같이 붙여요