개발에 넘기는 이미지·아이콘 규격

화면에 들어가는 이미지는 두 줄로 정리됩니다 — 보이는 크기의 2배로 뽑고, 아이콘과 로고는 벡터로 넘긴다. 벡터 — 점과 선의 좌표로 그려져 크기를 바꿔도 뭉개지지 않는 그림입니다. 나머지는 형식·용량·이름 규칙만 맞추면 됩니다. 이 세 가지가 맞으면 되묻는 일이 거의 없습니다.

왜 2배 크기로 넘기나요

요즘 화면은 한 칸 자리에 점을 두세 개 찍습니다. 그래서 화면에서 160px 로 보이는 썸네일에 160px 이미지를 넣으면 테두리가 흐려집니다. 보이는 크기의 2배로 넘기면 대부분의 기기에서 또렷합니다. 3배까지 올리면 또렷함보다 무거워지는 쪽이 커집니다.

넘기는 것	화면에서 보이는 크기	파일 크기
아이콘	24px	벡터 하나로
목록 썸네일	한 변 160px	320px
본문 이미지	가로 720px	1,440px
맨 위 큰 이미지	가로 1,200px	2,400px

맨 위 큰 이미지만 예외를 둡니다. 2배로 만들면 파일이 무거워지므로 압축 품질을 조금 더 낮춰 용량을 맞춥니다. 큰 이미지는 화면에서 넓게 펼쳐져 있어 압축 자국이 눈에 덜 띕니다.

보이는 크기를 모를 때는 화면 설계 그림 위에서 재면 됩니다. 폭이 정해지지 않고 화면에 따라 늘어나는 자리는 가장 넓게 벌어졌을 때를 기준으로 잡습니다. 좁은 화면에서 줄어드는 것은 문제가 없지만, 넓은 화면에서 늘어나면 흐려집니다.

어떤 형식으로 주나요

쓰임	형식	이유
아이콘 · 로고	SVG	크기를 바꿔도 안 뭉개지고 색을 코드에서 바꿉니다
배경이 비쳐야 하는 그림	PNG	투명한 부분을 담습니다
사진	JPG	같은 화질에서 용량이 작습니다
사진을 더 줄여야 할 때	WEBP 와 JPG 한 벌씩	WEBP 를 못 읽는 화면을 위해 JPG 를 남깁니다

SVG 는 넘기기 전에 글자를 선으로 바꿔 둡니다. 그 글꼴이 없는 기기에서 모양이 달라지기 때문입니다. 그리고 파일 안에 남은 편집 흔적을 지우면 용량이 절반 아래로 줄어드는 경우가 많습니다.

움직이는 그림은 영상으로 넘깁니다. 여러 장을 이어 붙인 그림 파일은 용량이 크고 색이 뭉개집니다. 소리 없는 짧은 MP4 한 편이 같은 움직임을 훨씬 가볍게 보여 줍니다.

아이콘은 어떤 규격으로 맞추나요

아이콘은 같은 크기의 정사각 안에 그립니다. 아이콘마다 여백이 다르면 나란히 놓았을 때 크기가 들쭉날쭉해 보입니다. 아래 다섯 줄을 한 벌 전체에 똑같이 적용합니다.

• 바탕 — 24px 정사각 하나로 통일, 큰 아이콘이 필요하면 같은 그림을 배수로 씁니다
• 여백 — 사방 2px 를 비우고 그림은 20px 안에 넣습니다
• 선 굵기 — 1.5px 또는 2px 중 하나만 씁니다
• 색 — 검정 한 가지로 넘기고 색은 코드에서 바꿉니다
• 모서리 — 둥근 정도를 한 값으로 맞춥니다

아이콘은 한 벌로 묶어 한 번에 넘깁니다. 한 개씩 따로 넘기면 굵기와 여백이 조금씩 달라져 나중에 다시 맞춰야 합니다. 새 아이콘이 필요할 때도 처음 만든 파일을 열어 그 안에서 그립니다.

용량은 어디까지 줄이나요

자리	한 장 상한	넘으면 생기는 일
목록 썸네일	50KB	목록이 빈칸으로 먼저 뜹니다
본문 이미지	200KB	내려가는 중에 늦게 채워집니다
맨 위 큰 이미지	300KB	첫 화면이 늦게 뜹니다
한 화면 이미지 합	2MB 안쪽	느린 회선에서 끊깁니다

이 값은 대체로 통하는 기준입니다. 만드는 쪽에서 따로 정해 둔 상한이 있을 수 있으므로 넘기기 전에 한 번 확인합니다. 줄이는 데는 순서가 있습니다 — 폭을 먼저 맞추고, 형식을 고르고, 그래도 크면 압축 품질을 80% 근처까지 내립니다. 순서를 바꿔 압축부터 하면 화질만 잃고 용량은 별로 줄지 않습니다.

이미지와 함께 무엇을 적어 주나요

파일만 넘기면 화면에 넣는 쪽에서 되묻게 됩니다. 파일 목록 옆에 네 칸을 만들어 한 줄씩 적어 두면 왕복이 줄어듭니다. 표 한 장이면 되고, 파일이 늘어도 줄만 더하면 됩니다.

함께 적는 것	적는 값	없으면 생기는 일
대체 글	그림을 설명하는 한 줄	그림이 안 뜰 때 빈칸만 남습니다
잘릴 때 기준	가운데 · 위 · 아래 중 하나	좁은 화면에서 제품이 잘립니다
어두운 화면용	따로 필요한지 여부	흰 로고가 안 보입니다
누르면 가는 곳	주소 한 줄	그림만 놓이고 눌리지 않습니다

어두운 화면용은 로고와 아이콘만 한 벌 더 만들면 됩니다. 사진은 그대로 써도 됩니다. 배경이 흰색으로 굳어 있는 로고는 어두운 화면에서 네모 판처럼 보이므로, 배경이 투명한 판을 따로 둡니다.

파일 이름과 폴더는 어떻게 정하나요

영문 소문자와 하이픈만 씁니다. 한글·공백·괄호가 들어가면 주소로 바뀔 때 깨집니다. 이름은 쓰임-대상-상태 순서로 적습니다 — icon-cart-off.svg 처럼 읽는 것만으로 어디에 쓰는 파일인지 알 수 있어야 합니다.

상태를 나타내는 말은 두세 개로 미리 정해 둡니다 — on · off · disabled 처럼 씁니다. 사람마다 다른 말을 쓰면 같은 아이콘이 두 벌씩 쌓이고, 화면에서 어느 것이 쓰이는지 알 수 없게 됩니다.

폴더는 아이콘·이미지·로고 세 칸이면 충분합니다. 같은 그림을 여러 크기로 넘길 때는 이름 끝에 배수를 붙여 한 폴더에 둡니다. 크기별로 폴더를 나누면 그림 하나가 바뀌었을 때 어디를 고쳐야 하는지 놓칩니다.

오늘 할 일

넘기려고 모아 둔 이미지 폴더를 열어 용량이 큰 파일 다섯 개를 찾습니다. 위 상한을 넘는 것만 폭을 다시 맞춰 저장하고, 아이콘 중 PNG 로 된 것이 있으면 SVG 로 다시 뽑습니다. 30분이면 프로그램 개발에 넘길 묶음이 정리됩니다.