Figma와 MasterGo 입문
핵심 질문
제로부터 현대 디자인 도구를 사용하여 웹 프로토타입을 만드는 방법은?
1. 왜 프론트엔드 디자인 도구를 배워야 할까요?
시작하기 전에 한 가지 질문을 이해해야 합니다: 왜 "프론트엔드 디자인 도구"를 배워야 할까요? 어차피 HTML / CSS 코드를 직접 작성해도 페이지를 만들 수 있는데, 소프트웨어와 기술을 하나 더 배우는 것이 정말 필요할까요?
사실, 페이지를 실행하는 것과 제품을 잘 디자인하는 것은 전혀 다른 개념입니다. 코드는 브라우저에 어떻게 렌더링할지, 다른 기기에서 어떻게 실행할지에만 관심이 있습니다. 프론트엔드 디자인 도구는 정보 배분의 문제를 해결합니다. 프론트엔드 상호작용을 어떻게 배치할지, 다른 페이지 간의 이동을 어떻게 할지, 시각적 우선순위를 어떻게 분배할지 등의 문제를 다룹니다. 디자인 도구에서 캔버스를 하나 만들면, 레이아웃, 정보 계층, 상호작용 방식을 하나의 화면에서 비교하고 확인하며, 가장 적절한 표현 효과를 선택할 수 있습니다.
코드를 직접 작성하거나 AI로 완전한 프론트엔드 페이지를 생성하면, 보통 사용자 경험이 좋지 않습니다. 체계적인 제품은 사용자와 프론트엔드 상호작용의 편의성, 그리고 다른 페이지가 전달하고자 하는 콘텐츠 분포를 고려하여, 사용자 관점에서 먼저 프론트엔드 페이지 배치를 진행한 다음 코드 변환 또는 생성을 수행합니다.
또한 팀 협업 측면에서, 프론트엔드 디자인 도구는 여러 당사자 간의 협업 비용을 낮춰줍니다. 디자이너, 제품 매니저, 개발자가 더 이상 각자 머릿속의 이미지나 추상적인 코드 설명을 바라보는 것이 아니라, 다자간 협업을 지원하여 모두가 시각적이고, 주석을 달 수 있으며, 반복 가능한 캔버스를 중심으로 버전 관리, 요구사항 변경, 피드백 의견을 논의할 수 있습니다. 나아가, 현대 프론트엔드 디자인 도구 자체는 더 이상 그림 그리는 소프트웨어가 아니며, 원클릭으로 코드의 일부를 생성하고, 디자인 시스템과 컴포넌트 라이브러리를 관리할 수 있습니다. 새로운 시대의 디자인 도구는 대량의 반복적인 수작업(정렬, 주석, 내보내기, 스타일 변경)을 자동화하거나 일괄 처리할 수 있어, 페이지 디자인의 개발 효율성을 크게 향상시켰습니다.
1.1 프론트엔드 디자인 도구의 변천
역사적으로, 소위 프론트엔드 디자인 도구는 사실 지속적으로 진화해 온 기술입니다. 90년대 로컬 비트맵 편집 위주의 Photoshop 시대부터, 2010년 전후 Sketch가 가져온 벡터화, 컴포넌트화 워크플로우, 그리고 2016년 이후 Figma가 협업을 완전히 클라우드로 옮긴 시기까지, 디자인 팀은 개인 작업에서 점차 다자간 실시간 협업으로 발전했습니다. 2025년에 이르러, AI는 이미 이러한 도구 내부에 확실히 내장되었습니다. "한마디로 페이지 초안 생성하기"부터 "디자인 초안을 실행 가능한 프론트엔드 구조로 바로 변환하기"까지, "디자인이 곧 코드", "인간과 AI의 공동 창작"이 개념에서 실용적인 생산력이 되고 있습니다.
본 장에서는 가장 대표적인 두 가지 현대 프론트엔드 디자인 도구를 소개합니다: Figma와 MasterGo입니다. 한편으로, 이들은 모두 현대 UI/UX에 필요한 핵심 역량(벡터 편집, 컴포넌트 시스템, 자동 레이아웃, 코드 전달 등)을 다루며, 와이어프레임부터 고해상도까지 개발 인수인계의 완전한 클로즈드 루프를 지원합니다. 다른 한편으로, 이 두 도구는 모두 2025년 이후 실용적인 AI 기능을 추가하여, 프로토타입을 유지하면서 디자인을 실제로 실행 가능한 프로그램으로 변환할 수 있도록 도와줍니다.
1.2 탄생 여정
현대 프론트엔드 전용 도구가 탄생하기 전, 전체 인터페이스 디자인 산업의 시각 디자인 작업은 오랫동안 Photoshop 같은 "올인원" 디자인 소프트웨어가 맡아왔습니다. 디자이너는 로컬에서 겹겹이 쌓인 레이어를 통해 페이지 전체의 시각 효과를 세밀하게 디자인하고, 최종적으로 크기가 큰 .psd 소스 파일을 프론트엔드 엔지니어에게 전달했습니다. 그리고 프론트엔드는 디자인 초안을 정확하게 재현하기 위해 세 가지 번거롭고 핵심적인 작업을 수동으로 완료해야 했습니다:
첫째, "이미지 자르기": .psd 파일의 다중 레이어 구조에서 버튼, 아이콘, 로고, 배경 모듈 등의 독립적인 시각 요소를 하나씩 분리하여 추출한 다음, PNG, JPG 등 웹에서 직접 로드할 수 있는 이미지 형식으로 내보내야 합니다 (웹은 PSD의 레이어 정보를 직접 인식할 수 없고, 이 분리된 이미지에 의존하여 세부 사항을 표시해야 합니다).
둘째, "치수 측정": 소프트웨어 자체의 측정 도구를 사용하여 각 요소의 너비와 높이, 다른 모듈 간의 간격(margin/padding) 등의 데이터를 하나씩 확인하여, 모든 치수가 픽셀 단위로 정확한지 확인해야 합니다.
셋째, "주석 추출": 디자인에서 "보이지 않지만 반드시 있어야 하는" 숨겨진 파라미터를 추출해야 합니다. 예를 들어 텍스트의 글꼴 크기, 글꼴 굵기, 줄 간격, 각 색상 블록의 RGB 또는 HEX 색상 값 등으로, 디자이너가 종이에 적지 않은 "디자인 사양"을 수동으로 "추출"하여 기록하는 것과 같습니다.
그 이후에야 프론트엔드의 구현 단계가 본격적으로 시작됩니다. 네이티브 HTML/CSS/JS를 사용하든, Vue, React 등의 프레임워크를 기반으로 하든 본질적인 과정은 동일합니다. 프론트엔드는 "컨테이너를 핵심 매체"로 삼아, 디자인의 각 모듈 계층과 의미에 따라 페이지 구조를 재구성합니다. 여기서 컨테이너란 명확한 레이아웃 경계를 가지고, 하위 요소를 특별히 담고 조직하는 단위를 의미합니다. 컨테이너는 직접적으로 구체적인 콘텐츠를 표시하지 않지만, Flex, Grid 등의 규칙을 통해 내부 요소의 배열 범위를 정합니다. 그리고 "구조 블록"(상단 내비게이션 바, 사이드바, 기사 목록 영역, 하단 푸터 등 육안으로 구분할 수 있는 기능/콘텐츠 영역)이 컨테이너에 의존하여 존재하며, 각 구조 블록 내부에는 더 작은 컨테이너가 중첩되어 요소를 조직합니다.
현대 프론트엔드 프레임워크에서, 이러한 "구조 블록(및 관련 컨테이너와 요소)"은 보통 "컴포넌트"로 구현됩니다. 컴포넌트는 간단히 말해: 명확한 경계를 가지고, 컨테이너 레이아웃과 로직을 통합한 재사용 가능한 인터페이스 단위입니다. 디자인 초안에서 반복적으로 나타나고 형태가 일치하는 부분(예: 통일된 스타일의 버튼, 반복적으로 사용되는 기사 카드)은 코드에서 컴포넌트로 추상화됩니다. 서로 다른 페이지/시나리오에서 재사용할 수 있어 반복 개발을 줄이고, 컴포넌트 내부 컨테이너의 통일된 규칙을 통해 모든 재사용 지점의 레이아웃과 스타일이 높은 일관성을 유지할 수 있습니다.
하지만 로컬 파일 중심의 모델은 본질적으로 비효율적입니다. 버전은 이메일과 클라우드 스토리지를 통해 전송되고, 신구 초안이 혼동되기 쉬우며, 디자인과 개발 사이에는 위에서 언급한 복잡한 상호작용 방법에 크게 의존하여, 협업 비용과 오류 발생 확률이 모두 높습니다.
모바일 인터넷이 부상하면서 인터페이스 복잡도와 반복 속도 요구가 빠르게 증가했고, Photoshop의 "크고 포괄적인" 특성은 점점 무거워 보였습니다. 이 시기에 Sketch가 등장했습니다. Sketch는 UI 디자인 자체에 집중하여, 시각 후처리와 관련된 대부분의 부담을 제거했습니다. Symbols를 사용하여 버튼, 내비게이션, 입력 상자 등 고빈도 재사용 요소를 컴포넌트화하여, 한 곳의 수정이 전체적으로 동기화되었습니다. Zeplin 같은 도구와 함께 사용하여 주석과 스타일 조각을 자동으로 생성했습니다. Sketch는 "컴포넌트 사고방식"을 디자인 워크플로우에 도입했습니다. 하지만 여전히 로컬 파일 기반의 데스크톱 애플리케이션이었고, 실시간 협업은 클라우드 스토리지, 서드파티 플러그인 또는 버전 관리 도구를 통해 우회해서 구현해야 했으며, "여러 사람이 동시에 같은 초안을 수정하는" 문제를 근본적으로 해결하지 못했습니다.
게임의 규칙을 정말로 바꾼 것은 Figma였습니다. 2016년부터 UI 디자인, 프로토타입 제작, 댓글 협업을 브라우저에 통합하여, 다인 실시간 커서, 온라인 댓글, 버전 타임라인, 공유 링크 등 다양한 현대 기능을 지원했습니다. 오늘날 매우 기본적으로 보이지만, 당시에는 Photoshop / Sketch 모델에 대한 정면 도전이었습니다.
이로써 인터페이스 디자인은 더 이상 각자의 컴퓨터에 흩어진 파일이 아니라, 하나의 온라인, 실시간 업데이트되는 클라우드 캔버스에 집중되었습니다. 이 캔버스를 중심으로, 더 나아가 자동화나 AI 방식으로 디자인과 프론트엔드 코드의 경계를 흐리게 할 수 있다고 상상할 수 있습니다.
처음에는 각종 플랫폼 플러그인에만 의존하여, 디자인 초안의 컴포넌트와 스타일 정보를 코드 조각(예: React/Vue 컴포넌트 골격, CSS 변수 등)으로 반자동 내보내기를 할 수 있었습니다. 그 핵심 본질은 플러그인을 통한 구조화된 정보 추출이었습니다. 이후 플랫폼 역량이 진화하면서, 대부분의 디자인 플랫폼이 대형 모델 MCP(Model Context Protocol, 모델 컨텍스트 프로토콜) 기능을 지원하기 시작했습니다. 이 프로토콜은 대형 모델이 디자인 파일, 플러그인 인터페이스, 프로젝트 메타데이터에 안전하고 통제 가능하게 접근할 수 있는 표준 메커니즘을 제공하여, 디자인 초록을 코드로 더 편리하게 내보낼 수 있게 합니다.
그 후, 플러그인과 MCP의 기반 위에서, 프론트엔드 코드 자동화는 디자인 초안에서 직접 코드 구조를 도출하는 원시 지원 단계로 더욱 발전했습니다. 디자인 도구 내에서 프론트엔드 프로젝트 골격, 컴포넌트 계층, 스타일 시스템 및 해당 코드 결과를 원클릭으로 생성할 수 있습니다. 이를 통해 디자이너와 프론트엔드 개발 엔지니어는 수동으로 디자인 세부 사항을 옮기는 작업에서 해방되어, 사용자 경험 최적화와 기능 버전의 업데이트 반복에 더 많은 에너지를 집중할 수 있게 되었습니다.
2. Figma 입문
이제 추상적인 개념 부분에서 실제 조작 부분으로 넘어가겠습니다. 시간 관계상 Figma의 기본 조작 논리만 배우며, 디자인 도구를 전혀 사용해 본 적이 없더라도 연습을 따라 할 수 있도록 합니다. Figma의 완전한 기능 학습을 원하시면, Figma에서 제공하는 공식 튜토리얼을 참고하세요: https://help.figma.com/hc/en-us/sections/30880632542743-Figma-Design-for-beginners
또는 다음 튜토리얼을 참고하여 개인 포트폴리오 같은 간단한 웹페이지를 빠르게 구축하세요: https://help.figma.com/hc/en-us/sections/35895585621655-Figma-Sites-collectio
왼쪽은 프로젝트 생성 및 리소스 관리 입구이고, 오른쪽 상단의 몇 가지 버튼은 Figma의 주요 기능입니다. 그중 Make는 한마디로 AI가 먼저 대략적인 인터페이스나 구조 초안을 생성하도록 하는 데 사용되고, Design은 실제로 웹/App 인터페이스를 그리고, 컴포넌트를 만들고 프로토타입을 제작하는 메인 워크스페이스이며, FigJam은 팀 화이트보드처럼 포스트잇을 붙이고, 플로우를 그리고 초기 논의를 하는 데 사용됩니다. Buzz는 브랜드 자산 대량 생산 도구로, 브랜드 일관성을 유지하면서 콘텐츠를 대량으로 생성하는 데 사용되며, Site는 이러한 디자인을 실제로 접근 가능한 웹페이지나 문서 사이트로 정리하여 외부에 공개하는 것입니다.
언뜻 보면 Figma의 기능이 매우 많아 입문하기 어워 보이지만, 사실 이런 기능 도구는 본질적으로 숙련도의 문제입니다. 처음에 조작 실수를 두려워할 필요가 없고, 한 번에 완벽하게 하려고 할 필요도 없습니다. 먼저 사용해 보고, 많이 사용하다 보면 자연스럽게 빠르게 익숙해질 수 있습니다.
본 튜토리얼에서는 빠른 입문을 위해 Design 기능에 대해 간단히 설명하겠습니다.
2.1 새 Design 파일 만들기
홈페이지나 오른쪽 상단의 입구에서 Design을 선택하여 새 파일을 만들면, 빈 디자인 캔버스에 진입하게 됩니다. 이 인터페이스는 대략 세 부분으로 나뉩니다: 왼쪽은 페이지와 레이어로, 페이지와 요소의 계층 관계를 보고 수정하는 데 사용됩니다. 중간은 캔버스로, 현재 효과를 확인하는 데 사용됩니다. 오른쪽은 속성과 스타일로, 구체적인 형태, 색상, 스타일을 수정하는 데 사용됩니다. 하단은 도구 모음으로, 도구를 전환하는 데 사용되며, 선택 상자, 도형 그리기, 텍스트 입력, 댓글, 플러그인 등이 포함됩니다. 도구를 선택한 후 Esc 키를 누르면 기본 마우스 도구로 돌아갈 수 있습니다.
2.2 첫 번째 Frame(아트보드) 만들기
요소를 배치하기 전에 먼저 페이지의 명확한 경계를 결정해야 합니다. 이 경계는 Frame이 담당합니다. 하단 도구 모음에서 Frame 도구를 선택하거나, 키보드 F를 직접 누른 다음 캔버스에서 사각형 영역을 드래그할 수 있습니다.
- 하단 도구 모음의 Frame 도구를 사용하거나, 키보드
F를 직접 누릅니다. - 캔버스에서 사각형 영역을 드래그한 후, 오른쪽 속성 표시줄에서 너비를 예를 들어
1440으로, 높이를900으로 변경합니다. - 왼쪽 레이어 표시줄에서 이 Frame의 이름을 변경합니다. 예를 들어
My First Page또는 프로젝트 이름으로 지정합니다.
이 Frame은 한 화면 인터페이스의 페이지 컨테이너입니다. 이후의 제목, 텍스트, 버튼, 이미지 등의 콘텐츠는 모두 이 Frame 내부에 배치되어야 하며, 캔버스의 임의 위치에 흩어져 있어서는 안 됩니다. Frame을 경계로 콘텐츠를 조직하면, 이후 스크롤 설정, 다양한 기기 크기에 맞추기, 화면 내보내기 및 프로토타입 제작 시 구조를 통제하기 쉽습니다.
2.3 Frame에 텍스트와 간단한 요소 배치하기
컨테이너가 있으니, 이제 가장 기본적인 컴포넌트를 배치하는 방법을 배워보겠습니다. 예: 제목, 부제목, 버튼, 플레이스홀더 이미지 블록.
- 텍스트 도구(하단 도구 모음의
T)를 선택하고, Frame 안을 클릭한 후 페이지 제목을 입력합니다. 예:My Portfolio. 오른쪽 속성에서 글꼴 크기를 조금 크게(예: 96), 글꼴 굵기를 조금 굵게 조정합니다. - 제목 아래에 텍스트 도구로 간단한 설명을 한 줄 입력합니다. 예를 들어 이 페이지가 무엇을 하는지 한두 문장으로 설명합니다. 글꼴 크기는 조금 작게, 줄 간격은 조금 넓게 하면 읽기가 편합니다.
- 버튼 프로토타입 만들기: 사각형 도구로 제목 아래에 약
200 x 48크기의 사각형을 그리고, 오른쪽에서 비교적 눈에 띄는 채우기 색상을 지정한 다음, 적당히 둥근 모서리를 추가합니다.
- 텍스트 도구로 사각형 위에 버튼 텍스트(예:
Get Started)를 입력하고, 사각형과 텍스트를 모두 선택한 후 상단의 정렬 도구를 사용하여 텍스트를 수평 및 수직으로 가운데 정렬합니다. - 버튼 옆이나 아래에 비교적 큰 연한 회색 사각형을 "이미지 플레이스홀더 영역"으로 그립니다. 나중에 전시 이미지를 배치할 수 있습니다.
여기까지 하면, 사실 매우 초보적이지만 구조가 완전한 "홈페이지 초안"이 완성된 것입니다: 하나의 제목, 한 단락의 텍스트, 하나의 버튼, 하나의 주요 전시 영역.
2.4 Auto Layout으로 요소 정리하기
모든 요소를 마우스로 드래그하기만 하면 페이지가 금방 어지러워집니다. Figma에서 매우 중요한 개념이 바로 Auto Layout으로, 요소 그룹을 규칙이 있는 컨테이너로 만들 수 있습니다.
"메인 제목 + 부제목 + 버튼" 세 가지를 선택하고, 오른쪽 속성 표시줄에서 Add Auto layout을 클릭합니다.
이렇게 하면 세 가지가 하나의 컨테이너에 포함되며, 오른쪽에서 파라미터를 조정할 수 있습니다. 내부 요소의 레이아웃이 파라미터에 따라 자동으로 적응 및 조정됩니다:
- 세로로 배치할지 가로로 배치할지.
- 요소 사이의 간격은 얼마인지.
- 전체 블록이 컨테이너 가장자리에서 얼마나 안쪽 여백(padding)을 가지는지.
마찬가지로 버튼 내부도 Auto Layout을 사용할 수 있으며, 텍스트를 조정하면 버튼의 길이도 자동으로 조정되는 효과를 구현할 수 있습니다.
먼저 버튼 배경의 사각형과 버튼 텍스트를 선택하고 Auto Layout을 추가하여, 이 두 가지를 하나의 "버튼 컨테이너"로 만듭니다. 그런 다음 이 버튼 컨테이너를 선택하고 너비와 높이를 모두 Hug contents로 설정합니다. 이렇게 하면 텍스트가 항상 버튼 중앙에 유지되고, 텍스트가 많아지거나 적어지면 버튼의 너비가 자동으로 변합니다.
2.5 버튼을 재사용 가능한 컴포넌트로 만들기
이제 새로운 개념인 컴포넌트를 배워보겠습니다. 컴포넌트는 반복적으로 사용할 수 있는 요소를 의미합니다. 예를 들어 버튼 같은 요소는 나중에 반복해서 사용할 것이라고 예상되면, 컴포넌트로 만드는 것을 고려할 수 있습니다. 방금 Auto Layout을 추가한 버튼을 기반으로 다음 작업을 수행합니다:
- 전체 버튼 컨테이너를 선택합니다.
- 마우스 오른쪽 버튼을 클릭하고 Create component(컴포넌트 생성)를 선택합니다.
이렇게 하면 이 버튼이 일반 레이어 그룹에서 컴포넌트 마스터로 변환됩니다. 이후 다른 페이지나 Frame에서 같은 스타일의 버튼이 필요하면, 왼쪽의 Assets 패널에서 직접 드래그하여 사용할 수 있습니다.
이때 사용되는 모든 버튼은 이 마스터의 동기화된 복사본입니다. 마스터의 색상, 둥근 모서리 또는 간격을 수정하면, 모든 인스턴스가 자동으로 동기화 업데이트를 유지합니다.
이로써 Figma의 간단한 사용법을 초기에 마스터했습니다. 처음부터 모든 기능을 다 이해할 필요는 없습니다. 먼저 첫 번째 간단한 페이지를 만들어 보고, 이 몇 가지 핵심 조작에 익숙해진 다음, 공식 튜토리얼의 더 많은 기능을 천천히 탐색하면 됩니다. 사용 횟수가 늘어나면 반드시 익숙해질 것입니다.
3. MasterGo 입문
Figma의 기본 워크플로우를 이해한 후, 이제 MasterGo를 살펴보겠습니다. MasterGo는 간단히 중국판 Figma로 볼 수 있지만, 일부 기능에서는 차이가 있습니다. 전반적으로 Figma와 유사한 인터페이스 레이아웃과 조작 철학을 계승하고 있습니다. 마찬가지로 캔버스, 레이어 트리, 속성 패널이 있고, 컴포넌트, 스타일, 자동 레이아웃 및 다자간 협업을 지원합니다. 더 자세한 내용은 MasterGO의 공식 튜토리얼을 참고하세요: https://mastergo.com/tutorials/12
3.1 새 디자인 파일 만들기
MasterGo 백엔드 진입
- MasterGo 공식 웹사이트를 열고 계정에 로그인합니다.
- 진입하면 "파일 목록 / 프로젝트 목록"과 같은 홈페이지 영역이 보이며, 디자인 파일을 관리하는 데 사용됩니다.
새 파일 만들기
- 오른쪽 상단에서 + 디자인 파일 버튼 옵션을 클릭하거나, Figma 등 파일 가져오기를 선택합니다.
- 클릭하면 빈 캔버스에 진입하며, 이것이 MasterGo의 디자인 워크스페이스입니다.
기본 인터페이스 영역 파악 Figma 사용법을 배운 후, MasterGo의 사용 방식은 대동소이하며, 주로 몇 가지 영역으로 나뉩니다:
- 상단 도구 모음: 캔버스 최상단에 위치하며, 왼쪽은 파일 위치와 파일명, 중간은 자주 사용하는 도구 버튼 일렬(선택, 영역/아트보드, 도형, 텍스트, 주석, 댓글, 플러그인 선택 및 AI 도구 등), 오른쪽은 현재 온라인 멤버, 공유 입구 및 캔버스 확대/축소 및 미리보기 제어 기능 입구입니다.
- 왼쪽 패널: 주로 레이어와 리소스로 나뉘며, 현재 레이어 탭에 머물고 있을 때 페이지 목록과 해당 페이지의 모든 레이어 구조 및 계층을 볼 수 있습니다.
- 중간 캔버스 영역: 구체적인 그리기와 레이아웃의 워크스페이스로, 모든 Frame, 컴포넌트 및 도형이 여기에 표시됩니다.
- 오른쪽 속성 패널: 선택한 객체의 속성을 보고 편집하는 데 사용됩니다. 예를 들어 크기, 위치, 정렬 방식, 배경 채우기, 테두리, 둥근 모서리 등입니다. 아무 객체도 선택하지 않은 경우 캔버스 관련 설정(예: 캔버스 배경색, 태그 및 내보내기 옵션)이 표시됩니다.
3.2 첫 번째 Frame 만들기
본격적으로 요소를 배치하기 전에, 인터페이스의 경계와 크기를 결정하는 페이지 컨테이너가 필요합니다. 이 컨테이너는 MasterGo에서 보통 Frame이라고 부릅니다.
단계:
- Frame 도구 선택
- 도구 모음에서 Frame / 아트보드 도구를 찾아 클릭하면, 미리 설정된 파라미터를 사용하여 콘텐츠를 아트보드에 직접 생성할 수 있습니다.
- 또는 단축키를 사용합니다(보통
F, 차이가 있는 경우 실제 인터페이스를 기준으로 합니다).
- 캔버스에서 사각형 영역 드래그
- 드래그하면 선택 상자가 있는 영역이 보입니다.
- 오른쪽 속성 패널에서 이 Frame의 너비와 높이를 볼 수 있습니다.
- 너비를 예를 들어
1440으로, 높이를900으로 변경합니다(한 화면 웹페이지의 일반적인 크기 중 하나).
- Frame 이름 변경
- 왼쪽 레이어 패널에서 이 Frame을 찾습니다.
- 이름을 더블클릭하여 프로젝트 이름으로 변경합니다. 예:
My First Page또는 임의의 페이지 이름.
3.3 아트보드 콘텐츠 만들기
컨테이너가 있으니, Figma에서 이미 배운 방식과 유사하게 비슷한 전시 페이지를 쉽게 얻을 수 있습니다. (Figma 아트보드의 텍스트 요소를 복사하여 붙여넣기를 시도해 보세요. 텍스트 컴포넌트의 직접 붙여넣기 가져오기를 지원합니다.)
주의할 점은 Auto Layout 기능 동작에 약간의 불일치가 있다는 것입니다. MasterGo에서 Figma와 유사하게 버튼 길이가 텍스트 길이에 따라 변하는 효과를 구현하려면, 해당 사각형 요소를 기반으로 먼저 컨테이너나 컴포넌트를 생성해야 합니다. 그림과 같이:
컨테이너를 성공적으로 만든 후, 버튼 사각형과 텍스트를 해당 병렬 컨테이너에 넣고, 오른쪽에서 Auto Layout 버튼을 찾아 자동 기능을 활성화하면, 버튼 너비가 텍스트 길이에 따라 변하는 기능을 성공적으로 구현할 수 있습니다.
3.4 AI로 페이지 생성
MasterGo에서 주목할 만한 흥미로운 기능은 AI 페이지 생성입니다. 한마디나 참고 이미지를 사용하여, 해당하는 MasterGo 편집 가능 버전 컴포넌트를 생성하고, 바로 사용할 수 있는 코드를 얻을 수 있습니다. 한국어나 영어로 요구사항을 직접 입력할 수 있으며, 페이지는 요구사항에 따라 구조가 명확한 페이지 배치 문서를 반환합니다. 효과는 다음과 같습니다:
디자인 문서 생성이 완료되면, 생성 시작을 클릭하고 잠시 기다리면 해당하는 실제 웹페이지 효과를 얻을 수 있습니다:
이때 두 가지 조작 선택지가 있습니다: 첫째, 파란색 버튼을 클릭하여 생성 결과를 캔버스에 직접 삽입합니다. 둘째, 코드 미리보기 기능을 클릭하여 현재 완전한 페이지의 코드를 직접 얻습니다. 구체적인 조작 인터페이스는 다음과 같습니다:
결과를 캔버스에 삽입한 후, 웹페이지의 전체 레이아웃, 요소 세부 사항(예: 글꼴, 색상, 간격 등)을 더 세밀하게 조정하여, 최종 효과가 완전히 기대에 부합할 때까지 수정할 수 있습니다.
4. 다음 단계: 프로토타입에서 코드로
앞의 내용에서, 우리는 Figma와 MasterGo의 기본 조작을 배우고, 구조가 완전한 인터페이스 프로토타입을 만들 수 있게 되었습니다. 다음 핵심 단계는: 이러한 디자인 초안을 브라우저에서 실제로 실행할 수 있는 프론트엔드 코드로 변환하는 방법은 무엇인가?
후속 튜토리얼
자세한 방법 소개는 디자인 프로토타입에서 프로젝트 코드까지를 참고하세요. 다음을 배우게 됩니다:
- 멀티모달 AI 직접 변환: 디자인 초안 스크린샷을 AI에 보내 HTML/React 코드를 직접 생성
- Figma Make: Figma 공식 AI 도구를 사용하여 디자인을 고정밀도로 재현하고 코드 내보내기
- MasterGo AI: 원클릭으로 편집 가능한 페이지를 생성하고 코드 얻기
이러한 방법은 각각 장단점이 있으며, 다양한 시나리오에 적합합니다. 프로젝트 요구사항에 따라 적절한 워크플로우를 선택하는 것이 좋습니다.
5. 요약
본 장의 학습을 통해, 다음을 마스터했습니다:
프론트엔드 디자인 도구의 가치: 왜 디자인 도구가 필요한지, 그리고 그것이 정보 배분과 팀 협업 문제를 어떻게 해결하는지 이해했습니다.
Figma 기본 조작:
- Design 파일과 Frame 아트보드 만들기
- 텍스트, 도형 등 기본 요소 추가하기
- Auto Layout을 사용한 적응형 레이아웃 구현하기
- 재사용 가능한 컴포넌트 시스템 만들기
MasterGo 기본 조작:
- Figma와 유사한 인터페이스 레이아웃에 익숙해지기
- Frame과 기본 아트보드 콘텐츠 만들기
- AI 페이지 생성 기능을 사용하여 빠르게 프로토타입 만들기
다음 단계
이제 프론트엔드 디자인 도구의 기본 사용법을 마스터했으니, 다음을 시도해 볼 수 있습니다:
- 자신을 위한 개인 포트폴리오 페이지 디자인하기
- 다음 프로젝트를 위한 인터페이스 프로토타입 디자인하기
- 디자인 프로토타입에서 프로젝트 코드까지를 배워, 디자인 초안을 실행 가능한 코드로 변환하기
호그와트 초상화 만들기 프로젝트를 완수하고 있다면, 먼저 인터페이스 프로토타입을 디자인한 다음, 코드를 내보내고 AI 대화 기능과 결합할 수 있습니다.