본 문서는 Framer를 배우는 국내 사용자들이 한글 자료의 부족으로 겪는 어려움을 해결하고자, 공식 블로그의 내용을 한국어로 번역하고 실무에 유용한 정보를 추가했습니다. 프레이머를 사용하는 여러분께 작게나마 도움이 되길 바랍니다.

TL;DR

• 더 나은 성능: React의 효율적인 렌더링과 상태 관리 덕분에 웹사이트가 빠르게 로드되고 반응

• 더 나은 사용자 경험: 컴포넌트 기반 구조로 매끄럽고 일관된 사용자 경험을 제공

• 미래지향적 확장성: React는 현재와 미래 모두에 적합한 유연하고 지속 가능한 웹사이트 개발이 가능

오늘날의 웹이 요구하는 것?

오늘날 웹은 단순히 보기 좋은 화면을 넘어서, 끊김 없이 반응하고 몰입할 수 있는 경험을 만드는 것이 핵심입니다. 이를 위해서는 성능뿐 아니라 관리, 확장, 협업까지 고려할 수 있는 도구가 필요합니다.

인터넷 초창기의 웹사이트는 주로 정보 소비를 위해 설계된 정적인 페이지들의 집합이었습니다. 이러한 전통적인 HTML과 CSS 기반 사이트는 가볍고 성능이 뛰어났지만, 오늘날 사용자들이 기대하는 상호작용성과 동적 기능이 부족했습니다.

현대 웹은 역동적이고 인터랙티브하게 발전했으며, 웹사이트는 완전한 애플리케이션이 되었습니다. 웹사이트는 API와 통합되고, 부드럽고 효율적인 애니메이션과 전환 효과로 사용자 참여를 유도하며, 실시간 업데이트를 제공하고, 데스크톱부터 휴대폰, 태블릿까지 다양한 기기를 지원하기에까지 이르렀습니다.

전통적인 웹 개발 방식은 오늘날에도 여전히 웹 개발의 필수적인 부분입니다. 하지만 최신 도구 없이 이러한 방식을 계속 사용하,면 오늘날의 웹 애플리케이션에 필요한 복잡한 사용자 인터페이스/기능을 구축하기 어려울 수 있습니다.

바로 이 부분에서 React와 같은 도구가 도움이 됩니다. React는 Meta가 오늘날의 웹사이트 제작을 염두에 두고 개발한 오늘날 가장 인기 있는 프런트엔드 개발 라이브러리 중 하나입니다. React는 규모에 관계없이 모든 기업의 개발자가 현재 사용자 기대치를 충족하고 심지어 이를 뛰어넘기도 하는 고급 웹 애플리케이션을 개발할 수 있도록 지원하는 도구입니다.

성능과 사용자 경험 개선

웹사이트가 점점 더 많은 기능과 복잡한 UI를 담으면서, 로딩 속도 저하와 반응성 문제는 흔한 도전 과제가 되었습니다. 특히 저사양 기기나 느린 네트워크 환경에서는 성능적인 문제를 야기할 수 있습니다.

브라우저는 사용자 인터페이스를 업데이트하기 위해 “픽셀 파이프라인”이라 불리는 과정을 거칩니다. 레이아웃 계산, 요소 페인팅, 레이어 합성 과정을 포함합니다. 이 과정은 인터페이스를 변경하는 데에 필수적이지만 많은 리소스를 소모하여 메인 스레드를 차단하기도 하고, 때로는 업데이트 중 인터페이스가 응답하지 않게 되는 경우도 있습니다.

React는 이를 해결하기 위해 “Virtual DOM”이라는 개념을 도입했습니다. 이는 실제 DOM을 직접 갱신하지 않고, 메모리 상에 가상의 DOM을 두어 변경사항을 계산 후 실제 DOM에 저장하는 방식인데요.

이 프로세스를 조정(reconciliation) 이라고 하며 , React의 비교(diffing) 알고리즘을 사용하여 실제 DOM을 업데이트하는 데 필요한 최소 변경 사항을 찾습니다. 그런 다음 React는 DOM 업데이트를 일괄로 처리하고 단일적인 패스로 실행하여 업데이트 프로세스를 최적화하고, 리소스를 많이 사용하는 리플로우(reflow)와 리페인트(repaint)과정을 최소화합니다.

또한 React는 사용자 상호작용 및 기기의 렌더링 성능에 맞춰 업데이트의 우선순위를 정하는 스케줄링 메커니즘을 제공합니다. Framer는 이 메커니즘을 활용하여 사용자를 입력하는 것과 같은 중요한 업데이트에 우선순위를 부여하여, 원활하고 반응성이 뛰어난 사용자 경험을 유지합니다.

