클레이(Clay) 아이폰 목업, 이렇게 간단하다니!
[아주 간단한 아이폰 클레이 목업 만드는 방법]
자! 집중하이소!
Figma 홈페이지 접속
에 'figma' 혹은 '피그마'로 검색하시고 홈페이지에 들어갑니다.
Figma는 무료로 사용 가능합니다. 구글 로그인하시면 됩니다.
로그인을 하셨다면 아래 이미지처럼 새로운 디자인 파일을 만들어 주세요.
출처 : Figma
Untitled 제목의 빈 공간이 생성되었다면 잘 하신겁니다.
출처 : Figma
플러그인 설치, Clay Mockups 3D
이제 자동으로 아이폰 클레이 목업을 생성해 주는 플러그인을 설치해야 합니다.
플러그인은 한글, PPT, 지뢰찾기 처럼 실행 프로그램이라고 이해하시면 됩니다.
아래의 ① ~ ④번 순서대로 진행하시면 플러그인을 설치하실 수 있습니다.
파란색 Run 을 클릭하시면 설치 + 실행이 됩니다.
출처 : Figma
앞으로 플러그인은 사용하려면 ①~②번을 통해 들어가셔야 함을 기억하이소!
Run을 클릭하면 아래와 같은 화면이 등장합니다.
출처 : Figma 내 Clay Mockups 3D 플러그인
① 디바이스 모델 선택 (Device Model)
- [jd
- [jd
아이폰 11, 아이패드, 맥북프로 등 총 8개의 디바이스를 선택할 수 있습니다.
- [jd
아이폰 11, 아이패드, 맥북프로 등 총 8개의 디바이스를 선택할 수 있습니다.
아이폰 11, 아이패드, 맥북프로 등 총 8개의 디바이스를 선택할 수 있습니다.
② 각도 설정 (Angle Preset)
- [jd
- [jd
정면, 좌측, 우측 원하는 각도를 설정할 수 있습니다.
- [jd
정면, 좌측, 우측 원하는 각도를 설정할 수 있습니다.
정면, 좌측, 우측 원하는 각도를 설정할 수 있습니다.
③ 장치 회전 (Device Rotation/Camera Rotation)
- [jd
- [jd
숫자를 입력하면 왼쪽 아이폰 목업의 회전각도가 변합니다.
- [jd
숫자를 입력하면 왼쪽 아이폰 목업의 회전각도가 변합니다.
숫자를 입력하면 왼쪽 아이폰 목업의 회전각도가 변합니다.
- [jd
혹은 왼쪽 아이폰 목업 이미지를 드래그하며 회전 각도를 변경할 수 있습니다.
혹은 왼쪽 아이폰 목업 이미지를 드래그하며 회전 각도를 변경할 수 있습니다.
④ 기기 색상 (Device Color)
- [jd
- [jd
원하는 색상코드를 입력하거나 선택하여 변경할 수 있습니다.
- [jd
원하는 색상코드를 입력하거나 선택하여 변경할 수 있습니다.
원하는 색상코드를 입력하거나 선택하여 변경할 수 있습니다.
- [jd
흰색 추천!
흰색 추천!
이미지 삽입
플러그인의 기능을 알아보았으니 본격적으로 이미지를 넣고 추출해 봅시다잉.
아이폰 목업 이미지를 보면 Select a layer 375x812라고 적혀있습니다.
저 이미지에 들어갈 화면을 만들어야 합니다.
출처 : Figma 내 Clay Mockups 3D 플러그인
우측 하단에 'Create Empty Frame'을 클릭하시면 iPhone 11 Frame이라는 종이가 생성됩니다.
저 종이에다가 모바일 앱 화면을 넣어주면 됩니다.
저는 메인화면으로 넣어보겠습니다.
출처 : Figma 내 Clay Mockups 3D 플러그인
iPhone 11 Frame이라는 종이에 메인 화면을 캡쳐해서 넣고
iPhone 11 Frame 이름을 클릭해주었더니
왼쪽 아이폰 클레이 목업에서 화면이 뜨는 것을 확인할 수 있습니다.
이제 추출해 봅시다!
우측 하단 파란색 버튼 'Save as Image' 클릭!
출처 : Figma 내 Clay Mockups 3D 플러그인
3D 목업이 완성되었습니다. ???
이미지로 추출하기
우리가 목업 이미지를 이미지 파일로 저장해야 PPT, Adobe XD, 포토샵 등에서 사용할 수 있겠죠?
출처 : Figma 내 Clay Mockups 3D 플러그인
피그마 우측 메뉴에서 Export의 +버튼을 누르면 추출 버튼이 나옵니다.
1x는 해상도를 의미하고 숫자가 높을수록 고해상도, 고용량으로 추출됩니다.
PNG는 배경이 투명한 파일확장자를 의미하고, JPG/SVG/PDF로도 추출이 가능합니다.
원하는 속성으로 설정한 뒤 'Export Rectangle' 버튼을 클릭하면 추출완료입니다.
저작권 확인, License
구글에 Figma Clay Mockups 3D 라고 검색하니까 창작자의 페이지가 나옵니다.
해당 페이지에서 확인하니 'Lcense under Community Free Resource License' 라고 뜨네요.
프리 라이센스라고 하니 무료인 것 같고,,
링크가 걸려있는 Community Free Resource License로 들어가서 확인해보니
피그마 플랫폼을 사용하는 동안에는 무료라고 합니다.
이하 영문 라이센스 번역글입니다.
사실은 일반적인 라이센스 안내글에 비해 애매합니다.
사용하시되 상업적인 목적으로는 자제해 주시고, 사용 시 출처를 남기는 것을 추천드립니다.
?무료 목업 사이트 추천&사용방법
안녕하세요. uwantjdi입니다. 인스타그램에서 총 5.5만 팔로워 계정의 피드 디자인을 맡고 있는 기자이너 ...
blog.korea-iphone.com
- [jd
- [jd
- [jd