워드프레스에서 프레이머로 1 - 프레이머 톺아보기

찌든 업무와 부패한 신체 이슈로 근 1년을 잡아먹은 웹사이트 개편이 (거의)마무리되었다. 8년 정도 운영했던 워드프레스 기반의 웹사이트를 24년 1월 쯤 프레이머로 이전하는 작업을 거쳤었는데, 아무래도 프레이머라는 툴에 대한 이해도가 백지에 가까운 상태라 체력과 집중력을 그 때 다 썼구나 싶다. 어쨌거나 그 경험을 통해서 프레이머의 가능성과 한계점을 동시에 확인했고, 처음보다는 미약하게나마 넓어진 관점에서 바라보며 나의 프레이머 웹사이트 두 번째 에디션을 완료할 수 있었다. 이를 토대로 프레이머가 무엇인지, 어떤 장단이 있고 실사용에서 효율적인지에 대해 시리즈로 글을 이어가보려한다.

왜 프레이머인가요?

프레이머는 최근 가장 주목받는 노코드(No-code) 웹빌더 서비스다. 개발자의 리소스 없이도 디자인-인터랙션-퍼블리싱-SEO까지 해결할 수 있으면서, 피그마와 비슷한 워크플로우로 러닝커브를 비교적 완만하게 가져갈 수 있다는 점을 그들의 ‘킥’으로 내세우고 있다. 실제로 프레이머를 통해 토스(토스 브랜드 리소스 센터)나 리멤버(리멤버 프롤로그)와 같은 기업에서 웹사이트를 제작한 사례가 있는데, 어느 정도 규모가 있고 빠르게 돌아가는 비즈니스에서 사용했다는 점에서 프레이머의 효율성과 사용성을 인정받은 셈이다. 특히 5페이지 내외의 가벼운 웹페이지를 제작해야한다고 가정했을 때 내부에서 처리하기에는 리소스가 적잖게 들어가고, 외부에 일임하기에는 너무 작은 회색 지역이 생기기 마련이다. 아마 프레이머는 이런 부분을 우선적으로 해결하고 싶어했던 것 같다.

익숙한 인터페이스의 새로운 웹빌더

프레이머의 기본 편집 화면. 좌우측 패널의 기능에 차이가 있긴 하지만, 대부분 피그마의 그것과 닮아있다.

실제로 인터페이스를 살펴보면 디자인 중심의 레이아웃으로 구성되어있는걸 알 수 있다. 원하는 곳에 사각형을 만들거나 텍스트를 작성하는 등 어떠한 웹빌더보다 직관적으로 그려낼 수 있다. 그럼에도 아직 프레이머로 그리기가 익숙치 않다면, Figma to Framer 기능을 통해 피그마의 디자인을 그대로 가져올 수 있다.(물론 피그마에서 지정한 배리어블은 1:1로 대응되는 기능이 없어 불러올 수 없다.) 그려낸 화면은 사용자가 코드를 만지지 않아도 웹 상에 그대로 구현된다. 워드프레스에서 페이지 빌더로 하나하나 블록을 쌓고 매 번 프리뷰로 확인하던 프로세스를 겪고나니 프레이머가 너무나 친절하게 느껴졌다.

반응형 웹을 위한 기능

기본으로 제공하는 태블릿/모바일 중단점 뿐만 아니라 상황에 맞게 설정할 수 있다.

또한 웹 빌딩을 목적으로 하는 툴이다보니 반응형 구현에 대한 대비가 잘 되어있다. 데스크탑 사이즈를 기준으로 태블릿, 모바일 스크린을 손쉽게 구성할 수 있으며 상황에 따라 자유롭게 Breakpoint를 설정할 수 있다. 다만 우측 패널의 Position이나 Styles 등과 같은 항목들은 툴의 기능이라기보다 HTML과 CSS 속성을 그대로 지정하는 것에 가까워서, 어느 정도 관련 지식을 알아두는게 맘편하다. (특히 오토 레이아웃 같은 기능을 사용할 때는 CSS의 Flex나 Grid 속성을 알아두는게 도움이 될 것이다.)

잊지않은 근본, 인터랙션

프레이머의 컴포넌트 화면. normal/hover/press 등의 state와 trigger, animation 등을 설정할 수 있다.

무엇보다 프레이머가 인터랙션 툴로 시작을 했던 전적 덕분인지 실제로 구현되는 애니메이션 적용이 매우 수월하다. CSS단에서 기본으로 처리할 수 있는 영역부터 js 영역까지 코드없이도 그럴듯한 움직임을 웹사이트에 그려낼 수 있다. 물론 상황에 따라서는 외부 라이브러리를 불러오거나 직접 코드를 짜야하는 경우도 있지만 그마저도 웬만해선 컴포넌트 복붙으로 해결이 가능하다.

웹사이트의 원동력, CMS

프레이머의 CMS는 각 필드를 입맛에 맞게 조정할 수 있는 자유도를 갖추고 있다.

CMS 기능도 지속적으로 업데이트되며 꽤나 강력한 기능을 갖추게 되었다. 초기에는 글만 쓸 수 있는 수준의 한없이 가벼운 기능이었지만 최근에는 커스텀 필드로 원하는 데이터를 입맛에 맞게 구성하여 컨텐츠를 템플릿화 할 수 있게 발전하고있다. 여기서 만든 커스텀 필드는 페이지에서도 어떤 항목을 표시하고 숨길지 디자인과 레이아웃을 자유롭게 구성할 수 있다.

