웹에 올릴 이미지, 크기·용량·문구까지 무료 에디터로 끝내기

사진은 이미 있는데 사이트에 올리려니 막히는 경우가 많습니다. 크기가 안 맞아 잘려 보이거나, 용량이 커서 페이지가 느려지거나, 문구를 얹고 싶은데 어떤 프로그램을 깔아야 할지 모르겠거나. cmshom.com의 무료 이미지에디터는 설치도 가입도 없이 브라우저에서 바로 열리고, 이 세 가지를 한 화면에서 끝낼 수 있습니다.

웹 이미지는 세 가지만 맞으면 됩니다

디자인을 잘하고 못하고 이전에, 웹에 올라가는 이미지는 아래 세 가지가 맞아야 제 모습으로 보입니다.

• 크기(픽셀) — 들어갈 자리보다 작으면 흐릿해지고, 지나치게 크면 느려집니다.
• 비율 — 자리는 가로로 긴데 사진이 정사각형이면 위아래가 잘립니다. 인물 사진에서 특히 티가 납니다.
• 용량(KB) — 눈에 안 보이지만 방문자가 가장 먼저 체감하는 부분입니다. 사진 한 장이 3MB면 첫 화면이 그만큼 늦게 뜹니다.

아래 순서대로 따라 하면 이 세 가지가 자연스럽게 맞춰집니다.

어디에 쓸 이미지인지부터 고릅니다

가장 흔한 실수는 크기를 감으로 정하는 것입니다. 에디터 상단에는 용도별 크기가 미리 준비돼 있어서, 만들 자리를 누르면 캔버스가 그 크기로 잡힙니다.

• 히어로(첫 화면 큰 이미지) 1920×900
• 배너 1920×400 · CTA 1920×500
• 소개 800×600 · 서비스 600×400
• 상품 600×600 · 갤러리 800×800
• 프로필 400×400
• 공유 썸네일(OG이미지) 1200×630

어디에도 딱 맞지 않으면 자유를 고르고 직접 숫자를 넣으면 됩니다. 비율만 고정하고 싶을 때는 1:1 · 16:9 · 4:3 · 3:4 · 9:16 중에서 고르세요. 세로 사진을 가로 자리에 넣어야 할 때는 16:9로 고정해 두고 자르기로 보여줄 부분만 남기면 인물이 잘리지 않습니다.

자르고, 밝기를 맞춥니다

휴대폰으로 찍은 사진은 대개 조금 어둡거나 색이 가라앉아 있습니다. 왼쪽 도구에서 순서대로 쓰면 됩니다.

자르기와 크기

자르기로 필요한 부분만 남기고, 크기로 최종 픽셀을 맞춥니다. 기울어진 사진은 회전으로 수평을 잡습니다. 순서를 반대로 하면(크기를 먼저 줄이고 자르면) 남은 부분이 작아져 흐려지므로, 자르기 → 크기 순서를 지키는 편이 좋습니다.

밝기·대비·색

보정에서 밝기와 대비를 조금씩 올리는 것만으로도 대부분 해결됩니다. 더 세밀하게 다루고 싶으면 커브로 어두운 부분만 따로 끌어올릴 수 있고, 필터로 전체 분위기를 한 번에 바꿀 수도 있습니다. 한 번에 많이 움직이지 말고 조금씩 확인하며 올리는 편이 실패가 적습니다.

글자가 안 읽힐 때

사진 위에 문구를 얹으면 배경이 복잡해서 글자가 묻히는 일이 잦습니다. 이때는 문구가 놓일 자리만 흐림으로 살짝 흐리게 하거나, 반투명한 사각형을 하나 깔고 그 위에 글자를 올리면 훨씬 잘 읽힙니다.

문구와 로고를 얹습니다

문자로 글자를 넣고, 도형으로 배경 상자나 밑줄을 만듭니다. 색을 고를 때 스포이드로 사진 안의 색을 그대로 찍어 쓰면 사진과 글자가 따로 놀지 않습니다.

같은 로고나 문구를 여러 장에 반복해 넣어야 한다면 워터마크를 쓰는 편이 빠르고, 화살표·말풍선 같은 표시는 스티커에 준비된 것을 쓰면 됩니다.

용량 줄이기 — 숫자를 직접 정할 수 있습니다

보통은 품질 슬라이더를 이리저리 옮기며 용량을 맞추는데, 이 에디터에는 목표 용량(KB)을 적는 칸이 있습니다. 원하는 용량을 적으면 거기에 맞춰 저장해 줍니다.

기준이 필요하다면 아래 정도가 무난합니다.

• 첫 화면 큰 이미지 — 200~400KB
• 본문·상품 사진 — 80~200KB
• 목록 썸네일·프로필 — 30~80KB

PNG · JPG · WebP 중 무엇으로 저장할까

• WebP — 같은 화질에서 용량이 가장 작습니다. 특별한 이유가 없으면 이것을 권합니다.
• JPG — 사진에 무난합니다. 다만 투명을 지원하지 않아서, 배경이 뚫린 이미지를 JPG로 저장하면 그 자리가 검게 나올 수 있습니다. 저장 화면의 투명한 곳 채움에서 흰색 같은 색을 지정해 두세요.
• PNG — 로고처럼 배경이 투명해야 하는 것과 글자·선이 많은 이미지에 씁니다. 사진을 PNG로 저장하면 용량만 커집니다.

공유될 때 보이는 그림도 만들어 둡니다

카카오톡이나 SNS에 사이트 주소를 올리면 미리보기 그림이 함께 뜹니다. 이 그림을 지정해 두지 않으면 엉뚱한 이미지가 잡히거나 아무것도 안 나옵니다. 용도에서 OG이미지(1200×630)를 고르고, 사이트 이름과 한 줄 소개만 큼직하게 넣어 두면 충분합니다.

작게 보이는 자리이므로 글자를 많이 넣지 마세요. 휴대폰에서는 실제로 손톱만 하게 표시됩니다.

잘못 만져도 괜찮습니다

작업내역에 지금까지 한 일이 순서대로 남아 있어서, 마음에 안 들면 원하는 시점으로 되돌릴 수 있습니다. 문구나 로고처럼 나중에 위치를 바꿀 것들은 레이어를 나눠서 올려 두면 다른 부분을 건드리지 않고 그것만 옮길 수 있습니다.

정리

①어디에 쓸지 골라 크기를 잡고 ②자르고 밝기를 맞춘 다음 ③문구를 얹고 ④목표 용량을 적어 저장한다. 이 네 단계면 웹에 올릴 이미지는 대부분 해결됩니다.