ELASTIC CANVAS · 실전 가이드
선택 영역부터 PNG 저장까지, 탄성 변형을 다루는 방법
Elastic Canvas는 한 장의 이미지에서 지정한 부분을 메시와 스프링으로 변형하는 도구입니다. 사진 전체를 이동하는 대신, 선택 영역 안의 픽셀이 주변과 이어지면서 움직입니다. 아래 순서로 작은 영역 하나를 먼저 시험하면, 윤곽과 배경을 덜 흐트러뜨리면서 원하는 느낌을 찾을 수 있습니다.
1. 이미지와 작업 범위를 준비하기
PNG, JPG, WEBP 파일을 선택하거나 편집기에 끌어 놓습니다. 입력 파일은 최대 25MB이며, 긴 변이 2400px를 넘으면 작업용 이미지를 그 크기로 줄입니다. 예를 들어 4800 × 3200 이미지는 2400 × 1600으로 처리됩니다. 원본 크기 그대로 저장해야 하는 작업에는 이 제한을 먼저 고려하세요.
처음에는 배경과 대상의 경계가 뚜렷한 이미지를 사용하세요. 움직일 부분에 글자, 격자, 직선이 겹치면 픽셀이 늘어나는 모습이 더 눈에 띕니다. 직접 만든 단순한 도형이나 사용 권한이 있는 일러스트로 시험한 다음, 실제 작업 이미지에 적용하는 편이 판단하기 쉽습니다. 원본은 별도로 보관하세요.
2. 타원과 자유곡선 중에서 선택하기
둥근 물체나 작은 장식에는 타원이 빠릅니다. ‘영역 편집’에서 타원 도구를 선택하고 대상 주위를 대각선으로 드래그합니다. 만들어진 영역은 안쪽을 드래그해 옮기고 핸들로 크기를 조절합니다. 길쭉한 대상에는 영역 안을 마우스 우클릭한 채 드래그해 타원 방향을 맞추세요. 이 회전은 선택 영역의 방향을 바꾸는 기능이며 이미지 전체를 회전하지 않습니다.
구름이나 잎처럼 윤곽이 불규칙하면 자유곡선을 사용합니다. 윤곽을 한 번에 그린 뒤 놓으면 시작점과 끝점이 연결됩니다. 너무 좁거나 교차하는 선 대신 충분한 면적을 가진 단순한 폐곡선부터 시험하세요. 최대 네 영역을 만들 수 있고 ‘좌우 복제’로 대칭 위치에 복사할 수 있습니다. 여러 영역을 겹치기 전에 하나씩 움직임을 확인하면 어느 영역이 결과에 영향을 주는지 알기 쉽습니다.
3. 움직임 미리보기에서 같은 동작으로 비교하기
영역을 만든 다음 ‘움직임 미리보기’로 전환합니다. 영역 안을 조금 잡아당겼다가 놓으면 원래 위치로 돌아오는 반응을 볼 수 있습니다. ‘스치기 반응’을 켜면 포인터가 빠르게 지나갈 때도 반응합니다. 모양을 다시 그리거나 옮기려면 ‘영역 편집’으로 돌아가세요.
설정 효과를 비교할 때는 한 번에 한 항목만 바꾸고 같은 위치에서 비슷한 거리만큼 당기세요. 당기는 힘까지 달라지면 탄력 설정과 입력 차이를 구분하기 어렵습니다. 아래 값들은 물리 단위가 아닌 도구 내부의 상대적인 조절값입니다. 브라우저의 동작 줄이기 설정이 켜져 있으면 움직임 크기가 낮아질 수 있습니다.
4. 다섯 가지 조절값의 역할
흔들림이 너무 크다면 먼저 ‘흔들림 크기’를 낮추고, 너무 오래 남는다면 ‘진정되는 속도’를 높여 보세요. ‘탄력’을 올리는 것과 ‘진정되는 속도’를 낮추는 것은 같은 조작이 아닙니다. 전자는 되돌아오는 진동의 속도에, 후자는 감쇠에 영향을 줍니다.
- 흔들림 크기
- 당겨졌을 때 허용되는 변형 범위를 바꿉니다. 대상의 윤곽이 무너지면 낮춰서 비교하세요.
- 탄력
- 스프링의 진동 빈도에 영향을 줍니다. 큰 값에서는 더 빠르고 팽팽하게 되돌아오는 느낌을 시험할 수 있습니다.
- 진정되는 속도
- 움직임이 잦아드는 정도를 조절합니다. 값이 높을수록 잔진동이 빨리 줄어듭니다.
- 가장자리 부드러움
- 선택 영역의 경계에서 변형이 약해지는 분포를 바꿉니다. 배경과 연결되는 부분을 보면서 조절하세요.
- 마우스 영향
- 포인터 입력이 영역의 움직임에 미치는 정도를 조절합니다. 작은 손동작에도 반응이 과하면 낮춰 보세요.
5. 세 가지 작은 연습으로 결과 읽기
다음 예제는 고정된 정답이나 자동 프리셋이 아닙니다. 이미지의 비율과 영역 크기에 따라 결과가 달라지므로, 매번 기본값에서 출발해 적은 양씩 바꾸는 연습입니다.
둥근 스티커: 작은 반동
직접 그린 원형 스티커 중앙에 타원을 만드세요. 배경이나 바깥 테두리가 과하게 따라오면 영역을 줄입니다. 같은 방향으로 짧게 당기고 흔들림 크기를 낮춰 비교하세요. 마지막으로 진정되는 속도를 높여, 짧게 튀었다가 멈추는 차이를 관찰합니다.
잎 모양: 길이 방향에 맞춘 선택
직접 만든 잎 그림을 긴 타원으로 감싸고 우클릭 드래그로 잎 방향에 맞춥니다. 줄기 가까운 경계가 어색하면 영역을 다시 배치하고 흔들림 크기를 줄입니다. 자유곡선으로 같은 잎을 선택해 보면서, 영역 모양이 주변 픽셀에 미치는 차이를 비교하세요.
쌍으로 놓인 장식: 대칭과 독립 반응
왼쪽 장식에 작은 영역을 만든 뒤 좌우 복제로 오른쪽에 복사합니다. 각 영역이 대상을 덮는지 따로 확인하고 한쪽씩 당깁니다. 두 영역은 하나의 뼈대에 연결된 것이 아니므로, 실제 관절이나 물체 충돌처럼 동작할 것으로 기대하지 마세요.
6. 움직이지 않거나 경계가 어색할 때
움직이지 않으면 이미지 로드 → 영역 생성 → 움직임 미리보기의 순서가 완료됐는지 먼저 확인하세요. 선택 영역 바깥은 직접 당기는 대상이 아닙니다. 터치 기기에서는 캔버스 위의 ‘페이지 스크롤 / 캔버스 조작’ 전환 상태도 확인합니다. 마우스 우클릭 회전은 마우스 입력용 조작입니다.
경계가 찢어져 보이거나 배경 직선이 휘면, 먼저 당기는 거리를 줄이고 흔들림 크기를 낮추세요. 그 다음 영역이 중요한 경계를 가로지르는지 확인하고 가장자리 부드러움을 바꾸며 비교합니다. 이 도구는 2D 픽셀 변형이므로 가려진 배경을 새로 그리거나 물체를 자동으로 분리해 주지 않습니다.
미리보기가 느리면 더 작은 입력 이미지를 사용하고 영역 수를 줄여 보세요. 브라우저 메모리와 기기 성능에 따라 반응이 달라집니다. 파일이 열리지 않으면 형식과 25MB 제한을 확인하고, 지원하는 형식으로 다시 저장한 파일을 선택하세요.
7. PNG 저장과 세션 종료 전에 확인할 것
‘PNG 저장’은 누르는 순간의 한 프레임을 가이드 없이 저장합니다. 움직임 전체를 녹화한 GIF나 동영상은 생성하지 않습니다. 작업 이미지가 축소됐다면 저장되는 PNG도 작업 해상도를 기준으로 하므로, 결과물의 픽셀 크기를 확인하세요.
이미지와 영역 설정은 브라우저 메모리에서 처리되며 자동으로 프로젝트 파일에 저장되지 않습니다. 새로고침하거나 탭을 닫기 전에 필요한 프레임을 저장하세요. 다시 작업해야 한다면 원본과 설정값을 별도로 보관하세요. Elastic Canvas는 3D 리깅이나 장면 전체의 물리 시뮬레이션을 대신하지 않으며, 작은 부분의 시각적인 탄성 반응을 시험하는 데 적합합니다.