block 요소: width, height, margin 가능.
inline 요소: width, height, margin 상하 X -> 대신 line-height 사용.
attribute: HTML
property: JSON
폰트는 index.html에서 cdn으로 불러오기.
디자이너와 협업 시
아이콘(svg, img) Export할 때, 항상 Frame or Component인 상태로 만들어서 진행하기(Ctrl + Alt + G)
그룹으로 만드는 것은 단순한 시각적 그룹화일뿐, 레이아웃 박스, 좌표/사이즈 기준 제공하지 못함.
focus: 요소가 선택되었을 때 (키보드·마우스·터치 등)
active: 요소를 클릭/터치로 누르고 있는 동안 잠깐
transform: translate(), rotate(), scale()
transition: 2s 1s ease-in; (부드럽게 속성 전환.)
@keyframes: from{} to{} (transition보다 복잡하고 정밀함.)
flex-grow, flex-shrink, flex-basis: 기본값으로 0, 1, auto. 얼마나 늘어날지, 얼마나 줄어들지(줄어들 양의 비율), 크기 얼마로 할지
align-self: justify-content, align-items와 비슷하지만, 해당 속성이 적용된 요소 하나만 정렬됨.
아이콘 + 텍스트 정렬
flex + align-items: center 조합은 거의 항상 잘 작동하지만,
아이콘(svg 또는 img)의 수직 정렬 문제는 텍스트의 baseline 때문에 간혹 어긋나는 경우가 있다.
→ 그래서 아이콘에 vertical-align: middle 또는 display: block 을 지정해주는 것이 안전한 실무 패턴이야.
<img src="/icon.svg" class="w-5 h-5" />
<!-- 기본값 vertical-align: baseline -->❌ 아이콘이 약간 아래로 쳐져 보이는 경우
<img src="/icon.svg" class="w-5 h-5 block" />
<!-- or -->
<img src="/icon.svg" class="w-5 h-5 align-middle" />✅ 아이콘이 텍스트와 정확히 맞는 경우 (img는 block or align-middle, svg는 block + w,h 지정)
✅ 왜 아이콘도 Group 대신 Frame으로 감싸야 할까?
디자이너가 Illustrator에서 만든 벡터를 옮기면 자동으로 Group으로 묶이긴 해.
하지만 실제 개발에서는 export와 위치 제어를 위해 Frame으로 바꾸는 게 일반적이야.
z-index가 같거나 같이 움직여야 하거나 시각적으로 "하나의 덩어리처럼 움직이는 대상"이라면 Frame으로 묶는 게 자연스럽고 개발 효율이 높아.
✅ 1. "Frame-Vector-Frame 구조로 정리"의 의미
🎯 디자인 레이어를 "의미 있는 컨테이너(Frame)" 안에 기능적 단위(Vector, Text 등)를 넣고, 전체를 다시 상위 Frame으로 감싸서 명확한 구조를 만드는 방식을 뜻해.
📌 구조 예시
[최상위 Frame (예: 섹션/컴포넌트 단위)]
├─ [Frame: 아이콘 영역] ← ✅ 위치와 크기 기준
│ └─ Vector (아이콘 벡터)
├─ [Frame: 텍스트 영역]
│ ├─ Text: 제목
│ └─ Text: 설명
└─ [Frame: 버튼]
└─ Text: 시작하기- Group을 쓰지 않고 모두 Frame으로 계층을 나누는 게 핵심
- 각각이 HTML의 <div>로 정확히 매핑 가능해져 개발자가 해석하기 쉬움
✅ 2. 실무용 "Figma 정리 체크리스트"
| ✅ Group 제거 | Frame으로 전환 | 구조를 시각적 단위가 아닌 DOM 단위로 표현 |
| ✅ Auto Layout 사용 | 반복/정렬/간격 적용 | 패딩, 정렬, flex 간격을 명확히 전달 |
| ✅ 이름 명확화 | 컴포넌트/Frame에 의미 있는 이름 부여 | btn/primary, icon/user 등 |
| ✅ 내부 요소 위치 | x, y 값이 아닌 Auto Layout 또는 Anchor로 고정 | 반응형 대비 구조 설계 |
| ✅ Export 대상 Frame 지정 | 아이콘이나 벡터는 Frame으로 감싼 뒤 export | viewBox 문제 방지 |
| ✅ 비슷한 레벨 요소는 같은 계층 유지 | 구조 파악 및 반복 컴포넌트화 용이 | |
| ✅ Component 분리 | 버튼, 카드, 리스트 등은 Components로 관리 | 재사용성 + 코드화 효율성 증가 |
Frame 내부 요소 위치 조절. Auto Layout vs Anchor
| Anchor란 == position:absolute; | 부모 기준 고정 위치 지정 속성 (Constraints) |
| 언제 Anchor 써야 하나 | Auto Layout이 아닌 단독 요소 위치 고정 시 |
| 실무 추천 조합 | Layout은 Auto Layout / 아이콘 등은 Anchor |
✅ 추가 실무 팁
- Figma에서는 Frame이 div, Auto Layout이 flex로 직결되기 때문에
디자인의 Frame 구조 = HTML/CSS의 계층 구조로 바로 이어져 - Frame 내에 Group을 남기지 않고 모든 레이어를 Frame-Vector-Frame 구조로 정리하는 게 가장 깔끔하다.