이번 실습을 통해 원하는 홈페이지를 만들어보고 웹으로 배포 할 수 있다.
Table of Content
1. Framer 회원가입
•
회원가입하기
•
구글로 간편 회원가입 하기
•
구글 회원 가입 진행, 알맞는 정보 입력하여 회원 가입 완료하기
•
회원가입 후 나타나는 메인 에디터 페이지
2. 테마 찾기
•
에디터에서 직접 템플릿을 디자인하고 레이아웃을 구성하거나 Figma 등의 웹디자인 툴을 통해 디자인한 것을 삽입 할 수도 있다.
•
하지만 웹 디자인에 익숙하지 않은 사람들을 위해서는 전문가들이 틀을 잡아둔 유용한 템플릿을 활용하는 것으로 시간을 절약 할 수 있다.
•
•
템플릿들을 살펴보기 위해서 전체 목록을 살펴보기
•
“무료” 템플릿 모아서 살펴보기 및 고르기
•
원하는 템플릿 선택과 미리보기를 통해서 홈페이지가 완성된 모습을 미리 체험 할 수 있다.
•
해당 템플릿 사용을 원한다면, Use For Free 선택
•
이후 Copy 선택
•
다음 처럼 에디터에 해당 홈페이지의 구성이 복사되었다.
•
전체적인 홈페이지 동작을 유지하기 위해서는, 레이아웃을 바꾸지 말고 이미지나 텍스트만 수정하는 것을 권장한다!
◦
그렇지 않으면 동작 등 템플릿 미리보기에서 보았던 동작들에 문제가 생길 수 있음!
3. 불러온 테마를 수정해보기
•
앞서 우리는 다음처럼 원하는 테마를 에디터로 불러 올 수 있었다.
◦
하지만 해당 테마의 내용들은 디자인 개발자의 내용들이 포함되어 있으므로 우리의 콘텐츠로 채워 나가야 한다.
3-1. 문자 바꿔보기
•
2ZUP이라는 문구를 나의 포트폴리오로 문구를 바꿔보고 싶다.
◦
텍스트가 있는곳 더블클릭해서 들어가 보면, 텍스트 입력창까지 들어 갈 수 있다.
◦
내가 원하는 문구로 교체해본다. 팀명이나 프로젝트 이름을 메인에 소개하면 좋을것 같다.
◦
원하는 문구로 교체된 모습
3-2. 그림도 바꿔보기
•
사용되고 있는 그림도 우리의 프로젝트 사진이 있다면 교체해보자.
•
핵심은 홈페이지 디자이너의 동작이나 페이지 구성은 그대로 유지하면서 원하는 이미지만 교체해도 우리의 홈페이지로 재구성 할 수 있는 방법이다.
•
우선 홈페이지의 이미지들이 좌우로 슬라이드되는 부분에 나의 프로젝트 모습을 담고싶다.
•
해당 부분이 어떻게 구성되어 있는지 더블클릭하여 들어간다.
•
이 템플릿 개발자는 이렇게 5개 이미지가 슬라이드되도록 구성했다.
•
하지만 우리는 움직임은 그대로, 우리의 작품 이미지로만 교체하고 싶다.
•
왼쪽 이미지들을 눌러보니 image … 와 같은 파일을 첨부하는 곳이 보인다.
◦
해당 이미지를 내가 준비한 내프로젝트 이미지로 바꿔본다.
◦
실제 나의 이미지가 적용된걸 볼 수 있다.
◦
하나씩 왼쪽 카드의 이미지를 선택하고 이미지 부분을 내 파일을 넣어본다.
◦
하나씩 왼쪽 카드부분에 나의 이미지를 넣어보니 오른쪽 슬라이드 부분이 자동으로 바뀌는 것을 확인했다.
◦
다시 홈화면으로 이동해보니, 내 이미지들이 레이아웃에 보인다.
◦
실제로 변경된게 맞는지 실행해보자.
•
이제 자유롭게 원하는 부분을 수정하면서 원하는 작품을 홍보하거나 상품을 홍보하는 페이지를 빠르게 구성 할 수 있게 되었다.
•
필요한 자료를 넣고, 원본 테마에서 불필요한 부분은 제거해나가면 홈페이지가 제작된다.
3-3 영상도 넣어보기
•
영상도 업로드 할 수 있다. 이미지처럼 마우스로 드래그해서 넣으면 된다.
•
하지만 Framer 무료플랜에서는 업로드 최대 용량이 50mb 이기 때문에 높은 용량이면 압축하거나 각 부분별로 분할하는 것을 추천한다.
4. 홈페이지를 배포하기
•
간단한 방식으로 템플릿을 활용해서 홈페이지를 만들었지만, 미리보기만으로 우리만 보면 의미가 없다.
•
www 웹 세상으로 배포하여 모든 사람들이 볼 수 있도록 배포(Deployment)를 해야 한다.
•
실제 웹서비스를 개발하고 배포하는 것은 인터넷, 네트워크 등 지식들이 필요하여 초심자에게 어렵게 느껴질 수 있다.
•
하지만 우리가 사용하는 Framer에서는 복잡한 설정을 모두 제외하고 간단하게 우리 홈페이지를 세상에 공개 할 수 있다.
4-1. Publish
•
본인의 팀 프로젝트 홍보페이지를 잘 구성했으면, 오른쪽 위 Publish 버튼을 눌러본다.
•
그럼 다음과 같은 화면이 즉시 나타나게 된다. 여기서 저 지구본모양의 주소를 클릭하면,
•
브라우저(크롬 등등)에서 자동으로 열리게 된다. 또는 브라우저에 입력하여 접속해본다.
•
간단하게 우리가 만든 홈페이지가 이미 인터넷에서 접속할 수 있는 상태로 배포 되고 있다는 것.
•
복잡한 설정등은 Framer가 대신해주고 있어서 쉽게 배포되고 있는 것이다.
4-2. 도메인 바꿔보기
•
하지만 해당 홈페이지의 URL 주소는 생각보다 복잡하다.
•
◦
따라서 원하는 도메인으로 어느정도 바꿔줄 필요가 있다.
•
“Add Domain”을 눌러서 도메인 설정 페이지로 접근한다.
•
Custom Domain 부분에 우선 무료로 활용할 수 있는 도메인 수정을 해본다. 팀명이나 프로젝트명을 입력하면 www.teamname.framer.website 와 같은 도메인을 무료로 제공해준다.
•
이후 본인이 설정한 URL 주소로 브라우저에서 들어가본다!
•
모바일에서도 똑같이 접속 할 수 있다.
•
이처럼 최소한으로 우리가 원하는 도메인을 사용할 수 있었다.
•
완벽히 framer처럼 뒷부분까지 모두 수정하기 위해서는 유료 플랜으로 진행해야하고, 도메인 구매 등 추가적인 설정이 필요하기 때문에 우선 여기까지 진행하도록 한다.