React는 완벽한 성능을 기본적으로 보장하지는 않지만, 오늘날 웹의 성능 문제를 해결하는 데 필요한 도구를 제공합니다. React는 업데이트 프로세스를 최적화하고, 사용자 상호작용의 우선순위를 정하고, Virtual DOM 및 조정과 같은 기술을 사용하여 개발자가 우수한 성능과 반응성을 유지하면서 복잡하고 인터랙티브한 웹 애플리케이션을 구축할 수 있도록 지원합니다.

컴포넌트 기반 설계

기존의 웹 개발에서는 HTML, CSS, JavaScript를 별도 파일로 작성하며, 거대한 단일 코드 파일을 만드는 경우가 많습니다. React는 컴포넌트 단위로 UI를 설계하여 다른 접근 방식을 취합니다. 컴포넌트는 캡슐화되고 재사용 가능한 UI 요소로 만들고, 이러한 여러 컴포넌트를 조합하여 복잡한 사용자 인터페이스를 구축할 수 있습니다. 이 컴포넌트는 JavaScript 함수나 클래스를 사용하여 만들어지며, 컴포넌트의 동작 방식과 표시 내용을 변경하는 입력(props)을 받도록 설계되었습니다.

이를 통해 개발자는 간단한 구성 요소로 오늘날의 복잡한 사용자 인터페이스를 체계적으로 구축할 수 있습니다. 이러한 구성 요소는 애플리케이션 전체 또는 여러 프로젝트에서, 쉽게 공유하고 재사용할 수 있기 때문에 코드 재사용성과 일관성을 향상시킵니다.

Framer는 커뮤니티에서 제작한 전문적으로 제작된 React 컴포넌트 모음을 제공하여 이러한 컴포넌트 기반 패러다임을 최대한 활용합니다. 이러한 컴포넌트를 프로젝트에 원활하게 통합하고, 특정 요구 사항에 맞게 사용하는 동시에, React 컴포넌트 기반 모델의 재사용성과 모듈성을 손쉽게 활용할 수 있습니다.

미래지향적 구조

끊임없이 변화하는 오늘날의 웹에서, React가 장점인 이유는 변화에 대응하기 쉽도록 설계되었기 때문입니다. 기존의 인터페이스 프로그래밍 방법에서는 DOM 조작 과정을 일일이 기술해야 합니다.

// index.html

<div>
  <input type="text" id="itemInput" placeholder="Enter new item" />
  <button id="addItemButton">Add Item</button>
  <ul id="itemList"></ul>
</div>

// index.js

// 1. Get the button element
const addItemButton = document.getElementById("addItemButton");

// 2. Add event listener to button element
addItemButton.addEventListener("click", {

  // 3. Get input and list elements
  const itemInput = document.getElementById("itemInput");
  const list = document.getElementById("itemList");

  // 4. Create new list item
  const listItem = document.createElement("li");

  // 5. Set inner text to value of input
  listItem.innerText = itemInput.value;

  // 6. Add list item to list
  list.appendChild(listItem);

  // 7. Set input back to empty
  itemInput.value = "";
})

하지만 React는 명령형 방식이 아닌 선언형 방식으로 인터페이스를 정의하는 프로그래밍입니다.

// itemList.jsx

import React, { useState } from "react";

function itemList() {

  // 1. Define the state
  const [items, setItems] = useState([]);
  const [newItem, setNewItem] = useState("");

  // 2. Handle button click
  function handleAddItem() {
    setItems(prevItems => [...prevItems, newItem]);
    setNewItem(""); // Clear input after adding;
  }

  // 3. Bind state and event handlers to the UI
  return (
    <div>
      <input 
          type="text"
          value={newItem}
          onChange={e => setNewItem(e.target.value)}
      />
      <button onClick={handleAddItem}>Add Item</button>
      <ul>
        {items.map((item, index) => <li key={index}>{item}</li>)}
      </ul>
    </div>
  );
}

React에서 인터페이스를 정의할 때는 “이 상태일 때 UI는 이렇게 보여야 한다”고 선언만 하면 됩니다. 이후 데이터가 변경되면 React가 정의한 컴포넌트에 맞추어 알아서 DOM을 효율적으로 갱신합니다.

이러한 선언적 접근 방식은 컴포넌트를 쉽게 공유하고 구성하여 더욱 복잡한 사용자 인터페이스를 구축할 수 있어 코드 재사용성이 향상됩니다. 개발자는 컴포넌트의 원하는 상태나 속성만 업데이트하면 되므로, 변화하는 사용자 요구와 웹 표준에 맞춰 새로운 기능을 추가하고 조정하는 것이 용이해집니다.

