스팀 라이브러리 에셋 규격: 캡슐·헤더·히어로·로고
스팀 에셋은 크게 두 묶음입니다. 상점에서 구매를 유도하는 스토어 에셋과, 구매한 뒤 스팀 클라이언트 라이브러리에서 보이는 라이브러리 에셋입니다. 스토어 캡슐 규격은 스팀 스토어 그래픽 규격 가이드에 정리해 두었고, 이 글은 라이브러리 쪽 4종만 따로 떼어 자세히 다룹니다. 라이브러리 에셋은 스토어 에셋과 규칙이 꽤 다릅니다. 특히 히어로 이미지에는 글자를 넣을 수 없고, 로고는 반드시 배경이 투명한 별도 파일이어야 한다는 점을 모르고 스토어 이미지를 잘라 올렸다가 다시 만드는 경우가 많습니다.
한눈에 보는 규격
| 에셋 | 규격 | 형식 | 보이는 곳 |
|---|---|---|---|
| 라이브러리 캡슐 | 600 × 900px | PNG | 라이브러리 홈 목록, 컬렉션 화면 |
| 라이브러리 헤더 | 920 × 430px | PNG | 라이브러리의 최근 게임 영역 등 |
| 라이브러리 히어로 | 3840 × 1240px | PNG | 게임 상세 화면 상단 배경 |
| 라이브러리 로고 | 가로 1280px 또는 세로 720px | PNG, 투명 배경 | 히어로 위에 얹히는 게임 로고 |
네 가지 모두 필수 항목입니다. 스팀은 캡슐과 히어로는 절반 크기(300×450, 1920×620) 버전을, 로고는 비율에 맞춘 절반 크기 버전을 자동으로 만듭니다. 원본 한 장만 올리면 되지만, 절반 크기로 줄었을 때도 로고와 핵심 형태가 읽히는지 미리 축소해서 확인해 두는 편이 좋습니다.
그리고 이 에셋들은 스토어 페이지가 공개된 뒤에야 스팀 클라이언트에 나타납니다. 업로드했는데 라이브러리에 안 보인다면 대개 이 때문입니다.
라이브러리 캡슐 600×900
라이브러리 홈 화면에 세로 표지처럼 줄지어 놓이는 이미지입니다. 게임 박스 표지를 떠올리면 가깝습니다. 밸브의 요구는 키 아트와 로고를 담아 게임의 분위기를 전달하라는 것이고, 게임 제목 외의 문구나 리뷰 인용은 넣지 않아야 합니다. 로고는 배경 위에서 쉽게 읽혀야 한다는 조건이 붙습니다.
실무에서 걸리는 지점은 비율입니다. 스토어 캡슐은 대부분 가로형이라, 그 이미지를 세로 2:3에 맞추면 인물이 잘리거나 여백이 어색해집니다. 키 아트를 처음 그릴 때부터 세로 크롭을 염두에 두고 여유 있게 캔버스를 잡아두면 이 단계가 훨씬 수월합니다. 목록에서는 300×450 절반 크기로 표시되는 일이 많으므로, 제목 글자는 스토어 캡슐보다 굵고 크게 가는 편이 안전합니다.
라이브러리 헤더 920×430
크기가 스토어의 헤더 캡슐과 같습니다. 그래서 따로 올리지 않으면 스토어 헤더 캡슐이 대신 쓰입니다. 규칙도 비슷해서, 제품 브랜딩에 집중하고 제목 외의 문구는 넣지 않습니다. 스토어 헤더에 할인 문구나 수상 배지를 얹어 두었다면 라이브러리에는 그런 요소를 뺀 버전을 따로 올리는 것이 맞습니다. 구매를 마친 유저에게 판매 문구를 보여줄 이유가 없기 때문입니다.
라이브러리 히어로 3840×1240
게임 상세 화면을 열었을 때 상단 전체를 채우는 배경입니다. 네 가지 중 가장 까다롭고, 규칙 위반도 가장 자주 나오는 에셋입니다.
글자를 넣으면 안 됩니다. 히어로는 시각적으로 풍부하고 한눈에 알아볼 수 있는 이미지여야 하며 텍스트는 허용되지 않습니다. 제목은 아래에서 설명할 로고 파일이 그 위에 따로 얹히는 구조입니다. 히어로에 제목까지 그려 넣으면 로고와 이중으로 겹칩니다.
안전영역은 가운데 860×380입니다. 스팀 클라이언트는 창 크기에 따라 히어로를 확대·크롭해서 보여줍니다. 어떤 창 크기에서도 잘리지 않는 영역이 중앙의 860×380px이고, 캐릭터 얼굴처럼 반드시 보여야 하는 요소는 이 안에 둬야 합니다. 이미지 자체는 3840×1240 전체를 채워야 하고, 안전영역 밖은 창이 넓을 때만 드러나는 여분이라고 생각하면 됩니다.
| 항목 | 값 |
|---|---|
| 원본 | 3840 × 1240px |
| 자동 생성 | 1920 × 620px |
| 항상 보이는 영역 | 중앙 860 × 380px |
| 텍스트 | 허용 안 됨 |
또 하나 고려할 것은 로고가 올라갈 자리입니다. 로고를 왼쪽 아래에 둘 계획이라면 히어로의 그 부분은 비교적 어둡고 단순하게 비워 두는 편이 좋습니다. 복잡한 배경 위에서는 로고가 묻힙니다.
라이브러리 로고: 투명 배경, 로고만
히어로 위에 얹히는 게임 로고입니다. 조건은 세 가지입니다.
- 배경이 투명한 PNG
- 가로 1280px, 또는 세로 720px, 또는 둘 다
- 게임 로고타입과 선택적 로고마크 외에 다른 문구 없음
가로 1280 "또는" 세로 720이라는 표현은, 로고 비율에 따라 둘 중 하나를 기준으로 맞추라는 뜻입니다. 가로로 긴 로고는 폭을 1280px에, 세로로 긴 로고는 높이를 720px에 맞추면 됩니다. 투명 여백을 과하게 남기면 실제 로고가 작게 보이므로, 로고 가장자리에 맞춰 캔버스를 잘라서 올립니다.
로고를 올리지 않으면 히어로 자리에 스토어 스크린샷이 들어가고 왼쪽 아래에 앱 이름이 글자로 표시됩니다. 필수 항목인 이유가 여기에 있습니다.
로고 위치 지정
로고를 업로드하면 히어로 위 어디에 놓을지 고르는 위치 지정 도구가 나타납니다. 기준점(anchor)은 네 가지입니다.
| 기준점 | 어울리는 히어로 구도 |
|---|---|
| 왼쪽 아래 | 주요 피사체가 오른쪽이나 중앙에 있는 구도. 가장 흔히 쓰임 |
| 가운데 위 | 피사체가 아래쪽에 모여 있고 위쪽 하늘이나 배경이 비어 있는 구도 |
| 가운데 중앙 | 배경이 단순한 패턴이나 풍경이라 가릴 대상이 없는 구도 |
| 가운데 아래 | 피사체가 위쪽에 있고 바닥 쪽이 비어 있는 구도 |
도구에서 로고 크기도 함께 조절합니다. 어느 위치를 고르든 밸브의 조건은 하나, 히어로 배경 위에서 로고가 보이고 읽혀야 한다는 것입니다. 배경과 로고의 명도가 비슷하면 로고 파일 쪽에 외곽선이나 그림자를 넣어 대비를 확보합니다.
위치를 정할 때는 창을 넓게 했을 때와 좁게 했을 때를 둘 다 떠올려야 합니다. 히어로는 창 크기에 따라 크롭되지만 로고는 기준점을 따라 움직이기 때문에, 좁은 창에서 로고가 히어로의 핵심 피사체를 덮을 수 있습니다. 안전영역 860×380 안의 피사체와 로고 자리가 겹치지 않게 잡는 것이 요령입니다.
제작 순서 제안
네 장을 따로 그리기보다, 키 아트 한 장에서 파생시키는 편이 효율적이고 톤도 맞습니다.
- 키 아트를 가로·세로 크롭 모두 가능한 넉넉한 캔버스로 제작합니다. 글자 없는 레이어와 로고 레이어를 분리해 둡니다.
- 글자 없는 레이어로 히어로 3840×1240을 뽑고, 중앙 860×380에 핵심 피사체를 맞춥니다.
- 로고 레이어만 투명 PNG로 내보내 라이브러리 로고로 씁니다.
- 같은 키 아트를 세로로 크롭하고 로고를 합쳐 라이브러리 캡슐 600×900을 만듭니다.
- 스토어 헤더 캡슐에서 판매 문구를 뺀 버전을 라이브러리 헤더로 씁니다.
정리
라이브러리 에셋은 이미 게임을 가진 유저가 매번 게임을 실행하면서 보는 화면입니다. 스토어 에셋처럼 클릭을 유도할 필요는 없고, 게임의 정체성을 깔끔하게 보여주는 것이 목적입니다. 기억할 규칙은 세 가지입니다. 히어로에는 글자를 넣지 않고 중앙 860×380에 핵심을 둔다, 로고는 투명 배경에 로고만 담아 따로 올린다, 캡슐과 헤더에는 제목 외 문구를 넣지 않는다. 규격은 Steamworks 문서가 개정되면 바뀔 수 있으므로 업로드 직전에 Steamworks의 라이브러리 에셋 페이지를 한 번 더 확인하는 것이 정확합니다.