Step 2

이제 프레이머를 직접 사용해볼 거예요.

우측 상단에 있는 로그인 또는 Sign up 버튼을 눌러 계정을 만들어주세요.

Step 3

로그인 버튼을 누른 뒤, 구글 계정을 선택해서 로그인합니다.

Step 4

처음 프레이머를 사용하는 경우에는 새 계정을 만들어야 한다는 화면이 나올 거예요.

Step 5

필요한 정보를 입력하고 약관에 동의한 후 ‘Continue’를 누르면, 간단한 설문이 이어지고 자동으로 첫 프로젝트가 하나 생성됩니다.

Step 6

개인적으로는 바로 프로젝트 편집 화면으로 가기보다는 대시보드를 먼저 보는 걸 추천드려요.

Step 7

프레이머 홈페이지 오른쪽 위에 있는 아바타 아이콘을 클릭한 뒤 ‘Projects’를 선택하면, 내 프로젝트들을 한눈에 볼 수 있어요.

Step 8

방금 자동으로 만들어진 프로젝트도 여기에서 확인할 수 있습니다.

Step 9

그리고 추천드리고 싶은 설정 하나 더!

프레이머 메인 페이지 맨 아래에 보면 데스크탑 앱 다운로드 안내가 있어요.

Step 10

운영체제에 맞는 버전을 골라서 데스크탑 앱을 설치해 주세요.

Step 11

우선 설치 파일을 다운로드한 뒤,

Step 12

압축을 풀고, 맥 사용자라면 애플리케이션 폴더에 옮겨 실행하시면 됩니다.

Step 13

다시 한 번 로그인을 하고, 앱을 실행합니다.

Step 2

화면 왼쪽 위엔 현재 내가 속한 팀과 워크스페이스 정보가 보여요.

Step 3

워크스페이스는 비슷한 프로젝트들을 모아두는 공간이자 요금제 기준 단위이기도 합니다.

Step 4

필요하면 워크스페이스를 새로 만들 수도 있고, 자주 쓰는 템플릿도 여기서 관리할 수 있어요.

Step 5

야간 모드로 UI를 어둡게 바꾸는 옵션도 있고, 로그아웃도 여기서 할 수 있죠.

Step 6

왼쪽 상단엔 'Account' 메뉴가 있어요. 여기서 계정 정보를 설정할 수 있어요.

Step 7

그리고 워크스페이스 메뉴에선 멤버 관리, 플랜 설정, 권한 설정, 폰트, 로고 등 다양한 걸 조정할 수 있습니다.

Step 8

Account 메뉴 안의 워크스페이스 항목을 보면 현재 내가 속한 워크스페이스가 나타납니다.

Step 9

또한 어디서 로그인했는지, 어떤 세션이 있는지도 확인할 수 있어요.

Step 10

‘Setting’ 메뉴에서는 현재 워크스페이스에 대한 다양한 설정을 변경할 수 있습니다.

Step 11

‘Update’ 메뉴에서는 프레이머가 최근에 어떤 기능을 업데이트했는지 확인할 수 있어요.

Step 12

‘Community’ 메뉴를 클릭하면 프레이머 커뮤니티로 이동해 전 세계 사용자들과 질문이나 자료를 주고받을 수 있어요.

Step 13

커뮤니티가 꽤 활발한 편이어서, 영어가 조금 서툴더라도 부담 없이 참여하셔도 괜찮습니다.

Step 14

대시보드 아래쪽에는 프로젝트 리스트가 있어요. 내가 만든 프로젝트들을 여기서 볼 수 있죠.

Step 15

새 프로젝트를 만들고 싶다면, 오른쪽 위에 있는 ‘New Project’ 버튼을 클릭하면 됩니다.

Step 16

예를 들어, 이름을 'Test'라고 하면 그 이름으로 프로젝트가 리스트에 추가돼요.

Step 17

참고로 프레이머에선 프로젝트를 삭제하는 기능은 제공하지 않아요.

Step 18

이건 중요한 파일을 실수로 잃어버리지 않도록 하기 위한 정책이에요.

Step 19

대신 프로젝트를 대시보드에서 안 보이게 하려면 ‘Archive’ 기능을 쓰면 됩니다.

Step 20

프로젝트 옆의 메뉴 버튼을 눌러서 ‘Archive’를 선택해 주세요.

Step 21

그럼 해당 프로젝트는 워크스페이스 화면에서는 보이지 않게 됩니다.

Step 22

이후에는 왼쪽 메뉴의 ‘Archive’ 아이콘을 눌러야 이 프로젝트를 다시 확인할 수 있어요.

Step 23

프로젝트들을 폴더로 정리할 수도 있어요.

예를 들어 ‘Class Recording’이라는 폴더를 만들어볼 수도 있고요.

Step 24

프로젝트를 폴더로 이동시키고 싶다면, 메뉴 버튼을 클릭한 후 ‘Move’를 선택해서 원하는 폴더를 지정하면 돼요.

Step 2

