디자인 레퍼런스
이정마 서비스에 적용된 다양한 UI/UX 디자인 방법론을 시각적으로 비교하고 학습할 수 있습니다.
1. 프로필 버튼 내부 여백(Padding)과 정렬 방식 비교
아바타(솔리드 영역)와 쉐브론(선형 아이콘) 간의 시각적/구조적 균형을 맞추기 위한 세 가지 접근 방식입니다.
1. 대칭 패딩 (Symmetrical Padding)
수학적으로 좌우 패딩을 동일하게 부여하는 방식. 구현이 가장 직관적입니다.
Pros: 가장 깔끔하고 직관적인 CSS 코드.
Cons: 쉐브론 아이콘 내부의 여백 때문에 시각적으로는 오른쪽이 살짝 더 넓어 보일 수 있습니다.
2. 시각적 보정 (Optical Alignment)
사람의 눈에 완벽한 대칭으로 보이도록 패딩 값을 미세 조정한 방식입니다.
Pros: 사람의 눈에 가장 안정적이고 조화롭게 보입니다.
Cons: CSS 패딩 값이 비대칭(Asymmetrical)이 되어 코드를 처음 보는 사람에게 혼란을 줄 수 있습니다.
적용됨
3. CSS Grid (강제 중앙 정렬)
Flex 대신 Grid를 사용하여 텍스트 영역이 남은 빈 공간(1fr)을 모두 차지하도록 강제 정렬합니다.
Pros: 아이콘 크기나 텍스트 길이에 구애받지 않고 언제나 완벽한 텍스트 중앙 정렬을 보장합니다.
Cons: 다소 복잡한 CSS 구조(오버엔지니어링)를 가지며, 아주 작은 단위 컴포넌트에는 과할 수 있습니다.