본문으로 건너뛰기

5. 레이아웃 & 화면 설계

페이지 생성 및 관리 (Create and Manage Pages)​

각 페이지는 위젯을 드래그 앤 드롭으로 배치하는 시각적 캔버스입니다.

페이지 만들기​

Lucy Studio에서 페이지를 만드는 방법은 세 가지입니다.

  1. 햄버거 메뉴

    1. 햄버거 메뉴로 이동합니다.

    2. [New Page]를 클릭합니다.

      햄버거 메뉴

    3. [Create New Page] 대화상자의 [Name] 필드를 입력합니다(설명은 선택 사항입니다).

      Create New Page 대화상자

  2. Page 탭 이용

    1. Page 탭(Plate 메뉴의 세 번째 아이콘)으로 이동합니다.

    2. 상단의 [새 페이지 추가] 아이콘을 클릭합니다.

      Page 탭에서 새 페이지 추가

    3. [Create New Page] 대화상자의 [Name] 필드를 입력합니다(설명은 선택 사항입니다).

      Create New Page 대화상자

페이지 관리 - 삭제, 이름 바꾸기, 복제​

페이지를 더 큰 범주로 정리하려면 폴더를 만들 수 있습니다. 아래 내용에서는 페이지를 삭제·이름 변경·복제하는 방법도 함께 다룹니다.

  • 폴더 만들기

    • [폴더 추가 아이콘]을 클릭합니다.

      폴더 만들기

    • [Folder Name]과 [Description]을 입력합니다.

      폴더 만들기 대화상자

    노트

    현재 페이지를 드래그 앤 드롭으로 폴더에 넣는 기능은 지원되지 않습니다. 폴더를 마우스 우클릭하면 바로 페이지를 추가할 수 있습니다.

  • 페이지 삭제·이름 바꾸기·복제

    • 삭제·이름 변경·복제하려는 페이지를 마우스 우클릭합니다.

      페이지 삭제·이름 바꾸기·복제

페이지 크기 / 디바이스 타입​

캔버스 영역 상단에 [Device Type] 드롭다운이 있습니다. 여기서 어떤 디바이스를 대상으로 만들지 선택할 수 있습니다. 캔버스 크기가 선택한 디바이스 크기에 맞춰지므로, 원하는 디바이스에 정확히 맞춰 디자인할 수 있습니다.

Device Type 드롭다운

  • Responsive - 캔버스가 특정 디바이스 크기에 고정되지 않습니다. 대신 기본 크기 1024×768로 미리보기 되며, 런타임에 앱이 실행되는 화면 크기에 맞춰 레이아웃이 적응하도록 설계되어 있습니다. 화면 크기가 크게 다양한 웹이나 데스크톱을 대상으로 할 때 Responsive 모드를 사용하세요.
  • Foldable Device - 캔버스에 접힘(344×882)과 펼침(690×829) 두 가지 상태가 있습니다. 스튜디오에서 두 상태를 전환하며 각각의 레이아웃을 디자인할 수 있습니다. 폴더블 디바이스용으로 제작할 때는 접힘·펼침 화면을 모두 디자인하고 테스트해야 합니다.

페이지 속성​

캔버스 영역에서 페이지를 클릭하면 설정 가능한 속성이 표시됩니다. 여기에는 페이지의 배경색, 디자인 높이, 디자인 너비 등이 포함됩니다.

페이지 속성 패널

레이아웃 위젯 사용 (Use Layout Widgets)​

