무료 이미지 편집기 Photoshot 사용법: 기본 도구·레이어·마스크 작업기 01

사진 자르기부터 글자 넣기, 레이어 마스크까지. 무료 이미지 편집기 Photoshot에서 제품 사진 한 장을 포스터로 바꾸는 과정을 실제 화면으로 따라가 봅니다.

간단한 사진 편집에도 매번 구독이 필요할까 하는 생각에서 시작했습니다. 첫 목표는 사진을 열고, 글자와 장식을 따로 배치하고, 실수를 되돌린 뒤 저장하는 흐름을 만드는 것이었습니다. 포토샵 대안을 찾는 분이 먼저 시도해 볼 수 있는 기본 작업부터 담았습니다.

아래 이미지는 실제 편집기에서 촬영했습니다. 주황색 테두리는 누를 위치를 알려주는 안내 표시입니다. 이미지를 누르면 확대됩니다. 제품 사진은 AI로 생성한 시연용 이미지입니다.

Photoshot 편집기 열기 ↗따라 할 예제 사진 받기 ↓

01. 사진 한 장을 열어 시작합니다

상단 이미지 열기를 누르고 PNG·JPG·WebP 파일을 고릅니다. 이번에는 파란 향수병과 오렌지가 있는 제품 사진을 사용했습니다. 사진 위쪽 여백에 제목을 넣어 포스터를 만들겠습니다.

Photoshot 상단 이미지 열기 버튼과 불러온 제품 사진 — 주황색 테두리가 이미지 열기 버튼입니다. 오른쪽 레이어 목록에 불러온 사진이 생겼습니다.

02. 자르기로 포스터의 범위를 정합니다

왼쪽 자르기(C)를 선택하고 사진 위에서 드래그합니다. 남길 영역을 정한 뒤 상단의 자르기 적용을 누릅니다. 아래는 적용하기 전 화면입니다. 점선 안쪽이 남길 범위이고, 바깥쪽의 어두운 부분은 잘려 나갑니다. 이 예시는 적용 후 960 × 1440px로 만들었습니다.

자르기 도구로 남길 영역을 드래그한 뒤 자르기 적용 버튼을 누르기 전 화면 — 자르기 도구, 선택한 범위, 적용 버튼을 한 화면에서 확인할 수 있습니다.

03. 문자 도구로 제목을 넣습니다

왼쪽 문자(T)를 누르고 제목이 들어갈 위치를 클릭합니다. 오른쪽 속성 패널의 문자 내용에 CITRUS와 STUDIO를 두 줄로 입력하고, 글자 크기를 108로 맞췄습니다. 이번 제목 색은 짙은 남색입니다. 사진과 별개의 문자 레이어가 생기므로 문구만 다시 고칠 수 있습니다.

문자 도구와 문자 내용 입력란, 글자 크기 108을 설정한 실제 편집 화면 — 확인할 곳은 오른쪽 문자 내용과 글자 크기입니다. 완성 이미지에 글자를 합쳐 넣은 화면이 아닙니다.

04. 이동 도구로 제목의 위치를 맞춥니다

오른쪽 레이어 목록에서 CITRUS / STUDIO를 선택한 뒤 이동(V)을 누릅니다. 캔버스에서 드래그하거나 오른쪽 X·Y에 위치를 입력해 제목만 옮길 수 있습니다. 아래에서는 X 125, Y 115로 바꿔 봤습니다. 글자에만 선택 테두리가 생기고 제품 사진은 그대로입니다.

제목 문자 레이어만 선택하여 이동 도구와 X 125 Y 115로 위치를 조절하는 장면 — 자르기는 캔버스의 범위를, 이동은 캔버스 안에 놓인 레이어의 위치를 바꿉니다. 이 화면은 이동 기능을 보여주기 위한 별도 예시입니다.

05. 새 레이어에 브러시로 포인트를 더합니다

레이어 패널 아래 ＋로 빈 레이어를 추가하고 이름을 ‘오렌지 포인트’로 바꿨습니다. 브러시(B)를 선택한 다음 상단에서 크기 28px, 주황색을 정하고 제목 아래를 드래그했습니다. 사진에 직접 칠하지 않고 빈 레이어를 사용하면 선만 따로 움직이거나 가릴 수 있습니다.

브러시 도구와 주황색 선택칸, 별도 오렌지 포인트 레이어에 그린 선 — 사진·제목·브러시가 각각 다른 레이어입니다. 레이어 목록에서 편집할 대상을 먼저 확인하세요.

06. 불투명도로 장식의 강도를 조절합니다

‘오렌지 포인트’ 레이어를 선택하고 레이어 목록 위 불투명도를 100%에서 40%로 낮췄습니다. 주황색 선만 연해지고 사진과 제목은 바뀌지 않습니다. 각 레이어의 눈 아이콘을 누르면 잠시 숨길 수도 있습니다. 다음 마스크 예시에서는 선이 잘 보이도록 불투명도를 100%로 되돌렸습니다.

