심플한 메모 UI 구성 — 감성적인 디자인으로 시작하기

메모 앱은 가장 단순하지만, 그래서 더 섬세해야 하는 앱이다.
복잡한 기능보다 중요한 건 직관적인 UI와 감성적인 화면 구성이다.

이번 글에서는 Flutter로 심플하면서도 감성적인 메모 UI를 어떻게 구성할 수 있을지 실제 코드와 함께 알아본다.

---

🧱 기본 구조는 이렇게

메모 앱의 가장 기본은 “메모 리스트 + 새 메모 작성”이다.
우선 Scaffold 기반으로 심플한 카드형 메모 리스트 UI를 구성해보자.

class MemoHomeScreen extends StatelessWidget {
  final List<String> memoList = [
    "오늘의 다짐: Flutter 열심히 하기!",
    "할 일: 블로그 쓰기, 운동하기, 커피 사기"
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("나의 메모장")),
      body: ListView.builder(
        padding: EdgeInsets.all(16),
        itemCount: memoList.length,
        itemBuilder: (context, index) {
          return MemoCard(content: memoList[index]);
        },
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: () {
          // 새 메모 작성 화면 이동
        },
      ),
    );
  }
}

---

📝 감성적인 카드 UI 구성

단순한 Container 대신 Card와 Elevated Shadow 효과를 사용해 따뜻한 느낌을 더해보자.

class MemoCard extends StatelessWidget {
  final String content;
  const MemoCard({super.key, required this.content});

  @override
  Widget build(BuildContext context) {
    return Card(
      margin: EdgeInsets.only(bottom: 12),
      elevation: 3,
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
      color: Colors.amber.shade50,
      child: Padding(
        padding: const EdgeInsets.all(16),
        child: Text(
          content,
          style: TextStyle(fontSize: 16, fontFamily: 'NotoSans'),
        ),
      ),
    );
  }
}

부드러운 배경색과 둥근 테두리는 감성 앱의 필수 요소다.
폰트나 컬러에 살짝만 신경 써도 전체 인상이 바뀐다.

---

🎨 디자인 팁

• 앱 전체 테마를 ThemeData로 정리하기
• 폰트는 google_fonts로 통일감 있게 적용
• 다크 모드도 함께 고려하기

theme: ThemeData(
  fontFamily: 'NotoSans',
  scaffoldBackgroundColor: Color(0xFFFDF6EC),
  textTheme: TextTheme(bodyMedium: TextStyle(color: Colors.brown)),
)

---

📱 새 메모 작성 버튼

FloatingActionButton은 메모 앱에 어울리는 인터랙션이다.
하단 오른쪽 + 버튼을 통해 새 메모 작성 페이지로 연결될 수 있도록 구성한다.

FloatingActionButton(
  backgroundColor: Colors.orange,
  onPressed: () {
    Navigator.push(
      context,
      MaterialPageRoute(builder: (_) => NewMemoScreen()),
    );
  },
  child: Icon(Icons.edit, color: Colors.white),
)

---

🧘 마무리하며

감성 앱은 거창한 애니메이션보다 조용한 배경, 따뜻한 색감, 깔끔한 여백에서 시작된다.
Flutter로 만드는 메모 앱의 첫걸음은 그렇게 시작하면 충분하다.

“쓰고 싶은 마음”을 UI로 표현하자.

✍️ 이 글은 터미널 밖으로 나온 개발자의 Flutter 메모 앱 만들기 여정입니다.