[Flutter 트랙] 앱개발 종합반 2-13 - 대표적인 위젯 분석

이번 시간에는 대표적인 앱 화면을 플러터 위젯으로 해석하는 방법에 대해 살펴보겠습니다.

대중적인 앱들은 사용자 경험(UX)과 UI 설계에 많은 고민이 반영된 결과물입니다. 이러한 앱의 화면을 플러터로 구현할 수 있도록 분석하는 연습을 진행하겠습니다.

1. 틱톡(TikTok) UI 분석

틱톡의 메인 화면은 다음과 같은 요소로 구성됩니다:

• 페이지 뷰(PageView): 위아래로 스와이프하여 동영상을 전환.
• AppBar: 상단의 고정된 팔로잉/추천 탭과 검색 아이콘.
• Row: 상단의 팔로잉과 추천 메뉴는 가로 정렬.
• GestureDetector: 탭 메뉴를 클릭할 수 있도록 설정.
• Stack & Positioned: 화면 위에 겹쳐진 요소(좋아요, 댓글, 공유 버튼 등).
• Column: 동영상 설명과 사용자 정보 정렬.

PageView(
  scrollDirection: Axis.vertical,
  children: [
    Stack(
      children: [
        VideoPlayerWidget(),
        Positioned(
          bottom: 50,
          left: 10,
          child: Column(
            children: [
              Text("사용자 이름"),
              Text("동영상 설명"),
            ],
          ),
        ),
        Positioned(
          bottom: 50,
          right: 10,
          child: Column(
            children: [
              Icon(Icons.favorite),
              Icon(Icons.comment),
              Icon(Icons.share),
            ],
          ),
        ),
      ],
    ),
  ],
)

2. 스레드(Threads) UI 분석

스레드는 메타(Meta)에서 출시한 소셜 미디어 앱입니다.

• ListView: 타임라인 형식으로 피드를 나열.
• Row: 상단의 헤더(프로필, 로고, 버튼 등)는 가로 정렬.
• Column: 글과 이미지를 위아래 정렬.
• Avatar & GestureDetector: 프로필 사진 클릭 가능.
• Divider: 피드 구분선 추가.

ListView(
  children: [
    Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Text("Threads"),
        Icon(Icons.add),
      ],
    ),
    Divider(),
    Column(
      children: [
        Row(
          children: [
            AvatarWidget(),
            Column(
              children: [
                Text("사용자 이름"),
                Text("게시글 내용"),
              ],
            ),
          ],
        ),
        Image.network("이미지_URL"),
        Row(
          children: [
            Icon(Icons.favorite),
            Icon(Icons.comment),
            Icon(Icons.share),
          ],
        ),
      ],
    ),
  ],
)

3. 알람(Clock) UI 분석

iOS의 알람 앱을 플러터로 해석해 보겠습니다.

• SingleChildScrollView: 전체 화면이 스크롤 가능.
• AppBar: 상단의 시간 표시 및 설정 버튼.
• Column: 알람 목록을 위아래로 정렬.
• Row: 각 알람 항목을 가로 정렬.
• Switch: 알람 ON/OFF 기능.

SingleChildScrollView(
  child: Column(
    children: [
      AppBar(
        title: Text("알람"),
        actions: [Icon(Icons.add)],
      ),
      Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text("07:00 AM"),
              Text("매일 반복"),
            ],
          ),
          Switch(value: true, onChanged: (val) {}),
        ],
      ),
      Divider(),
    ],
  ),
)

4. UI 해석 방법 정리

• 스크롤 가능 여부: ListView 또는 PageView 사용.
• 고정된 상단/하단: AppBar 또는 Stack 활용.
• 가로 정렬: Row 사용.
• 세로 정렬: Column 사용.
• 버튼, 클릭 이벤트: GestureDetector 활용.
• 겹쳐진 UI: Stack과 Positioned 활용.

➡️ 다음 시간에는 직접 스레드 앱과 알람 앱을 플러터로 구현해보겠습니다.