안녕하세요! 오늘은 프레이머(Framer)를 이용해 블로그를 만드는 과정을 자세히 알려드릴게요. 프레이머는 단순한 웹사이트 빌더와는 달리 디자인, 프로토타입, 그리고 웹 개발까지 아우를 수 있는 도구로, 깔끔하고 반응형 웹사이트를 쉽게 만들 수 있다는 장점이 있어요.
이 글에서는 프레이머의 CMS 기능을 활용해 블로그를 구축하는 방법을 단계별로 설명합니다. CMS를 처음 다루시거나 프레이머를 아직 익숙하지 않게 느끼신다면 걱정하지 마세요. 하나하나 따라 하시면 어렵지 않게 블로그를 만들 수 있습니다.
2025. 1. 12.
피그마 l Figma
프레이머(Framer) 실무 초급 : 프레이머로 블로그 만들기
프레이머로 블로그를 만들어야 하는 이유
시각적인 작업에 최적화
프레이머는 코드 없이도 블록처럼 디자인 요소를 쌓아가며 원하는 스타일의 웹사이트를 만들 수 있습니다. 디자이너라면 특히 편하게 사용할 수 있는 플랫폼입니다.콘텐츠 관리 시스템(CMS) 지원
블로그는 콘텐츠가 계속 추가되는 구조라 CMS를 사용하는 것이 효율적입니다. 프레이머의 CMS를 활용하면 블로그 글을 간편하게 업데이트하고 관리할 수 있어요.반응형 디자인
프레이머는 다양한 화면 크기에 맞춰 레이아웃을 조정하는 중단점(Breakpoint) 기능을 제공해 모바일, 태블릿, 데스크톱 등 모든 기기에서 보기 좋은 디자인을 구현할 수 있습니다.SEO 친화적인 웹사이트 제작
프레이머는 검색 엔진 최적화(SEO) 요소를 기본적으로 지원하여, 블로그 글이 더 많은 사람들에게 노출될 가능성을 높여줍니다.
프레이머에서 블로그 만드는 방법
1. 블로그 페이지 만들기
새 페이지 추가
프레이머 관리자 화면에서 페이지 추가 버튼을 클릭합니다. 새로 만들어진 페이지의 이름을 "Blog" 또는 원하는 이름으로 변경합니다.탐색 바(Navigation Bar)와 푸터(Footer) 추가
블로그 페이지에 탐색 바와 푸터를 추가합니다.탐색 바와 푸터는 기존 웹사이트와 스타일을 일치시키는 것이 중요합니다.
자산 패널에서 드래그 앤 드롭으로 간단히 추가할 수 있습니다.
페이지 높이 조정
블로그 페이지의 높이를 **Fit Content(콘텐츠에 맞춤)**로 설정합니다. 이렇게 하면 페이지가 블로그 콘텐츠 크기에 따라 유동적으로 변합니다.
2. 블로그 콘텐츠를 위한 레이아웃 구성
프레임 추가하기
탐색 바와 푸터 사이에 콘텐츠를 담을 공간을 만들기 위해 **프레임(Frame)**을 추가합니다.캔버스에서 빈 공간을 클릭하고 프레임을 드래그하여 적당한 크기로 만드세요.
프레임은 블로그 글이 들어가는 기본 구조가 됩니다.
프레임 내부 구조 정리하기
내부 프레임을 추가해 글 목록, 썸네일 이미지, 제목, 날짜 등을 배치할 공간을 만듭니다.블로그 글이 반복되는 구조라면 CMS 컬렉션(List) 기능을 활용해 콘텐츠를 자동으로 정렬할 수 있습니다.
반응형 디자인 적용하기
다양한 화면 크기에 맞는 디자인을 만들기 위해 **중단점(Breakpoint)**을 추가합니다.예를 들어, 모바일 화면에서는 썸네일 크기를 줄이고 글 목록이 한 줄씩 나열되도록 설정하세요.
3. CMS 데이터 연결하기
CMS 컬렉션 만들기
블로그에 글을 추가하기 위해 CMS 컬렉션을 생성합니다. CMS 컬렉션은 블로그 글의 데이터(제목, 이미지, 내용 등)를 저장하고 보여주는 역할을 합니다.CMS 필드 정의
CMS 필드를 정의해 데이터를 관리합니다.필드 예시:
제목(Title): 블로그 글 제목
썸네일 이미지(Thumbnail): 대표 이미지
내용(Content): 블로그 본문
날짜(Date): 글이 작성된 날짜
CMS와 프레임 연결하기
블로그 디자인에 사용한 각 요소(제목, 이미지, 내용 등)를 CMS 컬렉션 필드와 연결합니다.예: 제목 텍스트는 CMS의 "제목" 필드와 연결, 썸네일은 "이미지" 필드와 연결.
4. 디자인 세부 조정
탐색 바와 푸터 스타일링
블로그 페이지에 추가된 탐색 바와 푸터가 다른 페이지와 통일성을 갖도록 스타일을 조정합니다.색상, 크기, 위치를 조정해 사용자 경험을 방해하지 않도록 만드세요.
블로그 글 레이아웃 개선
글 목록이 보기 좋게 배치되도록 간격, 글꼴 크기, 색상을 조정합니다.예: 모바일 화면에서는 텍스트 크기를 줄이고 썸네일 이미지를 줄이는 방식으로 최적화.
카드 디자인 활용
블로그 글 목록을 카드 형태로 디자인하면, 가독성과 시각적 매력을 높일 수 있습니다.
5. 블로그 페이지 게시 및 테스트
게시(Publish) 버튼 클릭
블로그 페이지 디자인을 완료한 후, 게시 버튼을 눌러 사이트를 업데이트합니다.테스트 및 피드백
새로 게시된 블로그 페이지를 직접 확인하며 가독성, 레이아웃, 반응형 디자인 등이 제대로 작동하는지 테스트하세요.다양한 디바이스(모바일, 태블릿, 데스크톱)에서 확인하는 것도 잊지 마세요.
프레이머 블로그 활용 아이디어
브랜드와 고객의 소통 창구
블로그는 브랜드의 이야기를 고객에게 전달하는 좋은 수단입니다.
예: 커피 프랜차이즈라면 새로운 메뉴 개발 과정, 가맹점 성공 스토리, 고객 이벤트 등을 소개할 수 있습니다.SEO를 통한 트래픽 유입
블로그 글마다 적절한 키워드를 추가하고, 제목과 메타 설명을 최적화하여 검색 엔진에서 더 많은 사람들에게 노출될 수 있습니다.
프레이머로 블로그를 만드는 과정은 처음에는 약간 복잡해 보일 수 있지만, 한번 익히고 나면 의외로 쉽고 재미있게 작업할 수 있습니다. 이 가이드를 참고해서 여러분만의 블로그를 만들어보세요. 블로그는 단순히 글을 올리는 공간이 아니라, 브랜드를 알리고 고객과 소통하는 중요한 도구가 될 거예요.
궁금한 점이 있으면 언제든 알려주세요! 함께 고민하고 해결해 드리겠습니다. 😊