각 페이지는 부모 위젯을 하나만 가질 수 있습니다. 이 부모 위젯은 보통 Column 또는 Row입니다.

  • Column

    • 자식을 위에서 아래로 배치합니다.

    • MainAxisSize

      • min: 자식 높이의 합을 사용합니다.
      • max: 부모가 허용하는 최대 높이를 사용합니다(기본값).

    • MainAxisAlignment - Column의 자식을 위에서 아래로 정렬합니다.

      Column MainAxisAlignment

    • CrossAxisAlignment - Column의 자식을 왼쪽에서 오른쪽으로 정렬합니다.

      Column CrossAxisAlignment

      Column 정렬 예시

  • Row

    • 자식을 왼쪽에서 오른쪽으로 배치합니다.

    • MainAxisSize

      • min: 자식 너비의 합을 사용합니다.
      • max: 부모가 허용하는 최대 너비를 사용합니다(기본값).

    • MainAxisAlignment - Row의 자식을 왼쪽에서 오른쪽으로 정렬합니다.

      Row MainAxisAlignment

    • CrossAxisAlignment - Row의 자식을 위에서 아래로 정렬합니다.

      Row CrossAxisAlignment

      Row 정렬 예시

부모 위젯이 Row나 Column이 아닌 경우도 있습니다. 이런 위젯은 [Layout] 섹션에서 찾을 수 있습니다.

  • Stack

    • Stack은 모든 자식을 같은 위치에 겹쳐서 배치합니다. 기본적으로 자식은 Stack의 왼쪽 위 모서리에 위치하지만, [Positioned] 속성을 사용하면 각 자식에 Stack 내 절대 위치를 지정할 수 있습니다.

      Stack 예시

  • Wrap

    • 자식을 한 줄(축을 세로로 설정하면 한 열)로 배치하다가, 다음 자식이 가용 너비를 초과하면 새 줄로 넘깁니다. Column과 달리 Wrap은 자식이 전체 너비를 채울 필요가 없으며, 각 자식은 필요한 만큼의 공간만 차지합니다.

      Wrap 예시

보조 레이아웃 위젯​

Lucy Studio에서 이 위젯들은 [Dividers] 섹션에 있지만, 원하는 레이아웃을 만드는 데 도움이 됩니다.

  • Spacer: Spacer 위젯은 화면에 보이지 않지만, 부모 Row나 Column의 주축을 따라 남은 공간을 모두 채우는 위젯입니다. 형제 위젯을 양 끝으로 밀어낼 때 가장 흔히 사용합니다. 간격이 남은 공간에 맞춰 자동으로 조절되길 원할 때 Spacer를 사용하세요.

    Spacer 위젯

  • Divider-H: 가로 구분선

    가로 구분선 예시

  • Divider-V: 세로 구분선

    세로 구분선 예시

  • SpaceBox: SpaceBox 위젯은 위젯 사이에 정확한 간격을 넣기 위한 고정 크기의 빈 박스입니다. 정해진 값으로 고정된 거리가 필요할 때 SpaceBox를 사용하세요.

    SpaceBox 위젯

특정 위젯 주변에 여백이 필요하다면 그 위젯에 스타일 속성으로 Padding을 적용하세요 — SpaceBox를 추가하는 것보다 트리를 더 간결하게 유지할 수 있습니다. 위젯이 커지면서 남은 공간을 채우게 하려면, 별도로 Spacer를 추가하는 대신 그 위젯에 Flexible 속성을 적용하세요. 다른 방법으로는 바꿀 수 없는 두 형제 위젯 사이의 간격이 필요할 때만 Spacer나 SpaceBox를 사용하세요.

리스트 및 영역 레이아웃 패턴 (List and Area Layout Patterns)​