프로젝트를 만드는 방법은 오른쪽 위의 ‘New Project’ 버튼을 클릭하는 방식 외에도,

Step 3

탭 영역에 있는 + 버튼을 누르면 새로운 프로젝트가 바로 생성돼요.

Step 4

처음엔 5가지 가이드가 뜨지만, 'Hide' 버튼을 눌러서 숨겨도 됩니다.

Step 5

프레이머의 상단에는 다양한 메뉴가 있고, 왼쪽엔 패널, 오른쪽엔 상세 설정 패널이 있어요.

Step 6

특정 레이어를 클릭하면, 오른쪽 패널에 그 레이어의 세부 정보가 나타납니다.

Step 7

중앙에 있는 캔버스는 우리가 디자인 작업을 하는 메인 공간이에요.

Step 8

자주 사용하는 도구는 하단 툴바에 항상 떠 있어서 쉽게 사용할 수 있어요.

Step 9

이제 상단 메뉴부터 자세히 볼게요.

가장 왼쪽엔 파일 관리에 관련된 메뉴들이 있어요.

Step 10

필요한 기능은 검색해서 바로 찾을 수도 있습니다.

Step 11

파일 저장, 복제, 새 페이지 만들기 같은 작업은 이 메뉴에서 자주 사용돼요.

Step 12

그 옆에는 프레이머에서 자주 쓰는 다섯 가지 도구가 있어요.

Step 13

Insert는 캔버스에 무언가를 추가하는 도구예요.

Step 14

Layout도 사실 Insert에 포함되지만, 자주 쓰이기 때문에 따로 빠져 있는 거라고 보시면 돼요.

Step 15

Text도 마찬가지로 자주 쓰이기 때문에 별도로 제공되고 있어요.

Step 16

Insert에는 페이지, 섹션, 아이콘, 인터랙티브 요소 같은 고급 구성요소가 포함되어 있어요.

Step 17

저는 특히 아이콘 패키지를 자주 사용하는 편이에요.

Step 18

CMS는 블로그처럼 반복되는 콘텐츠를 효율적으로 관리할 때 유용합니다.

Step 19

CMS는 따로 자세히 다룬 강의가 있으니 참고해 주세요.

Step 20

플러그인은 외부 데이터와 연결하거나 내부에서 그래픽 요소를 쉽게 생성할 때 사용돼요.

Step 21

피그마에서 플러그인을 써본 분이라면 비슷한 느낌이라고 보시면 됩니다.

Step 22

오른쪽 중앙에는 프로젝트 이름과 요금제 정보가 나와 있어요.

Step 23

프로젝트 이름은 클릭해서 바로 수정할 수 있고,

Step 24

어떤 폴더에 포함되어 있는지도 바꿀 수 있습니다.

Step 25

'Free' 버튼을 누르면 플랜 업그레이드 페이지로 이동해요.

Step 26

오른쪽 위에는 프로젝트에 참여 중인 사람들과 권한 상태도 확인할 수 있어요.

Step 27

지구본 아이콘을 클릭하면 다국어 웹사이트 설정도 할 수 있어요.

Step 28

기어 모양 아이콘은 사이트 전체 설정, 도메인 설정, 페이지별 설정 등을 할 수 있는 메뉴예요.

Step 29

Form, 버전 관리, 플랜 설정 등도 여기서 다뤄요.

Step 30

막대 아이콘은 방문자 통계를 보여주는 기능이에요.

Step 31

재생 아이콘은 실제 웹사이트처럼 미리보기를 제공하는 버튼입니다.

Step 32

왼쪽 상단에 있는 'Full Screen' 버튼을 누르면 좀 더 실제 웹사이트에 가까운 화면으로 확인할 수 있어요.

Step 33

'Invite' 버튼은 다른 사람을 프로젝트에 초대하는 기능이에요.

Step 34

마지막으로 ‘Publish’ 버튼을 누르면 웹사이트가 실제 URL로 전 세계에 공개됩니다.

Step 2

Pages는 말 그대로 웹사이트의 각 페이지를 관리하는 곳이에요.

예를 들어 홈 말고 'About' 페이지를 만들고 싶다면,

Step 3

플러스 버튼을 눌러서 New Page를 선택한 다음, 주소(URL)를 지정해주면 됩니다.
예: /about 이라고 입력하면 그 주소로 접근할 수 있어요.

Step 4

이렇게 만든 페이지에 어떤 콘텐츠를 넣든, 그 내용이 해당 주소에서 보이게 됩니다.

Step 5

우측 상단에 'draft'라는 표시가 보일 수 있는데,

이건 아직 외부에 공개되지 않은 임시 페이지라는 뜻이에요.

Step 6

draft 상태를 해제하고 싶으면, 메뉴를 클릭해서 draft 체크를 해제하면 됩니다.

Step 7

그렇게 하면 퍼블리시할 때 이 페이지도 함께 공개돼요.

Step 8

다음은 Layers 패널입니다.

아까 만들었던 About 페이지에 텍스트를 하나 추가해볼게요.

Step 9

