Bolt로 웹 앱 구축하기

9장. Bolt의 Figma 통합을 사용하여 식료품 목록 앱 빌드하기

이 작품은 AI를 사용하여 번역되었습니다. 여러분의 피드백과 의견을 환영합니다: [e-mail]

이 장에서는 인기 있는 UI 디자인 도구인 Figma와 Bol트의 통합을 통해 간단한 식료품 목록 앱을 구축하는 방법을 살펴봅니다.

요즘의 제품 개발 팀은 코드로 시작하는 경우가 거의 없습니다. 대신 Figma와 같은 디자인 도구에서 시작하여 한 줄의 JavaScript도 작성하기 전에 픽셀 단위의 완벽한 인터페이스를 제작합니다. 이 장에서는 시각적 디자인과 기능적 코드 사이의 간극을 메우는 모바일 우선 식료품 목록 애플리케이션 구축이라는 실제 프로젝트를 통해 이러한 워크플로우를 살펴봅니다.

Figma에서 간단한 인터페이스를 만드는 것으로 시작한 다음, Bolt의 통합 기능을 사용하여 정적 디자인을 작동하는 React 애플리케이션으로 변환합니다. 그 과정에서 디자인 결정이 코드 생성에 어떤 영향을 미치는지, 특정 Figma 기능이 더 깔끔한 결과물을 생성하는 이유와 가져온 인터페이스에 인터랙티비티를 계층화하는 방법을 배우게 됩니다.

디자인에서 코드로의 파이프라인 이해하기

빌드에 들어가기 전에 Bolt에서 "Import from Figma"를 클릭하면 어떤 일이 발생하는지 이해해 보겠습니다. 그 이면에는 시각적 디자인을 제작 가능한 코드로 변환하는 데 특화된 플랫폼인 Anima( )의 기술이 사용됩니다. Anima는 프레임, 타이포그래피, 간격, 가장 중요한 자동 레이아웃 설정 등 Figma 파일의 구조를 읽고 그에 해당하는 HTML, CSS, React 컴포넌트를 생성합니다.

마술처럼 느껴질 수 있지만 이것은 마술이 아닙니다. 애니마는 디자인에서 일반적인 웹 개발 패턴에 매핑되는 패턴을 찾습니다. 일정한 간격을 두고 수직으로 쌓은 프레임 세트는 플렉스박스 컨테이너가 됩니다. 비슷한 구조로 반복되는 요소는 재사용 가능한 컴포넌트가 됩니다. 텍스트 레이어는 시맨틱 HTML 요소가 됩니다. 디자인이 더 깔끔하고 구조화될수록 생성되는 코드도 더 깔끔해집니다.

디자인 환경 설정하기

이 챕터에서는 Figma 계정이 필요합니다. 무료 티어는 식료품 목록 프로젝트에 필요한 모든 것을 제공합니다 . 아직 계정을 만들지 않았다면 figma.com으로 이동하여 계정을 만드세요. 계정이 있는 동안 왼쪽의 레이어 패널, 중앙의 디자인 캔버스, 오른쪽의 속성 패널이 기본 도구가 될 인터페이스에 익숙해지도록 하세요.

이 장을 가장 빠르게 학습하려면이 책의 리포지토리( )에서 미리 만들어진 Figma 파일을 다운로드할 수 있습니다. 여기에는 앞으로 설명할 모범 사례가 이미 포함되어 있으므로 가져오기 경험이 제가 설명하는 것과 일치할 것입니다. 하지만 직접 디자인을 빌드하면 디자인 결정이 코드 생성에 어떤 영향을 미치는지에 대한 귀중한 통찰력을 얻을 수 있습니다.

프로젝트 요구 사항

다음은 식료품 목록 앱( )에서 사용자가 할 수 있는 일입니다: