Text 위젯 마스터

Text는 화면에 텍스트를 표시하는 가장 기본적인 위젯입니다. 웹에서 HTML의 텍스트 태그들과 비슷한 역할을 하지만, 더 강력한 스타일링 옵션을 제공합니다.

🎯 학습 목표

이 튜토리얼을 마치면 다음을 할 수 있게 됩니다:

  • 텍스트 크기와 색상 조정하기
  • 폰트 굵기와 스타일 변경하기
  • 텍스트 정렬과 줄바꿈 처리하기
  • 제목과 라벨 등 다양한 텍스트 컴포넌트 만들기

📚 기본 개념

Text 위젯의 구조

Text("표시할 텍스트", {
  style: new TextStyle({
    // 스타일 옵션들
  }),
  textAlign: TextAlign.center,  // 정렬
  maxLines: 2          // 최대 줄 수
})

TextStyle의 주요 속성

  1. fontSize: 글자 크기 (숫자)
  2. fontWeight: 글자 굵기 (‘bold’, ‘normal’ 등)
  3. color: 글자 색상 (문자열)
  4. fontStyle: 글자 스타일 (‘italic’, ‘normal’)

🚀 실습 1: 기본 텍스트 스타일링

가장 기본적인 텍스트 스타일부터 시작해봅시다.

import { Text, TextStyle } from "@meursyphus/flitter";

// 기본 텍스트
const basicText = Text("안녕하세요!");

// 스타일이 적용된 텍스트
const styledText = Text("멋진 텍스트", {
  style: new TextStyle({
    fontSize: 20,
    color: '#FF5722'
  })
});

💻 연습해보기

  1. fontSize를 다양하게 변경해보세요 (12, 16, 24, 32 등)
  2. 색상을 바꿔보세요 (예: '#2196F3', '#4CAF50', '#9C27B0')
  3. 텍스트 내용을 변경해보세요

🚀 실습 2: 폰트 굵기와 스타일

텍스트를 더 강조하거나 장식하는 방법을 배워봅시다.

import { Text, TextStyle, Column } from "@meursyphus/flitter";

const fontWeightExample = Column({
  children: [
    Text("일반 텍스트", {
      style: new TextStyle({
        fontSize: 18,
        fontWeight: 'normal'
      })
    }),
    Text("굵은 텍스트", {
      style: new TextStyle({
        fontSize: 18,
        fontWeight: 'bold'
      })
    }),
    Text("기울임 텍스트", {
      style: new TextStyle({
        fontSize: 18,
        fontStyle: 'italic'
      })
    }),
    Text("굵은 기울임", {
      style: new TextStyle({
        fontSize: 18,
        fontWeight: 'bold',
        fontStyle: 'italic'
      })
    })
  ]
});

fontWeight 옵션

  • 'normal': 일반 굵기
  • 'bold': 굵게
  • '100', '200', …, '900': 숫자로 세밀한 조정

💻 연습해보기

  1. 다양한 fontWeight 값을 시도해보세요
  2. fontStyle과 fontWeight를 조합해보세요
  3. 같은 텍스트를 다른 스타일로 여러 번 표시해보세요

🚀 실습 3: 텍스트 정렬

텍스트의 정렬 방법을 배워봅시다.

import { Text, TextStyle, Container, Column, BoxDecoration, TextAlign } from "@meursyphus/flitter";

const textAlignExample = Column({
  children: [
    Container({
      width: 300,
      decoration: new BoxDecoration({ color: '#F5F5F5' }),
      child: Text("왼쪽 정렬", {
        textAlign: TextAlign.left,
        style: new TextStyle({ fontSize: 16 })
      })
    }),
    Container({
      width: 300,
      decoration: new BoxDecoration({ color: '#F5F5F5' }),
      child: Text("가운데 정렬", {
        textAlign: TextAlign.center,
        style: new TextStyle({ fontSize: 16 })
      })
    }),
    Container({
      width: 300,
      decoration: new BoxDecoration({ color: '#F5F5F5' }),
      child: Text("오른쪽 정렬", {
        textAlign: TextAlign.right,
        style: new TextStyle({ fontSize: 16 })
      })
    })
  ]
});

textAlign 옵션

  • TextAlign.left: 왼쪽 정렬
  • TextAlign.center: 가운데 정렬
  • TextAlign.right: 오른쪽 정렬
  • TextAlign.start: 시작 방향 정렬 (LTR에서는 왼쪽, RTL에서는 오른쪽)
  • TextAlign.end: 끝 방향 정렬 (LTR에서는 오른쪽, RTL에서는 왼쪽)

💻 연습해보기

  1. 각 정렬 옵션을 시도해보세요
  2. Container의 크기를 변경해서 정렬 효과를 확인해보세요
  3. 긴 텍스트로 정렬 차이를 확인해보세요

🚀 실습 4: 줄바꿈과 말줄임

긴 텍스트를 처리하는 방법을 배워봅시다.

import { Text, TextStyle, Container, Column, BoxDecoration, TextAlign } from "@meursyphus/flitter";

const longTextExample = Column({
  children: [
    // 최대 2줄까지
    Container({
      width: 200,
      decoration: new BoxDecoration({ color: '#E3F2FD' }),
      child: Text("이것은 매우 긴 텍스트입니다. 여러 줄에 걸쳐서 표시될 것입니다.", {
        maxLines: 2,
        overflow: 'ellipsis',
        style: new TextStyle({ fontSize: 14 })
      })
    }),
    // 줄바꿈 없이 한 줄
    Container({
      width: 200,
      decoration: new BoxDecoration({ color: '#FFF3E0' }),
      child: Text("이것은 한 줄로만 표시되는 긴 텍스트입니다.", {
        maxLines: 1,
        overflow: 'ellipsis',
        style: new TextStyle({ fontSize: 14 })
      })
    })
  ]
});

텍스트 오버플로우 옵션

  • 'clip': 잘라서 숨김
  • 'ellipsis': ... 표시
  • 'fade': 점점 투명하게

💻 연습해보기

  1. maxLines 값을 바꿔보세요 (1, 3, 5 등)
  2. 다른 overflow 옵션을 시도해보세요
  3. Container 크기를 조정해서 효과를 확인해보세요

🚀 실습 5: 실전 텍스트 컴포넌트 만들기

지금까지 배운 내용으로 실제 앱에서 사용할 텍스트 컴포넌트들을 만들어봅시다.

import { Text, TextStyle, Container, Column, BoxDecoration, EdgeInsets } from "@meursyphus/flitter";

// 헤더 제목
const headerTitle = Text("Flitter 앱", {
  style: new TextStyle({
    fontSize: 28,
    fontWeight: 'bold',
    color: '#1976D2'
  })
});

// 부제목
const subtitle = Text("Flutter 스타일의 웹 프레임워크", {
  style: new TextStyle({
    fontSize: 16,
    color: '#757575',
    fontStyle: 'italic'
  })
});

// 본문 텍스트
const bodyText = Text("Flitter는 Flutter에서 영감을 받은 웹 프레임워크입니다. 선언적 UI와 강력한 렌더링 엔진을 제공합니다.", {
  style: new TextStyle({
    fontSize: 14,
    color: '#424242',
    height: 1.5  // 줄 간격
  }),
  maxLines: 3
});

// 강조 라벨
const highlightLabel = Container({
  decoration: new BoxDecoration({
    color: '#FF5722',
    borderRadius: BorderRadius.circular(4)
  }),
  padding: EdgeInsets.symmetric({ horizontal: 8, vertical: 4 }),
  child: Text("NEW", {
    style: new TextStyle({
      fontSize: 12,
      fontWeight: 'bold',
      color: '#FFFFFF'
    })
  })
});

const textShowcase = Column({
  crossAxisAlignment: 'start',
  children: [
    headerTitle,
    subtitle,
    bodyText,
    highlightLabel
  ]
});

💻 연습해보기

  1. 각 텍스트의 스타일을 변경해보세요
  2. 다른 색상 조합을 시도해보세요
  3. 새로운 텍스트 컴포넌트를 추가해보세요

🎨 실습 6: 카드 안의 텍스트 레이아웃

실제 카드 컴포넌트에서 텍스트들을 적절히 배치해봅시다.

import { Text, TextStyle, Container, Column, Row, BoxDecoration, EdgeInsets, BorderRadius, Border } from "@meursyphus/flitter";

const productCard = Container({
  decoration: new BoxDecoration({
    color: '#FFFFFF',
    border: Border.all({ color: '#E0E0E0', width: 1 }),
    borderRadius: BorderRadius.circular(12)
  }),
  padding: EdgeInsets.all(16),
  child: Column({
    crossAxisAlignment: 'start',
    children: [
      // 제품명
      Text("iPhone 15 Pro", {
        style: new TextStyle({
          fontSize: 20,
          fontWeight: 'bold',
          color: '#212121'
        })
      }),
      // 가격
      Text("₩1,350,000", {
        style: new TextStyle({
          fontSize: 18,
          fontWeight: 'bold',
          color: '#FF5722'
        })
      }),
      // 설명
      Text("최신 A17 Pro 칩과 혁신적인 카메라 시스템을 갖춘 프리미엄 스마트폰입니다.", {
        style: new TextStyle({
          fontSize: 14,
          color: '#616161',
          height: 1.4
        }),
        maxLines: 2
      }),
      // 상태 표시
      Row({
        children: [
          Text("재고 있음", {
            style: new TextStyle({
              fontSize: 12,
              color: '#4CAF50',
              fontWeight: 'bold'
            })
          })
        ]
      })
    ]
  })
});

💻 연습해보기

  1. 다른 제품 정보로 카드를 만들어보세요
  2. 텍스트 색상과 크기를 조정해보세요
  3. 추가 정보를 표시하는 텍스트를 넣어보세요

⚠️ 흔한 실수와 해결법

1. TextStyle 생성 실수

// ❌ 잘못된 방법
style: { fontSize: 16 }  // 객체 직접 사용 금지!

// ✅ 올바른 방법
style: new TextStyle({ fontSize: 16 })

2. 색상 값 실수

// ❌ 잘못된 방법
color: 0xFF000000,    // 숫자 형식 금지!

// ✅ 올바른 방법
color: '#000000',     // 문자열 형식 사용
color: 'black',       // CSS 색상명도 가능

3. 임포트 누락

// ❌ TextStyle 임포트 없이 사용
style: new TextStyle({ fontSize: 16 })  // 에러!

// ✅ 올바른 임포트
import { TextStyle } from "@meursyphus/flitter";

🏆 도전 과제

다음 요구사항을 만족하는 뉴스 카드를 만들어보세요:

  1. 헤드라인: 큰 굵은 제목 (fontSize: 18, bold)
  2. 부제목: 작은 회색 텍스트 (fontSize: 14, 회색)
  3. 날짜: 오른쪽 정렬된 작은 텍스트
  4. 본문: 2줄까지만 표시, 말줄임 적용
  5. 카테고리 태그: 작은 배경색 있는 라벨

📖 다음 단계

Text 스타일링을 익혔다면 이제 여러 위젯을 배치하는 방법을 배워봅시다!

🎯 다음 튜토리얼: Row와 Column 레이아웃
여러 위젯을 가로세로로 나란히 배치하는 방법을 익혀보세요.