검색 유입을 위한 SEO

SEO 역시 기본 기능으로 충실히 지원하는 것을 볼 수 있다. 각 페이지 별로 OG(오픈그래프) 태그를 코드 형태로 작성할 필요없이 간편하게 설정할 수 있다. 지원하는 OG 태그는 크게 네 가지다.

• og:title: 웹페이지의 제목

• og:description: 웹페이지의 설명

• og:image: 웹페이지의 이미지(소셜 공유 시 썸네일)

• og:url: 웹페이지의 URL(프레이머에서는 슬러그로 설정한다.)

가장 쉬운 게시 과정

디자인을 마치고 실제 웹으로 게시하는 과정도 꽤나 간소화 되어있다. 파일을 저장하듯 우상단의 Publish 버튼을 누르기만 하면 별도 작업없이도 https가 적용된 웹사이트가 생성된다. 이때 무작위 단어로 배열된 URL을 부여받게 되는데, 원한다면 보유하고있는 도메인을 연결할 수도 있다. 이 경우에는 도메인 관리 사이트에서 2개의 A 레코드와 CNAME 레코드 하나만 생성하면 된다. 다만 국내 도메인 서비스는 조금 막힐 수 있는게, 특히 카페24는 다중 A 레코드를 지원하지 않아 약간의 편법이 필요하다. 프레이머는 루트 도메인에 대한 A 레코드 2개를 요구하는데, 카페24에서 과감히 A 레코드 1개와 CNAME까지만 생성하고 기다리면 웹사이트에 정상적으로 접속이 가능해진다. 프레이머에 노란 Invalid DNS 알림이 거슬리겠지만 모로가도 서울만 가면 장땡 아니겠는가. 아마 요구하는 A 레코드 중 하나는 오류를 대비한 예비 IP인 것으로 보인다.

되는데요, 안됩니다

웹사이트 개설에 필요한 기능들 위주로 편의성을 극대화한 프레이머지만, 다른 서비스와 같이 한계점 역시 존재한다. 노코드 웹빌더라고는 하지만 웹사이트의 복잡도가 올라가거나 특수한 기능이 필요할 경우 결국에는 코드를 만져야하는 상황이 온다. 일례로 워드프레스 시절엔 잘 쓰던 이미지 캡션 기능을 전혀 지원하지 않아서, 울며 겨자먹기로 이미지 바로 밑에 inline-code 스타일로 캡션을 작성한 다음 해당 케이스에서는 캡션처럼 보이도록 CSS를 추가해두었다. 또 프레임을 업로드하는 이미지의 종횡비에 맞추는 방법이 없어 tsx로 이루어진 코드 컴포넌트를 써야한다. 말고도 여러 가지가 있지만, 잘 찾아보면 ‘이게 왜 안돼?’하는 것들이 은근하다.

그럼에도 프레이머 공식 커뮤니티가 매우 활성화 되어있고 공홈의 튜토리얼도 상당히 상세한 편이라 영어의 압박을 버텨낼 수 있다면 대부분의 문제 상황에 대응할 수 있을 것이다. 정보가 비교적 적은 편이긴 하지만 한국어 커뮤니티도 존재한다. 이외에 참고할 만한 프레이머 관련 사이트들을 함께 모아두었으니 도움이 되면 좋겠다.

• Framer Academy: 프레이머 공식 튜토리얼

• Framer Community: 프레이머 공식 커뮤니티

• 프레이머 코리아: 한국 프레이머 사용자 단체톡

• Framer University: 프레이머 무료 강의와 리소스 사이트(Nandi는 신이야)

• SegmentUI: 각종 UI 에셋을 구매할 수 있는 사이트

• Eleveight Supply: 유료 컴포넌트 사이트

늘 개선하고 싶어하는 성향이라면

프레이머는 번거롭게 느껴졌던 웹사이트 제작 프로세스를 몇 단계나 간소화할 수 있는 강력한 웹빌더다. 극단적인 예로 템플릿을 활용하면 ‘퍼블리싱까지 72시간 챌린지’도 가능하지 않을까. 비교적 적은 리소스로도 수준 높은 웹사이트를 배포할 수 있으며 유지보수도 손쉽게 가능하기 때문에, 호흡이 빠른 비즈니스 분야에서도 활용도가 높다. 무엇보다 사용자들이 반길만한 업데이트 빈도가 높은 편이라 계속 발전해나가는 모습이 호기심을 자극하기도 한다. 물론 기능의 부재나 알 수 없는 버그가 발생하는 등 때때로 완벽하진 않지만 언젠간 해결될 것이라는 신뢰가 프레이머를 깊이 오래 사용하는 이유가 될 것 같다. 첫 글이니만큼 프레이머의 특징이나 장단점을 간단하게 훑어보았는데, 다음 글에서는 몇 가지 사용 사례나 소소한 팁 위주로 써보려고한다. 새로운 뉴비는 언제나 환영이므로 고민중이라면 일단 웹사이트 하나 만들어보길.