또한 React와 Framer는 불변성(immutability) 원칙을 따릅니다. 한 번 생성된 객체를 직접 수정하지 않고, 하위의 새로운 객체를 만들어 업데이트하는 방식입니다. 이는 UI를 예측 가능하고 안정적으로 만들어주며, 장기적인 유지보수에 유리하게 해줍니다. 이와 더불어 React는 이전 기능과의 하위 호환성을 철저히 합니다. Framer도 이와 마찬가지로 오래된 컴포넌트가 갑자기 동작하지 않는 문제 없이, 장기간 안정적인 프로젝트 운영을 가능하게 합니다.

Framer는 이를 더 발전시켜, 사용자가 캔버스에서 디자인한 요소를 자동으로 재사용 가능한 React 컴포넌트로 변환합니다. 즉, 디자이너는 코드 한 줄 작성하지 않아도 React의 모듈화된 사용자 인터페이스를 만들 수 있으며 최신 웹 기술과의 호환성을 유지할 수 있습니다. Framer로 구축된 프로젝트는 최신 웹 트렌드와 사용자 요구에 맞춰 진화하는 동시에 이전 기능과의 호환성을 유지합니다. 또한 Framer는 애플리케이션을 최신 상태로 유지하는 과정을 간소화시켜주는 데에도 적합합니다.

커뮤니티 지원

React의 또 다른 강점은 활발한 커뮤니티 생태계입니다. React는 개발자, 디자이너, 그리고 회사 모두가 React의 성장과 발전에 기여하는 광범위한 생태계를 갖추고 있습니다. 이러한 생태계를 통해 React는 웹 개발의 선두를 유지하며 최신 웹의 요구에 맞춰 끊임없이 발전하고 있습니다.

Framer는 노코드 기반이지만 React 생태계와 연결되어 있어, 커뮤니티에서 제공하는 애니메이션, API 연동, 고급 상태 관리 기능 등을 쉽게 가져다 쓸 수 있습니다. 이러한 커뮤니티 중심의 혁신 기술 중 다수는 Framer에 완벽하게 통합되어 사용자가 코딩 없이도 더욱 창의적이고 기능적인 웹사이트를 제작할 수 있도록 지원합니다. 즉, React를 배우지 않아도 React 생태계의 혜택을 누릴 수 있습니다.

React 커뮤니티의 지식과 리소스 공유 덕분에 Framer 사용자는 React를 직접 배우지 않고도 다양한 리소스를 활용할 수 있습니다. 특정 라이브러리와 도구에 대한 튜토리얼, 문서부터 모범 사례와 디자인 패턴에 이르기까지, 커뮤니티에서의 노력은 Framer 사용자가 프로젝트에서 React 생태계의 잠재력을 더 잘 이해하고 최대한 활용할 수 있도록 지원합니다.

또한 기존 Framer 디자인을 기반으로 React 개발자를 채용해 Framer 프로젝트를 확장하는 것도 가능합니다. Framer에 내장된 Monaco 코드 편집기를 사용하면, React 개발자는 자동 완성 및 IDE와 유사한 환경을 갖춘 익숙한 환경에서 웹사이트 기능을 확장할 수 있습니다.

Framer는 개인 크리에이터든 대규모 팀원이든, 여러분의 한계를 뛰어넘는 경험을 선사합니다. Framer의 노코드 방식으로 시작하여 프로젝트가 성장함에 따라 맞춤형 React 컴포넌트, 고급 로직, 최첨단 기능을 원활하게 통합하고, 확장 가능하고 유지 관리가 용이한 코드베이스를 유지할 수 있습니다. Framer는 사용자가 코딩 전문 지식 없이도 최신 웹용 웹사이트를 만들 수 있게 해줄 뿐만 아니라, 성장하고 진화할 수 있는 미래 지향적인 환경을 제공하여, 폐쇄된 생태계의 한계에 얽매이지 않고 오늘날의 최신 웹 내에서 가능한 경계를 마음껏 넓힐 수 있게 해줍니다.

결론

Framer가 React를 채택한 이유는 분명합니다. 성능, 사용자 경험, 미래지향성, 커뮤니티 이 네 가지 요소가 결합해 Framer를 단순한 노코드 툴이 아닌, 현대 웹을 위한 확장 가능한 플랫폼으로 자리매김하게 했습니다.

개발 경험이 있는 사람은 물론 비전공자라도 아이디어를 실현할 수 있으며, 필요할 경우 React 생태계와 인력을 끌어와 프로젝트를 더욱 발전시킬 수 있습니다. Framer를 선택한다는 것은 곧 React를 선택하는 것을 말합니다. 이는 단순히 지금의 프로젝트를 만드는 것을 넘어, 앞으로의 변화에도 흔들리지 않는 기반을 선택하는 것과 같습니다.

본 글은 Framer 공식 블로그의 'Why Framer uses React to build sites'를 번역·각색한 콘텐츠입니다.