'About'이라는 텍스트를 추가하면, 왼쪽 레이어 리스트에 바로 나타납니다.

Step 10

이 텍스트는 데스크탑 화면이라는 큰 틀 안에 있는 레이어 중 하나로 들어간 거예요.

Step 11

이번엔 Layout 도구를 이용해서 Frame을 하나 그려보겠습니다.

Step 12

이 Frame을 About 텍스트 위에 그리면,

Step 13

텍스트가 그 Frame 안쪽으로 들어가게 됩니다.

Step 14

레이어는 이렇게 계층 구조로 되어 있어서,

어떤 요소가 다른 요소 안에 포함될 수 있고, 같이 움직이게 돼요.

Step 15

이런 구조 덕분에 디자인을 수정하거나 편집할 때 훨씬 편리하죠.

Step 16

레이어를 숨기면, 그 안에 포함된 모든 요소도 같이 사라지는 걸 볼 수 있어요.

Step 17

마지막으로 Assets 패널입니다.

자주 사용하는 컴포넌트, 컬러, 폰트 등을 이곳에 저장해서 쉽게 꺼내 쓸 수 있어요.

Step 18

코드 스니펫이나 레이아웃 템플릿도 여기서 관리할 수 있습니다.

Step 19

이렇게 해서 좌측 패널에 대해 간단히 살펴봤고요,

Step 2

어떤 레이어를 선택하면 해당 레이어에 맞는 설정들이 우측에 활성화됩니다.

Step 3

예를 들어 Text 레이어를 선택하면,

Step 4

글자를 수정하거나 크기를 바꾸는 컨트롤이 나타나요.

Step 5

Frame 레이어를 선택하면 배경색을 바꾸는 옵션이 생기고요.

Step 6

Layout 요소 중 ‘Rows’를 선택하면,

Step 7

행 간격이나 정렬 같은 레이아웃 관련 설정들을 조정할 수 있어요.

Step 2

마우스로 오른쪽으로 갔다가 왼쪽으로 이동하면,

‘패닝(Panning)’이라고 해서 원하는 부분을 볼 수 있게 됩니다.

Step 3

트랙패드나 터치패드를 쓰신다면, 그냥 손가락으로 좌우 또는 상하 스크롤하시면 돼요.

Step 4

휠 마우스를 사용하신다면, 아래에 있는 손 모양 아이콘을 클릭해서 끌어다니는 방식으로 패닝할 수 있어요.

Step 5

요소를 선택하고 싶으면 다시 화살표 아이콘으로 바꾼 다음 클릭해주면 됩니다.

Step 6

또 하나 중요한 기능이 줌(Zoom)이죠.

트랙패드를 쓰신다면 두 손가락으로 핀치 줌 하면 돼요.

Step 7

핀치 아웃하면 줌아웃, 핀치 인 하면 줌인됩니다.

Step 8

툴바에도 줌 기능이 따로 있어서, 클릭으로 조절할 수도 있어요.

Step 2

가장 유용한 단축키는 Command + K입니다.

이걸 누르면 다양한 액션을 검색하고 바로 실행할 수 있어요.

Step 3

예를 들어 Frame을 검색하면 Frame 도구가 바로 뜹니다.

Step 4

플러그인도 여기서 검색 가능하고요,

Step 5

Layout 관련 기능들도 쉽게 찾아볼 수 있어요.

Step 6

다국어 설정이나 사이트 세팅도 검색해서 바로 이동할 수 있어요.

Step 7

기억이 잘 안 나는 기능이 있다면 Command + K로 검색해보세요.

Step 8

다음은 F 키입니다.

Frame 요소를 만들 때 사용하는 단축키예요.

Step 9

모든 요소는 Command + C로 복사하고 Command + V로 붙여넣을 수 있어요.

Step 10

Command + D를 누르면 같은 요소를 복제할 수도 있어요.

Step 11

프리뷰를 자주 보게 되는데, 단축키는 Command + P입니다.

Step 12

이걸 누르면 웹사이트 프리뷰 화면으로 바로 전환돼요.

Step 13

프리뷰 화면에서 빠져나올 때는 ESC 키를 누르면 됩니다.

Step 14

그리고 꼭 알아두면 좋은 단축키가 하나 더 있어요. 바로 Shift + A입니다.

Step 15

두 개 이상의 요소를 선택한 상태에서 Shift + A를 누르면,

Step 16

자동으로 Layout 컴포넌트로 묶여요.

Step 17

이 내용은 Layout 강의에서 다시 다룰 예정입니다.

Step 18

마지막으로 이미지나 동영상 같은 미디어 파일은

그냥 캔버스에 드래그 앤 드롭해서 추가할 수 있어요.

Step 2

‘Publish’ 버튼을 눌러서 배포하고, 자동으로 생성된 주소를 클릭해서 웹사이트를 열어봅니다.

Step 3

프리뷰에서 봤던 모습 그대로 웹사이트가 잘 나오는 걸 확인할 수 있어요.

이미지나 콘텐츠도 제대로 표시됩니다.