단조로운 이미지만으로는 부족할 때 간단하게 웹으로 GIF 만드는 법에 대해 공유해 드리려 합니다.
Phase
app.phase.com
이 Phase라는 솔루션도 피그마처럼 유료와 무료가 나뉘어 있습니다.
또한, 피그마처럼 웹으로 작업을 진행할 수 있습니다.
간단하게 사용하신다면 무료 플랜으로도 충분하니 아래 사용법을 통해 GIF를 만들어 보시기를 바랍니다.
우선 Phase 웹에 들어갑니다.
회원가입 진행 후 화면에 들어가면 아래와 같습니다.
우측에 있는 파란색 "+ New" 버튼을 클릭하여 새로운 토대(도화지)를 생성합니다.
우선은 간단하게 도형을 그리는 법과, 이미지를 추가하는 방법을 배워보겠습니다.
대부분의 단축키는 피그마와 비슷합니다.
- r: 사각형 도형
- o: 둥근 도형
- p: 곡선
- t: 텍스트 박스
- n: 컨테이너 만들기
- h: 마우스로 판 움직이기
- v: 선택 마우스로 변경
- a: action 활성화 (애니메이션)
- c: 코멘트 달기
- ctrl + [, ctrl + ]: 레이어 순서 옮기기
복사, 붙여넣기, 자르기 같은 기본 윈도우 단축키도 전부 적용됩니다.
무엇보다 이미지를 복사해서 바로 붙여 넣을 수 있다는 부분이 무척 편리합니다.
이제 Phase의 꽃인 애니메이션에 대해서 알아보겠습니다.
a 키나 하단의 "New Action" 버튼을 클릭해서 액션을 활성화합니다.
그럼 위처럼 타임라인이 생기게 됩니다.
타임라인 부분은 크게 3등분으로 나눌 수 있습니다.
- 좌측은 최대 시간과 움직이는 컨텐츠의 이름을 확인할 수 있습니다.
- 중간은 타임라인입니다.
길어지면 shift + 스크롤로 좌우로 움직일 수 있습니다.
위에서 아래로 쌓이는 애니메이션을 확인할 수 있습니다. - 우측은 easing입니다.
일정한 시간으로 움직일지, 천천히 시작했다가 빠르게 흐르게 할 것인지 정할 수 있습니다.
애니메이션을 만드는 방법은 간단합니다.
순서대로 예시를 설명해 보겠습니다.
- r 키로 사각형 도형을 만듭니다.
- 타임라인을 0초에 둡니다.
타임라인은 클릭으로 움직일 수 있습니다. - 생성한 사각형 도형을 클릭합니다.
- 타임라인을 1초로 이동합니다.
- 도형을 마우스로 이동합니다.
- 타임라인 위에 있는 플레이 버튼을 클릭하여 움직이는 애니메이션을 관찰합니다.
혹은 스페이스 바를 통해 play/stop을 할 수 있습니다. - 필요시 우측의 easing을 걸어 시간이 흐르는 효과를 설정합니다.
그럼 이제 애니메이션을 관찰하실 수 있습니다.
애니메이션은 이게 다입니다.
그리고 이쁜 GIF는 극한의 노가다가 필요합니다.
이제 남은 건 시행착오를 거치며 이쁜 GIF를 만드는 것입니다.
디자인 센스와 지식이 있다면 더할 나위 없겠지요.
그러나 디자인을 잘 몰라도 노가다는 대부분의 디자인을 가능케 합니다.
피그마를 조금 만지셨던 분들은 컨텐츠 클릭 후의 맨 우측 인터페이스가 낯설지 않을 것입니다.
보이는 대로 컨텐츠의 사이즈, 각도, 색상, 투명도, 폰트 등을 설정할 수 있습니다.
설령 처음 접하신다 해도 쉬운 인터페이스와 어렵지 않은 영단어이기 때문에 금방 익숙해지실 수 있을 겁니다.
GIF를 다 만들었으면, 이제 우측 상단의 "Export" 버튼을 클릭하여 생성한 GIF를 추출할 수 있습니다.
보이는 것처럼 속도, 프레임, Format 등을 설정할 수 있습니다.
대부분은 간단한 설정이지만, Format 부분만 짚고 넘어가겠습니다.
GIF, MP4는 익숙하지만, Lottie와 dotLottie는 잘 감이 오지 않습니다.
Lottie와 dotLottie는 코드로 GIF를 삽입할 수 있는 확장자입니다.
각 확장자 별로 아래와 같은 특징이 있습니다.
사용법이 담긴 코드도 적어보겠습니다.
Lottie:
- 간단한 사용법
- 높은 호환성
<script src="https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.12.0/lottie.min.js"></script>
<div id="lottie-container" style="width:300px;height:300px;"></div>
<script>
lottie.loadAnimation({
container: document.getElementById('lottie-container'),
renderer: 'svg',
loop: true,
autoplay: true,
path: 'animation.json' // Phase에서 추출한 Lottie JSON 경로
});
</script>
dotLottie:
- 압축형
- 빠른 로딩
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<lottie-player
src="animation.lottie"
background="transparent"
speed="1"
style="width: 300px; height: 300px;"
loop
autoplay>
</lottie-player>
오늘은 간단하게 Phase 사용법을 익혀보았습니다.
간단하게만 짚고 넘어갔지만, 실제로 사용해 보시면 어렵지 않다고 느끼실 터이니 GIF가 필요하실 때 사용해 보시면 좋겠습니다.
그럼 오늘도 모두 좋은 하루 보내세요.