아래 예시는 레이아웃 위젯을 조합해 자주 쓰이는 화면 구조를 만드는 방법을 보여줍니다. 개별 위젯 속성은 위젯 레퍼런스 섹션에서 다룹니다. 이 속성들에 대해 더 알아보려면 위젯 다루기를 확인하세요.

  • Feed (06_Layout_and_Screen_Design > feed_example) — ListView 안에 Card 위젯을 배치해 만든 스크롤 가능한 피드입니다. 각 Card는 이미지, 제목, 설명 등 하나의 항목 콘텐츠를 담고, ListView가 이를 세로로 쌓아 스크롤을 처리합니다. 콘텐츠 피드, 상품 목록처럼 반복되는 스크롤 가능한 목록이 필요한 화면에 잘 맞는 패턴입니다.

    Feed 예시

  • Settings (06_Layout_and_Screen_Design > settings_example) — Column, Row, Card 위젯으로 만든 설정 화면입니다. 섹션마다 Card의 레이아웃과 내용이 달라지므로 이 패턴은 ListView를 사용하지 않고, 대신 각 섹션을 Column과 Row로 개별적으로 구성합니다. 설정·환경설정 화면에서 각 섹션이 동일한 행 템플릿을 반복하기보다 저마다 고유한 레이아웃을 가져야 할 때 이 방식이 잘 맞습니다.

    Settings 예시

반응형 레이아웃 만들기 (Build Responsive Layouts)​

위젯에 [Flexible] 속성을 적용하면 반응형 레이아웃을 만드는 데 도움이 됩니다. 부모가 Row나 Column인 경우, 모든 위젯에는 [Flexible] 속성을 적용할 수 있는 옵션이 있습니다.

위젯에 Flexible 적용하기​

  • Flexible 속성을 적용하려면, 적용하려는 위젯을 클릭하고 [Property] 탭으로 이동합니다.
  • flex와 fit 속성이 보입니다.

    • Flex: 각 자식은 자신의 flex 값을 모든 자식(자신 포함)의 flex 값 합으로 나눈 만큼 늘어나 공간을 채웁니다.

      Flex 속성

      Flex 예시

      • 예) 위 이미지에서 자식 A와 C의 flex 값은 1이고 자식 B는 2입니다. 자식들의 flex 값 합은 4입니다. 자식 B의 flex 값(2)을 합계(4)로 나누면 0.5, 즉 50%입니다 — 자식 B가 늘어나 채우게 될 공간의 비율입니다.

    • Fit

      • tight: 위젯의 고유 크기가 더 작더라도, 할당된 flex 공간 전체를 강제로 채웁니다. 아래 이미지의 모든 자식은 고유 너비가 50임에도 fit 속성이 tight로 설정되어 있습니다.

        Fit: tight 예시

      • loose: 위젯이 자신의 flex 할당량을 넘지 않는 선에서 고유 크기로 표시됩니다. 이것이 기본값입니다.

        Fit: loose 예시

        • 예시: flex: 1을 각각 가진 세 자식이 모두 너비 50으로 박스 처리된 채, 가용 너비 328px에 자식 사이 간격 8px인 행에 배치된 경우. 8px 간격 두 개를 빼면 자식들에게 나눌 수 있는 공간은 312px이고, flex: 1씩 균등하게 셋으로 나누면 자식당 104px입니다. 자식 A와 C는 tight이므로 각각 자신의 몫인 104px를 전부 채우도록 강제됩니다. 자식 B는 loose이므로 자신의 104px 몫 중 고유 너비(50px)만큼만 사용하고, 나머지 54px는 사용하지 않습니다.

스크롤 가능한 오버플로우​

콘텐츠가 Row나 Column의 경계를 벗어날 때, 콘텐츠를 스크롤 가능하게 만들어 이 오버플로우를 처리하는 방법이 몇 가지 있습니다.

  • ListView를 사용합니다. 스크롤되는 콘텐츠가 전부 서로 다른 디자인이라면 ScrollView를 적용하거나 [scrollAnchor]를 활성화하세요.

  • 오버플로우 콘텐츠를 담고 있는 Column이나 Row에 ScrollView 스타일을 추가합니다.

    ScrollView 예시

  • Column에 기본 제공되는 [scrollAnchor] 속성을 활성화합니다.

    • 이 속성을 사용하면 사용자가 Column의 특정 지점으로 스크롤할 수도 있습니다.

    • Column의 특정 지점으로 스크롤하는 것도 가능합니다. 자세한 방법은 Column Widget Control을 확인하세요.

      scrollAnchor 예시