[내일배움캠프 PM 4기] 9일차 - 💻 디자인이 코드가 되는 순간: 프레임과 그룹의 결정적 차이

피그마 작업은 단순히 예쁜 그림을 그리는 것을 넘어, 실제 웹이나 앱 화면을 만들기 위한 설계 과정입니다. 오늘은 디자이너가 만든 디자인이 개발자의 코드로 변환되는 원리를 이해하고, 이 과정에서 가장 중요한 요소인 프레임과 그룹의 차이를 명확하게 정리해 보겠습니다.

 

1. 디자인은 어떻게 코드로 변환될까? (박스 모델 이해)

우리가 피그마에서 만든 디자인은 웹 브라우저나 앱 화면에 표시되기 위해 코드로 변환됩니다. 이때, 개발 언어(HTML/CSS 등)는 디자인을 레고 블록처럼 쌓는 방식으로 처리합니다.

• 코드의 기본 구조: 코드는 기본적으로 화면을 네모난 박스(Box) 영역으로 나누고, 그 박스 안에 디자인 요소들을 배치합니다. 이를 **박스 모델(Box Model)**이라고 부릅니다.
• UI 설계의 중요성: 따라서 디자이너는 UI를 설계할 때, 개발자가 코드로 변환하기 쉬운 구조, 즉 박스 영역을 체계적으로 만들 수 있는 구조로 디자인해야 합니다. 이 구조를 위한 핵심 기능이 바로 프레임입니다.

---

2. 프레임 (Frame) vs. 그룹 (Group): 결정적인 차이

피그마에서 여러 개체를 묶을 때 사용하는 프레임과 그룹은 기능적으로 매우 유사해 보이지만, 개발 관점에서는 완전히 다른 개체입니다. 이 차이를 명확히 아는 것이 협업의 핵심입니다.

구분	프레임 (Frame)	그룹 (Group)
개념	코드 블록을 만드는 기능이자, 코드 블록 자체	여러 개체를 단순히 하나로 묶는 기능
개발 관점	실제 코드로 변환 가능한 실체적인 개체 (컨테이너)	코드로 인식되지 않는 묶음 상태 (벡터 그래픽처럼 취급)
주요 목적	UI 구조 설계, 속성 적용, 개발 연동	편집 및 정리/이동의 편의성
속성 적용	가능 (배경색, 클리핑 등 다양한 속성 적용)	불가능 (묶인 개체 각각에만 속성 적용 가능)
실무 사용	높음 (개발 협업의 필수 요소)	낮음 (단순 편집 시에만 사용)

 

💡 핵심 요약:

• 프레임은 UI 요소들을 담는 '택배 상자'이자 실제 코드 블록입니다. 크기 조정이나 속성 적용이 가능하며, 개발자가 코드를 이해하고 구현하는 기반이 됩니다.
• 그룹은 여러 개체를 잠시 '스테이플러로 찍어 놓은' 상태입니다. 코드 변환에 영향을 주지 않으며, 개발자에게는 의미가 없기 때문에 UI 구조 설계에는 반드시 프레임을 사용해야 합니다.

결론적으로, UI 구조를 만들고 개발자와 소통하기 위해서는 그룹 대신 프레임을 습관처럼 사용하는 것이 중요합니다!