피그마(Figma)에서 프레임(frame)을 PDF 파일로 내보내기(단일, 전체, 선택한 프레임)단일 프레임을 PDF 파일로 내보내기, 전체 프레임을 1개의 PDF 파일로 내보내기, 선택한 모든 프레임을 PDF 파일로 내보내기단일 프레임을 PDF 파일로 내보내기1)PDF 파일로 내보내기할 프레임(frame)을 선택합니다. 2)우측 속성 패널에서 export를 추가하고 내보내기 옵션에서 PDF를 선택한후 내보내기합니다(export) 3)해당 프레임을 PDF 파일로 내보내기한것을 확인할있습니다. 전체 프레임을 1개의 PDF 파일로 내보내기 4)좌측에서 전체 프레임 내보내기를 사용할 페이지를 선택합니다(pages) 5)좌측 상단 메인 메뉴에서 file의 export frames to PDF를 선택합니다. 6)..
피그마(Figma)에서 레이어(layer) 선택 필터링 사용하기(similayer 플러그인)similayer 플러그인을 사용하면 선택한 전체 레이어중에 원하는 속성 및 컴포넌트의 레이어만 선택할수있습니다.1)좌측 상단의 메인 메뉴에서 플러그인(plugins)의 manage plugins로 이동합니다. 2)similayer 플러그인을 검색 및 저장합니다(save) 3)페이지에서 선택할 대상 레이어들을 준비합니다. 4)전체 레이어를 선택합니다. 5)마우스 우클릭 메뉴에서 plugins의 similayer를 선택합니다. 6)좌측에서 레이어 필터링(선택 제한)에 사용할 속성을 선택 및 추가합니다. 레이어 유형에 따라서 선택 제한을 사용하려면 layer type을 추가합니다. 7)선택할 레이어 유형(layer ..
피그마(Figma)에서 페이지의 모든 이미지를 압축 및 다운로드하기tinyimage compressor 플러그인을 사용하여 페이지의 모든 이미지를 압축 및 다운로드하는 방법1)현재 페이지에서 사용중인 모든 이미지를 확인할수있습니다. 2)메인 메뉴에서 plugins의 manage plugins로 이동합니다. 3)tinyimage compressor 플러그인을 검색합니다. 4)플러그인을 저장합니다(save) 5)plugins 메뉴에서 추가한 tinyimage compressor 플러그인을 확인 및 실행합니다. 6)현재 페이지에서 내보내기 가능한 모든 레이어를 표시하는것을 확인할수있습니다. 7)상단의 downsizer를 선택하면 내보내기 가능한 모든 이미지 레이어를 표시합니다. 8)downscale 옵션에서 ..
피그마(Figma)에서 페이지의 모든 이미지 해상도 재설정하기(원본 사이즈로 복원)restore image dimensions 플러그인을 사용하여 이미지 해상도 재설정하는 방법1)현재 페이지에서 원본 사이즈로 복원할 이미지를 준비합니다. 2)이미지를 선택하면 현재 페이지에서 해당 이미지에 대해 설정한 해상도를 확인할수있습니다(Dimensions)예에서 해당 이미지는 축소한 이미지로 원본 해상도를 확인할수없습니다. 3)이미지를 1x 옵션으로 내보내기(export)하면 원본 해상도가 아닌 현재 페이지에서 설정한 이미지 해상도로 내보내기합니다(260 x 157) restore image dimensions 플러그인 설치 및 사용4)새로운 플러그인을 설치하기위해 메인 메뉴에서 plugins의 manage p..
유니티 두가지 UI 시스템 UGUI와 NGUIUGUI와 NGUI는 유니티 게임 개발에서 사용자 인터페이스(UI)를 제작하는데 사용되는 UI 시스템입니다. UGUI는 현재 유니티의 기본 GUI 시스템이고 NGUI는 대안으로 사용할수있는 서드파티 플러그인입니다. 유니티 4.6 버전 이전 4.6 버전 이전의 유니티 GUI 시스템은 매우 제한적이고 사용하기 불편한점이 많았습니다. 특히 복잡한 UI 요구사항을 가진 프로젝트에서는 큰 제약이 되었습니다(직관적이지않은 인터페이스, 한정된 기능, 유연성 부족, 성능이슈, 기타) NGUI (Next-Gen UI) 이러한 문제점을 해결하기 위해 개발된 서드파티 플러그인입니다. 유니티(4.6 버전 이전)의 GUI 시스템보다 더 많은 기능과 유연성을 제공하여 많은 유니티 ..
Game UI Database 게임 UI 데이터베이스 웹사이트 게임 인터페이스(UI/UX) 디자인에 참고할수있는 이미지 레퍼런스를 제공하는 웹사이트입니다. 1)Game UI Database 웹사이트로 이동합니다. https://www.gameuidatabase.com/index.php 2)게임 레퍼런스 이미지를 빠르고 효율적으로 검색할수있는 방법을 제공합니다. 3)우측 상단에서 참고할 게임 이름을 검색합니다. 4)검색한 게임의 타이틀(title), 세팅(settings), 모달(Modal), 텍스트(text) 기타 디자인 레퍼런스 이미지를 확인할수있습니다.
게임 에셋(3D모델, 애니메이션, 2D 리소스, GUI, 기타) 구매 웹사이트 목록 유니티 에셋 스토어(unity assetstore) https://assetstore.unity.com/ 언리얼 마켓플레이스(unrealengine marketplace) https://www.unrealengine.com/marketplace/ 마켓플레이스 - UE 마켓플레이스 언리얼 엔진 마켓플레이스에 방문하셔서 다음 프로젝트에 활용할 무료 애셋을 포함한 다양한 애셋들을 만나보세요. www.unrealengine.com game dev market https://www.gamedevmarket.net itch.io https://itch.io/ Download the latest indie games itch.io i..
유니티에서 월드 공간(world space) UI 만들기 1)씬에 canvas 오브젝트를 생성한다. 2)캔버스의 render mode를 world space로 변경한다. 3)캔버스의 해상도를 설정하고(rect transform width, height) 오브젝트의 위치와 크기를 설정한다(pos, scale) 4)스크린 공간의 캔버스와 마찬가지로 캔버스에 UI 요소를 추가한다. 5)캔버스의 하위 오브젝트에 회전값 180을 입력한다. 6)캔버스에 빌보드 스크립트를 추가한다. docs.unity3d.com/Packages/com.unity.ugui@1.0/manual/HOWTO-UIWorldSpace.html
유니티(UNITY)에서 UI 카메라 설정하기(screen sapce - camera)1)아래 예에서 단순한 씬을 구성하였다. 2)메인 카메라(main camera)의 culling mask에서 UI를 체크해제하고 depth 속성의 값을 0으로 설정하였다. 3)씬에 새로운 카메라를 추가한다. 카메라의 clear flags에서 depth only를 선택하고 culling mask에서 UI 레이어를 제외하고 체크해제한다. 4)씬에 캔버스를 생성하였다. 5)캔버스와 하위 ui 요소의 레이어를 설정한다(UI)render mode에서 screen space- camera를 선택하고 render camera에 씬에 추가한 카메라를 참조시킨다. 6)메인 카메라에서 씬의 게임 오브젝트와 스카이박스를 표시하고 두번째 카메..
