220여개가 넘는 국기 이미지는 어떻게 만들어야하나요
많은 모바일 게임들이 카카오톡, 라인, 위챗등 로컬 플랫폼을 통하거나 T스토어, 올레마켓 등 3사 마켓을 통해서 서비스를 진행합니다. 하지만 특정 지역 한정이 아닌 글로벌 타겟으로 진행하는 경우도 많이 있지요. 그러한 경우 전 세계의 유저를 다루기 위해서 국기 이미지를 필요로 하기도 합니다. 유저의 정보라든가 지역 정보등의 UI에서 말이지요.
어느날 갑자기 프로그래머 나부랭이가 국기를 그려달라고 합니다. 열불나서 불꽃 싸닥션 날려주고 싶군요. 전 세계 국가가 220여개가 넘는데 이를 언제 다 그리나요... 아 몰라 배째고 싶지만 그럴순 없으니 이미지 라이브러리들을 뒤져보고 구글님께 문안 인사도 드립니다. 근데 막상 뒤져봐도 딱히 바로 쓸만한게 없네요. 웹용 아이콘으로 제작되서 크기가 굉장히 작거나 쓸데없는 그라데이션이 들어가있기도 하구요. 쓸만한게 있다 쳐도 게임의 UI 스타일에 맞추려면 수작업이 들어 갈 수 밖에 없겠군요.
어딘가에서 이러한 고민을 하고 계시는 아티스트분께 이 글을 바칠까 합니다
geonames(http://www.geonames.org)에서 가공 안된 퓨어(?)한 국기 이미지를 받을 수 있습니다. 전 세계의 지리 정보를 모아둔 사이트인데 GIS쪽에서 많이 활용하는 데이터베이스인 듯 하더군요. 게다가 무료라는군요(아니라면 알려주세요. 무책임) 보통 우편번호나 지명 등의 정보에 주로 애용되는 듯한데 사랑스럽게도 국기 이미지도 존재하네요. 다음 url 형식으로 접근하면 국기가 나옵니다
http://www.geonames.org/flags/x/(ISO 3166-1 alpha-2 소문자).gif
ISO 3166-1 alpha-2는 두글자로 이루어진 국가 코드를 의미합니다. 주로 co.kr, co.jp 인터넷 도메인 주소에 쓰이는 그 코드요. 예를 들어 코드 부분에 kr로 입력하면 대한민국 국기가 나옵니다.프로그래밍에서도 주로 이 코드를 이용하니까 코더 나부랭이들이 쓰기 편하게 파일명도 이 코드로 저장해주는 아량을 베풀어주세요.
오 패턴도 알았겠다 이제 스크립트로 작업을 시작해보면 되겠군요. 일단 이미지를 받아서 파일로 저장하는 방법은 간단합니다. 명령프롬프트(dos터미널)창에서 curl(http://curl.haxx.se/)로 수행하고 그 결과를 파일로 저장하면 되겠습니다.
curl http://www.geonames.org/flags/x/ck.gif > temp.gif
그러면 Cook Islands라는 작은 섬나라의 국기가 temp.gif에 저장됩니다. 이제 국기를 가지고 석고석고돌리고석고할텐데 우리나라 국기를 가지고 장난치기 쪼까 거시기해서 미안하지만 남의 국기로 예를 들도록 하겠습니다. (음.. 예를 들어도 하필 많고 많은 나라중에 왜 쿡섬을 택했는지는 안알랴줌)
그럼 이미지를 받아왔으니 이제 써먹을 수 있게 입맛에 맞게 편집을 해야겠군요. 이제 이 이미지 편집은 지난 포스팅에서 설명 드렸던 image magick를 이용하도록 하겠습니다. 일단 공식 페이지에서 받아서 설치하세요.
그럼 일단 이미지가 604 X 302라는 어마어마한 사이즈라서 크기를 조절해야겠네요. 파일 포맷도 PNG로 써야하구요. 다음과 같이 입력하면 이미지 사이즈가 110x70으로 변경되어 ck.png로 저장됩니다. 근데 조금 고민할게 하나 있는데 국기들의 종횡비가 모두 동일하지는 않다는 것입니다. 그냥 쿨하게 종횡비를 무시하고 사이즈를 고정시켜버립시다. 위에 나와있듯이 사이즈 숫자 뒤에 !를 붙이면 종횡비를 무시합니다. 만일 종횡비를 유지하며 고정 높이 기준으로 맞추고 싶다면 110x70! 대신 x70으로 바꾸시면 됩니다. 반대로 고정 너비 기준으로 맞추고 싶다면 110x70! 대신 110으로 바꾸시면 됩니다.
convert temp.gif -resize 110x70! ck.png
사이즈를 줄이는 과정에서 필터링이 되면서 이미지가 조금 흐려진 느낌이 있네요. sharpen 효과를 추가해줘서 이미지를 선명하게 만들어 주도록 하죠.
convert temp.gif -resize 110x70! -sharpen 0x1 ck.png
좌 : sharpen전 우 : sharpen후
음.. 근데 예시로 든 Cook Island 국기 이미지는 문제 없는데 geonames에서 받은 다른 국기 중 이상한 테두리가 있는 것도 있네요. 대한민국 국기(http://www.geonames.org/flags/x/kr.gif)도 이상한 테두리가 있군요. shave 옵션을 줘서 이미지의 테두리를 놈 깎아내기로하죠.
convert temp.gif -shave 2 -resize 110x70! -sharpen 0x1 kr.png
좌 : 깎기 전 우 : 깎은 후
이제 이미지 자체에는 큰 문제는 없는데 이쁘지를 않네요. 게임의 ui는 둥글둥글하고 이쁜데 국기는 혼자 못생겨서 맘에 들지를 않네요. 모서리를 둥글둥글하게 좀 깎아주고싶군요. 그럴때는 모서리 부분을 알파로 뺀 마스킹 이미지와 합성시켜버리면 되요.
convert temp.gif -shave 2 -resize 110x70! -sharpen 0x1 -alpha set rounded_corner_mask.png -compose DstIn -composite ck.png
좌 : 합성 전 중 : 알파 마스크 후 : 합성 후
아직은 살짝 허전하군요. 이미지 테두리가 필요해보이네요. 테두리 이미지를 오버레이 시키는 방식으로 합성하는것도 추가해보죠.
convert temp.gif -shave 2 -resize 110x70! -sharpen 0x1 -alpha set rounded_corner_mask.png -compose DstIn -composite rounded_corner_overlay.png -compose Over -composite ck.png
좌 : 오버레이 전 중 : 오버레이 이미지 후 : 오버레이 후
이제 게임에 가져다 쓸만해졌군요. 근데 여기서 한번 용량 문제도 생각해봐야겠어요. 깃발 이미지 자체는 9KB정도밖에 되지 않아요. 근데 이러한 깃발들이 220개만 생겨도 9KB X 220 = 약 1.9MB라는 엄청난 놈들이 되어버리겠군요. 이미지에 사용되는 컬러 수를 줄여서 이미지 사이즈를 줄일 수 있어요. 컬러수가 줄어들면서 마하밴드가 생길 수 있으니 기왕히면 디더링도 같이 걸어주기로 해요. 64컬러로 제한시켜버리니 이미지 용량이 9KB에서 3KB로 확어드는군요. 애초에 국기들이 보통 이미지가 복잡하질 않아서 컬러를 줄여도 시각적인 차이도 없네요. 근데 사실 이쁘게 되지 않는 이미지도 몇개 생기니 스크립트 돌린 후에 한번씩 쭉 훑어봐주긴 해야해요.
convert temp.gif -shave 2 -resize 110x70! -sharpen 0x1 -alpha set rounded_corner_mask.png -compose DstIn -composite rounded_corner_overlay.png -compose Over -composite -dither FloydSteinberg -colors 64 ck.png
좌: true color, 9KB 우: 64 color, 3KB
자, 그럼 이제 다 되었군요. 이제 국가 코드들 루프 쏵 돌면서 이미지들 받아오고 컨버팅하면 되겠군요. 근데 문제는 이 국가 코드 리스트들 중 유효한 글자들을 어떻게 추려내느냐겠네요. 알파벳의 조합 26X26=676개 전부 유효한게 아니라 이 중 220여개만이 실제 할당되어 있기때문이죠. 어떻게 추려내면 될까요?
아 그딴거 몰라요 ㅋㅋ 그냥 쿨하게 26 X 26 루프 다 돌기로 하죠 ㅋㅋ 어짜피 컴퓨터가 힘들지 내가 힘든거 아니잖아요. 아.. 나이 먹으니 실력보다는 잔머리만 쌓이는군요. 유효하지 않은 국가 코드의 이미지를 받아와서 잘못된 이미지는 어짜피 image magick에서 실패하니 상관 없어요. 그럼 bat 확장자로 파일 하나 만들고 다음 코드 복붙해주세요.
SET ALPHABET_LIST=(a b c d e f g h i j k l m n o p q r s t u v w x y z)
for %%i in %ALPHABET_LIST% do (
for %%j in %ALPHABET_LIST% do (
call curl http://www.geonames.org/flags/x/%%i%%j.gif > temp.gif
call convert temp.gif -shave 2 -resize 110x70! -sharpen 0x1 -alpha set rounded_corner_mask.png -compose DstIn -composite rounded_corner_overlay.png -compose Over -composite -dither FloydSteinberg -colors 64 %%i%%j.png
del -f temp.gif
)
)
이제 이 배치파일을 따불클릭해서 뙇! 수행하고 커피한잔 마시고 돌아오면 국기 이미지들이 생성되어 있을겁니다. 한번 쫙 훑어서 검토만 하고 바로 칼퇴근 ㄱㄱ 하시죠.