HarmonyOS NEXT 개발 실전 가이드: 아이콘 라이브러리 및 레이아웃 속성 분석
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
앱 개발
대상자
- 대상: HarmonyOS 앱 개발자
- 난이도: 중급~고급 (UI 구성 및 레이아웃 설계 경험 필요)
핵심 요약
- HarmonyOS 공식 아이콘 라이브러리의 핵심 기능:
- 18+ 범주(시스템, 기기 제어, 생활 서비스 등)의 다중 시나리오 지원
- SVG/PNG 형식 및 fillColor, width/height 실시간 조정 가능
- ic_ 명명 규칙 준수 및 ArkUI 프레임워크와의 원활한 통합
- 레이아웃 속성 핵심 활용 법:
- padding과 margin의 3가지 구성 방식(단일 값, 이중 값, 사방 정확 설정)
- justifyContent, alignItems를 통한 자식 컴포넌트 정렬 규칙
- Image 컴포넌트의 fillColor로 테마 색상 호환성 구현
- 실무 팁:
- Font Awesome 등 외부 라이브러리와의 호환을 위해 SVG 변환 도구 활용 권장
- FlexGrow 및 LayoutWeight 속성을 통한 고급 레이아웃 설계
섹션별 세부 요약
1. HarmonyOS 공식 아이콘 라이브러리 소개
- 다중 시나리오 지원: 시스템, 기기 제어, 생활 서비스 등 18개 이상의 범주 포함
- 유연한 커스터마이징:
- fillColor로 색상 조절, width/height로 크기 조정 가능
- SVG/PNG 형식 선택 가능
- 공학적 적응:
- ic_ 명명 규칙 준수
- ArkUI 프레임워크와의 무선 통합
2. 아이콘 사용 단계 및 예제
- 다운로드 및 저장:
- 공식 라이브러리에서 SVG 파일 다운로드
- 저장 경로: resources/base/media/
- 파일명 규칙 예시: material-account.svg → ic_user_account.svg
- Image 컴포넌트 활용:
```harmonyos
Image($r('app.media.ic_system_settings'))
.width(48)
.height(48)
.fillColor(this.themeColor)
```
- fillColor 속성으로 테마 색상 적용 가능
3. 레이아웃 속성 분석
- 컨테이너 레이아웃:
- Column, Row, Stack 사용하여 페이지 구조 설계
- 예: Column() { ... }
- 크기 조절:
- width("90%")로 비율 기반 크기 설정
- 간격 조절:
- padding(10)으로 내부 간격, margin({ right: 15 })으로 외부 간격 설정
- 정렬 방식:
- justifyContent.FlexEnd로 자식 요소 정렬
4. Padding 및 Margin 구성 예제
- 단일 값 설정:
```harmonyos
.padding(20) // 상하좌우 모두 20px
```
- 이중 값 설정:
```harmonyos
.padding({ horizontal: 15, vertical: 10 }) // 수평 15px, 수직 10px
```
- 사방 정확 설정:
```harmonyos
.padding({ top: 8, right: 16, bottom: 8, left: 16 }) // 버튼 내부 간격 예시
```
5. 실무 적용 사례
- 카드 레이아웃 구성:
- margin 속성을 통해 카드 간격 조절 및 그림자 표시 공간 확보
- 예:
```harmonyos
.margin({ right: 20 }) // 오른쪽 간격 20px
.shadow({ radius: 8, color: '#1A000000' })
```
- 반응형 레이아웃:
- marginPercent 속성을 통해 다양한 화면 크기 대응
6. 고급 레이아웃 팁
- FlexGrow 및 LayoutWeight 활용:
- FlexGrow로 요소의 확장 비중 조절
- LayoutWeight로 레이아웃의 무게 중심 설정
- 외부 아이콘 라이브러리 통합:
- Font Awesome 등과 SVG 변환 도구를 통해 HarmonyOS 프로젝트에 통합
결론
- 핵심 팁:
- ic_ 명명 규칙과 Image 컴포넌트의 fillColor 속성을 통해 테마 맞춤형 아이콘 적용
- padding/margin의 다양한 구성 방식으로 레이아웃 유연성 확보
- FlexGrow 및 LayoutWeight를 활용한 고급 레이아웃 설계
- 외부 라이브러리와의 호환을 위해 SVG 변환 도구 사용 권장