프로젝트에서 보기 →

Flutter 입문. 안드로이드, iOS 개발을 한 번에 #18 Stack

태그
기술 안드로이드 Flutter iOS
시작일
종료일
수정일

https://www.youtube.com/watch?v=5DejNWu6-9Q

1. 이건 꼭 알아야 한다[^1]

[? 질문] Flutter에서 여러 위젯을 겹쳐서(오버레이로) 배치하려면 무엇을 써야 하는가[^2]
[= 답] Row/Column처럼 일렬 배치만 가능한 레이아웃이 아니라, 자식 위젯이 같은 공간 위에 포개져 그려지는 Stack을 사용한다.[^2][^10]

[? 질문] Row/Column과 Stack의 가장 핵심적인 차이는 무엇인가[^3]
[= 답] Row/Column은 기본적으로 자식들이 서로 겹치지 않게 배치되는 반면, Stack은 자식들이 겹칠 수 있게 같은 영역에 쌓이며 렌더링된다.[^3][^9]

[? 질문] Stack은 어떤 UI를 만들 때 유용한가[^5]
[= 답] 예를 들어 이미지 위에 텍스트를 올리는 것처럼, 하나의 요소 위에 다른 요소를 레이어처럼 덧그리는 화면을 만들 때 적합하다.[^5][^6][^10]

2. 큰 그림[^1]

이 콘텐츠는 Flutter 레이아웃 위젯 중 Stack을 소개하며, 기존에 배운 Row/Column과 비교해 “겹침(오버레이)”이 필요한 UI에서 Stack을 왜/어떻게 쓰는지 감을 잡게 하는 짧은 설명으로 구성된다.[^2][^3] 발표자는 그림/예시를 통해 Stack의 직관(쌓이는 레이어)을 먼저 제시한 뒤, 코드 형태(Children 구조)로도 동일 개념이 적용됨을 연결한다.[^2][^7]

  • Stack은 겹칠 수 있다: Row/Column에서는 불가능했던 “위젯 겹치기”를 Stack은 가능하게 한다.[^2][^3]
  • 자식은 Children으로 나열한다: Stack 내부에 여러 자식을 넣으면, 그 자식들이 들어오는 대로 같은 자리에서 겹쳐진다.[^7][^8]
  • 레이어 화면에 사용한다: 이미지 위 텍스트 같은 “층(레이어)” UI를 만들 때 Stack을 쓰면 된다는 사용처를 제시한다.[^5][^6][^10]

3. 하나씩 살펴보기[^1]

3.1 Stack은 ‘겹치는 배치’가 핵심[^2]

📸 0:00

발표자는 “Stack을 한번 보겠다”고 하며 주제를 열고, 그림을 보면 감이 올 것이라고 전제한다.[^2] 여기서 Stack의 핵심 이미지는 “쌓인다/포개진다”에 가깝다. 즉, Stack은 자식 위젯들이 서로 다른 줄/칸으로 밀려나는 것이 아니라, 동일한 공간을 공유하면서 레이어처럼 겹칠 수 있는 레이아웃임을 직관적으로 이해하라는 흐름이다.[^2]

  • Stack은 이름 그대로 “쌓는” 개념이며, 결과 화면에서 위젯들이 겹칠 수 있다는 점을 먼저 강조한다.[^2]

[!IMPORTANT] Stack을 떠올릴 때의 1차 이미지
“여러 위젯이 한 자리에 겹쳐질 수 있다”는 게 Row/Column과의 본질적 차이다.[^2][^3]

3.2 Row/Column과의 대비: “Row/Column은 겹치는 게 안 됨”[^3]

📸 0:04

이어서 발표자는 이미 학습한 Row와 Column을 기준점으로 삼아 차이를 설명한다.[^3] Row/Column은 기본적으로 자식들을 가로/세로로 배치하는 레이아웃이라, 자식들이 겹쳐서 배치되는 것이 아니라 나란히/위아래로 배치되는 것이 자연스러운 사용법이다.[^3]

  • “지금 Row하고 Column은 겹치는 게 안 됐잖아요”라는 언급으로, Row/Column의 기본 성질을 “비겹침”으로 상기시킨다.[^3]
  • 이 대비를 통해 Stack은 “겹침이 필요할 때 등장하는 선택지”라는 위치를 잡는다.[^3][^10]

[? 질문] 왜 Row/Column으로는 ‘겹치는 UI’를 만들기 어렵다고 말하는가[^3]
[= 답] Row/Column은 자식 위젯을 한 방향으로 나열 배치하기 때문에 기본적으로 같은 자리에 포개어 그리는 구조가 아니기 때문이라는 대비를 제시한다.[^3][^10]

3.3 Stack이 필요한 상황 예시: 이미지 위에 텍스트를 올리기[^5]

📸 0:08

발표자는 Stack이 “언제 유용한지”를 짧은 예로 든다.[^5] 대표 사례는 이미지와 텍스트의 오버레이이다.[^5][^6]

  • “예를 들면 이미지”라는 말로 상황을 제시한다.[^5]
  • 이어서 “100짜리 이미지가 있고 텍스트를 위에다가 이렇게 겹칠 수가 있다”라고 말하며, 이미지(바탕) 위에 텍스트(전경) 를 얹는 구성을 언급한다.[^6]
  • 즉, Stack은 배경 레이어(이미지) 와 전경 레이어(텍스트) 를 한 화면에서 겹치게 만들어야 할 때 쓴다는 것을 예시로 각인시킨다.[^6][^10]

