로딩 중...
로딩 중...
반복되는 UI를 컴포넌트화
구현 지침 탭에서 각 단계를 클릭하여 완료 표시할 수 있습니다.
이 미션에서 무엇을 배우고 어떤 경험을 하게 되는지 확인하세요.
"반복 작업을 줄이고, 효율적으로 수정 가능한 디자인 시스템을 만듭니다."
4주차까지는 서비스의 구조(IA)와 흐름(User Flow)을 설계했습니다. 이제 피그마를 사용하여 실제 화면(UI)을 제작할 차례입니다. 하지만 도형을 하나씩 그려서 화면을 만들면, 나중에 수정 사항이 생겼을 때 모든 화면을 일일이 수정해야 하는 비효율적인 상황이 발생합니다.
이번 미션의 핵심은 '재사용 가능한 구조'를 만드는 것입니다. 자주 사용하는 요소를 '컴포넌트(Component)'로 만들어 두면, 원본 하나만 수정해도 모든 화면에 적용된 요소들이 일괄 변경됩니다. 또한 내용물의 양에 따라 박스 크기가 자동으로 조절되는 '오토레이아웃(Auto Layout)' 기능을 사용하여 수정이 쉬운 디자인을 구현합니다.
이 기능들을 익히면 디자인 작업 시간을 획기적으로 단축할 수 있습니다.