page icon

나만의 가상공간 제작하기

Created
2022/8/19 9:31
🧐
포토샵? 일러스트레이터? 써본 적도 없고 가상공간 디자인이 너무 어렵게 느껴지신다고요?
오비스에서는 피그마를 통해 기본적인 에셋을 배치해서 나만의 가상공간을 디자인하실 수 있습니다.
필요한 건 내가 사용할 공간을 직접 디자인 하겠다는 의지와 열정! 그리고 가이드 뿐!


 

0. 피그마 가입하기


오비스의 기본 레이아웃을 Figma 툴을 활용하여 편집하실 수 있습니다.
피그마를 사용해보신 적이 없다면 먼저 아래 페이지를 통해 회원가입을 진행해주세요.
 
 
 

1. 제공 레이아웃 목록


🎁
아래 목록에서 오비스에서 제공하는 레이아웃들을 확인하실 수 있습니다.

■ 목적 별 레이아웃 확인하기

 

■ 사이즈 별 레이아웃 확인하기

 

■ 에셋 모음 확인하기

 
 
 

2. 마음에 드는 레이아웃 선택하기


 
마음에 드는 레이아웃을 발견 하셨다면 클릭해주세요. 해당 레이아웃 페이지가 팝업 됩니다.
상단 두 번째 줄에 위치한 ▼ URL: CLICK 을 클릭하면 레이아웃을 수정 및 재배열 하실 수 있는 창으로 이동합니다.
 
 
페이지 하단에서는 각 레이아웃의 원본 이미지를 확인하실 수 있습니다.
원본의 사용을 원하신다면 각 이미지에 상단에 위치한 ▼ URL: CLICK 을 클릭하여 원본을 다운로드 받으실 수 있습니다.
 
 
 
 

3. 레이아웃 제작하기


 

1) Get a copy 버튼을 클릭해주세요.

버튼을 클릭하면 자신의 피그마 라이브러리로 해당 레이아웃 페이지가 복사되어 편집이 가능해집니다.
 
 

2) 공간 사이즈에 맞는 레이아웃을 선택합니다.

각 레이아웃의 대표 이미지 우측 상단에는 제작 가능 사이즈가 표시되어 있습니다.
좌측의 LayersPages 항목에서 원하는 사이즈의 페이지를 선택해주세요.
 
 
  • Guide : 가장 첫 페이지이며 대표 이미지와 각 언어별 간편 가이드를 확인하실 수 있습니다.
  • 각 페이지의 이름은 아래과 같은 의미로 조합되어 있습니다.
    • [ ] 부분은 레이아웃의 품번을 의미합니다.
    • A : Basic 사이즈 공간에 맞는 레이아웃입니다.
      • B : Standard 사이즈 공간에 맞는 레이아웃입니다.
        C : Organization 사이즈 공간에 맞는 레이아웃입니다.
  • 세로형 공간 / 가로형 공간으로 배치가 나뉠 경우 각각 다른 페이지로 분리되어 있습니다. [ex. 03, 04번 레이아웃]
 
 

3) 나만의 레이아웃 만들기

아래의 영상을 통해 에셋의 배치 방법 및 저장 방법을 확인하실 수 있습니다.
영상 타임라인
 
[00:53] 개체 이동시키기
[01:54] 개체 방향 바꾸기
[02:26] 개체 크기 변형
[02:49] 겹쳐진 개체 순서 바꾸기
[03:13] 글자 넣기
[04:11] 글자 방향 바꾸기
[05:15] 원하는 부분만 보이게 하기(클리핑 마스크)
[06:55] 완성된 이미지 저장하기
 
 
 

4. 가상공간에 적용하기


 
  1. 워크스페이스 설정공간 관련 설정으로 입장합니다.
  1. 레이아웃 문구 아래의 레이아웃 업데이트 버튼을 클릭합니다.
  1. 저장한 레이아웃을 선택하여 업로드한 후 상단의 저장 버튼을 눌러 저장합니다.
  1. 설정 페이지를 닫으면 변경된 레이아웃을 확인하실 수 있습니다.