[!TIP] 대표 사용 패턴(콘텐츠가 든 예시 그대로)
이미지 위에 텍스트를 겹쳐서 보여주고 싶으면 Stack을 고려한다.[^6]

+++ 상세 예시(콘텐츠의 설명을 UI 상황으로 풀어쓴 형태)

  • “100짜리 이미지”라는 표현은, 크기가 정해진(예: 100px 정도) 이미지가 화면에 있고 그 위에 문구를 올려야 하는 상황을 떠올리게 한다.[^6]
  • 이런 경우 Row/Column처럼 ‘옆/아래로 배치’하면 텍스트가 이미지 위가 아니라 옆/아래로 가기 쉬운데, Stack은 같은 영역 위로 겹칠 수 있다는 맥락에서 적합하다는 메시지로 연결된다.[^3][^6] +++

3.4 코드 관점 설명: Stack의 children에 2개를 넣으면 “들어오는 대로 겹친다”[^7]

📸 0:22

발표자는 “코드로 보겠다”고 하면서, Stack의 구조를 최소한으로 언급한다.[^7] 핵심은 Stack에 children이 있고, 예시에서는 children이 2개라는 점이다.[^7]

  • “스택 칠드런 2 있구요”라고 하며, Stack이 여러 자식을 담는 컨테이너/레이아웃임을 상기시킨다.[^7]
  • “똑같습니다… 안에 쭉 들어와요”라고 말하는데, 이는 사용 방식이 특별히 복잡한 게 아니라 자식들을 리스트 형태로 넣는 구성임을 강조하는 뉘앙스다.[^7]
  • 그리고 “들어오는 때 걔들이 겹친다”라는 표현으로, children에 배치된 위젯들이 Stack 내부에서 겹치는 방식으로 그려진다는 동작을 정리한다.[^8]

[? 질문] Stack에서 children을 여러 개 넣으면 무슨 일이 일어나는가[^8]
[= 답] children으로 들어온 위젯들이 Stack 안에서 겹쳐진 상태로 배치/표시된다는 설명을 준다.[^8]

[!NOTE] 이 영상 클립에서의 코드 설명 범위
구체적인 Positioned 정렬, alignment, fit 같은 세부 옵션은 다루지 않고, “children에 넣으면 겹친다”는 원리를 소개하는 선에서 멈춘다.[^7][^8]

3.5 결론: “겹치는 화면(레이어) 만들 때 Stack을 쓰면 된다”[^9]

📸 0:31

마지막으로 발표자는 다시 Row/Column과 대비해 결론을 내린다.[^9][^10]

  • Column은 “겹칠 수 없는” 레이아웃이라는 성격을 다시 한번 언급한다.[^9]
  • 반대로 Stack은 “겹치는 화면을 만들 때” 사용하는 도구로 정리한다.[^10]
  • 즉, 이 클립의 결론은 “겹침이 필요하면 Stack”이라는 선택 기준을 학습자에게 남기는 것이다.[^10]

[c 겹치는(레이어형) UI가 필요하면 Row/Column이 아니라 Stack을 사용한다.][^10]

4. 핵심 통찰[^1]

  1. Stack의 정체성은 “정렬 방식” 이전에 겹침(오버레이) 이다.[^2][^8]
  2. Row/Column은 기본적으로 자식을 겹치지 않게 나열하는 레이아웃이므로, “이미지 위 텍스트” 같은 요구에는 부적합할 수 있다는 대비로 이해가 빨라진다.[^3][^6]
  3. Stack은 children으로 위젯을 넣는 순간, 같은 공간에서 레이어처럼 쌓이는 결과가 나온다는 점이 사용 판단 기준이 된다.[^7][^8]
    • 실행 시사점:
      • 이미지 위에 라벨/뱃지/텍스트를 얹어야 하면 Stack을 먼저 떠올린다.[^6][^10]
      • Row/Column으로 해결하려다 “겹쳐야 하는데 안 된다”고 느끼면 레이아웃 선택을 Stack으로 전환한다.[^3][^10]

참고(콘텐츠 정보)

  • 제목: Flutter 입문. 안드로이드, iOS 개발을 한 번에 #18 Stack
  • 채널: 오준석의 생존코딩
  • 길이: 0분 43초
  • 링크: https://www.youtube.com/watch?v=5DejNWu6-9Q

[^1]: 영상 메타데이터(제목/채널/길이/링크) 및 전체 발화 맥락: “Flutter 입문… #18 Stack”, 오준석의 생존코딩, 0:43, https://www.youtube.com/watch?v=5DejNWu6-9Q
[^2]: @[00:00] “수택 한번 볼게요”, “스택은 그림 보면 대충 감이 오실 텐데 겹칠 수 있어요”
[^3]: @[00:04] “지금 로우 하고 컬럼은 겹치는게 안 됐잖아요”
[^5]: @[00:08] “예를 들면 이미지”
[^6]: @[00:16] “그러나 100 짜리 이미지가 있고 텍스트를 위에다가 이렇게 겹칠 수가 있다라는 거에요”
[^7]: @[00:22] “코드로 볼게요”, “스택 칠드런 2 있구요”, “똑같습니다”, “안에 쭉 들어와요”
[^8]: @[00:28] “들어오는 때 걔들이 겹친다”
[^9]: @[00:31] “컬럼은 겹칠 수 없는…”
[^10]: @[00:40] “겹치는 화면을 만들 때 사용하시면 된다고 보시면 됩니다”

← 프로젝트에서 보기