오렌지 포인트 레이어의 불투명도를 40퍼센트로 낮춰 주황색 선만 연해진 장면 — 같은 색을 다시 칠하지 않고도 장식 전체의 강도를 바꿀 수 있습니다.

07. 마스크로 일부를 숨겼다가 복원합니다

이번에는 주황색 선의 가운데만 잠깐 가려 보겠습니다. ‘오렌지 포인트’를 선택하고 오른쪽 속성 패널에서 ＋ 레이어 마스크 추가를 누릅니다. 상단에 ● 숨기기 / ○ 복원 버튼이 나타나면 마스크 편집 상태입니다.

● 숨기기를 선택합니다.
선의 가운데를 브러시로 칠합니다. 아래 예시는 155px 브러시를 사용했습니다.
○ 복원으로 바꾸고 같은 곳을 다시 칠합니다.
선을 그리는 작업으로 돌아가려면 원본 편집을 누릅니다.

마스크 숨기기 버튼을 선택하고 주황색 선 가운데를 가린 실제 화면 — 오른쪽 레이어의 흰 마스크 썸네일과 상단 숨기기·복원 버튼을 확인하세요. 선 가운데가 가려져 있습니다.

숨기기 · 가운데가 가려짐

마스크로 가운데를 숨겨 두 부분으로 나뉜 주황색 선 — 실제 편집 화면의 해당 부분을 확대한 이미지입니다.

복원 · 같은 선이 다시 이어짐

마스크 복원으로 가운데가 다시 이어진 같은 주황색 선 — 원본에 선을 다시 그리지 않고 마스크를 복원했습니다.

복원 버튼을 선택하고 주황색 선 가운데를 다시 나타낸 실제 화면 — ○ 복원이 선택된 상태입니다. 사진과 제목은 건드리지 않았습니다.

마스크는 레이어의 보이는 부분을 따로 관리합니다. 가린 내용이 원본 레이어에 남아 있기 때문에 다시 보여줄 수 있습니다. 지우개는 원본의 내용을 지우는 작업이므로, 나중에 복원할 수 있게 남기려면 마스크가 유용합니다. 일반적인 마스크의 검정·흰색 역할은 Photopea 공식 마스크 안내에서도 확인할 수 있습니다.

색을 칠하려는데 그림이 사라진다면 마스크 편집 중인지 확인하세요. 가리려는데 색이 그려진다면 원본을 선택한 상태일 수 있습니다.

08. 완성 이미지와 작업 파일을 각각 저장합니다

상단 내보내기에서 PNG 또는 JPG를 고르고 다운로드합니다. SNS나 홈페이지에 쓸 완성 이미지는 이 파일입니다. 아래는 PNG를 선택한 실제 내보내기 창입니다.

PNG 형식과 크기를 확인한 뒤 다운로드하는 Photoshot 내보내기 창 — 다운로드는 완성 이미지 저장입니다. 프로젝트 저장 버튼은 레이어를 남기는 별도 기능입니다.

제목이나 배치를 나중에 바꾸려면 프로젝트 저장도 함께 누르세요. .layerstudio는 Photoshot의 레이어와 편집 상태를 다시 여는 작업 파일입니다. 초기 개발 이름에서 이어진 확장자이며 PSD 파일과는 다릅니다. 브라우저 임시 저장만 믿기보다는 중요한 작업을 파일로 보관하는 편이 좋습니다.

Photoshot에서 제품 사진과 문자, 주황색 브러시를 합성해 내보낸 완성 포스터 — 실제 편집기에서 내보낸 960 × 1440px PNG 결과입니다.

지금 쓸 수 있는 기능과 다음 작업

이번 글은 사진·글자·브러시를 레이어로 나누고, 불투명도와 마스크로 편집한 뒤 저장하는 기본 흐름을 다뤘습니다. 일반 편집 연산은 브라우저 안에서 처리하며, PC의 넓은 화면에서 사용하는 것을 권장합니다.

현재 알파 버전의 지원 범위는 RGB 8비트 이미지, 최대 4096px 캔버스, 최대 50개 레이어입니다. PSD 호환 편집, RAW 현상, CMYK 인쇄 작업은 아직 지원하지 않습니다. AI 이미지 레이어 분리도 후속 테스트가 필요한 기능입니다.

Photoshot은 Adobe Photoshop과 별개로 만든 웹 편집기입니다. 간단한 이미지 편집에 필요한 기능부터 구현하며 사용성을 다듬고 있습니다.

사진 밝기 조절도 되나요?

기본 버전에는 개별 레이어의 밝기·대비·채도 조절이 있습니다. 보정값을 독립된 레이어에 저장하는 조정 레이어와 상세 속성 패널은 아직 개발 버전입니다. 다음 글에서 구현 과정과 보정 전후를 보여드립니다.