page icon

나만의 가상공간 제작하기

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


 

0. 피그마 가입하기


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

1. 제공 레이아웃 목록


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

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

 

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

 

■ 에셋 모음 확인하기

 
 
 

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


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

3. 레이아웃 제작하기


 

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

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

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

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

3) 나만의 레이아웃 만들기 영상 가이드

아래의 영상을 통해 에셋의 배치 방법 및 저장 방법을 확인하실 수 있습니다.
영상 타임라인
 
개체 이동시키기
개체 방향 바꾸기
개체 크기 변형
겹쳐진 개체 순서 바꾸기
글자 넣기
글자 방향 바꾸기
원하는 부분만 보이게 하기(클리핑 마스크)
완성된 이미지 저장하기
 
 

4) 그리드를 통해 회의실이 설치될 곳을 표시할 수 있습니다.

회의실이 설치될 곳을 레이아웃에 미리 설정 하였을 경우 공간을 더욱 깔끔하게 구성할 수 있습니다.
< 회의실 위치를 설정하지 않았을 경우 >
< 회의실의 위치를 설정 하였을 경우 >
 
레이아웃에 그리드를 설정하면 회의실을 설치할 위치와 사이즈를 확인할 수 있습니다.
그리드 설정하기
 
회의실 위치/크기 설정하기
 
회의실을 설치했을 때의 모습
회의실을 설치했을 때의 모습
  1. 그리드를 통해 확인하실 수 있는 80*80px 사이즈의 사각형 한 칸은 회의실 한 칸을 의미합니다.
  1. 이용 인원에 맞는 회의실의 사이즈를 미리 확인하실 수 있습니다.
    1. 위 이미지의 경우 각각 4명 회의실과 6명 회의실을 고려하여 설정되었습니다.
  1. 회의실이 될 곳에 어울리는 이미지를 배치하거나 사각형 등으로 위치를 표시하실 수 있습니다.
 
 
 

4. 가상공간에 적용하기


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