이번 실습은 테마 템플릿을 활용한 홈페이지 안의 콘텐츠까지 어떻게 연결되었고 구성할 수 있는지 확인하는 과정으로 심화단계이다.
Table of Content
1. 웹 서비스의 동작에 대해 이해하기
•
홈페이지는 우리가 보여주는 것 말고도 클릭해서 눌렀을때 동작하는 것들이 포함된다. 이 홈페이지의 예시로는 아래 사진과 같다.
•
우리는 강제로 우리 프로젝트 이미지를 넣긴했지만, 저렇게 프로젝트 메뉴로 이동하니 우리가 수정하지 못했던 부분들이 있는 것을 확인했다.
•
실제 홈페이지들의 동작은 단순히 이미지를 교체하는 정도로는 한계가 있고,
◦
이 홈페이지에 프로젝트나 프로젝트 정보, 사진 같은 것을 등록하고 홈페이지에서 보이도록 연결되어 있다. 이것을 콘텐츠 관리 시스템(Contents Management System)이 들어간 홈페이지라고 이해하면 된다.
◦
하지만 이것을 웹개발자의 경우 실제 코드로 이처럼 운영되도록 구성하지만, 초심자의 경우 코드로 적용하기 어려운 문제가 있다.
•
하지만 Framer에서는 이러한 복잡함을 간단히 페이지 구성을 통해 해결할 수 있다.
2. 홈페이지의 콘텐츠를 변경해보기
•
우리는 단순히 이미지를 교체해보기도 했지만, 프로젝트나 슬라이드 이미지 사진을 누르면 나타나는 상세 정보도 넣어주고싶어졌다.
•
Framer 에디터를 켜고 왼쪽 메뉴를 살펴본다.
•
Edit in CMS를 들어가보면 다음처럼 등록된 프로젝트들이 실제로 보이게 된다.
•
이는 우리가 처음에 이미지를 단순히 바꾸는것 보다는 실제로 이 프로젝트 관리 부분에 들어와서 이미지를 교체하고 설명을 입력하면
•
홈페이지에서 동일하게 보일 것이다.
•
실제 이미지와 제목 등으로 변경해본다.
•
실제 프로젝트 소개 내용처럼 4개의 항목만 상세 작성하고 이미지를 첨부했다.
•
불필요한 2개 데이터는 제거(템플릿 개발자의 샘플)했다.
•
이제 실제로 4개의 프로젝트가 담겨있는지, 그리고 원하는 상세 그림들도 나타나는지 미리보기로 확인해보자.
•
이제 이런 변경사항을 배포에 업데이트 해주어야 한다.
•
실제 홈페이지에서도 변경사항이 반영된 모습
3. 참고사항
•
현재까지 진행된 템플릿 사용 방법은 위 샘플 템플릿을 기준으로 진행되었다.
•
따라서 다른 템플릿의 경우 이와 다른 형태로 레이아웃, 페이지, CMS가 다른 형태로 구성되었을 수 있다.
•
다른 템플릿인 경우 안내해주는 샘플 스크린샷과 달리 원하는 메뉴가 완벽히 동일한 위치에 없을 수도 있다.
•
하지만 전체적인 홈페이지를 만들어가는 흐름은 비슷하기 때문에 비슷한 구성을 템플릿에서 찾아내서 변경하면 나만의 홈페이지를 만들 수 있다.
