프로토타입 개발 시작

Soojeong Lee

2025. 7. 1.

Soojeong Lee

2025. 7. 1.

Soojeong Lee

2025. 7. 1.

프로토타입 개발 시작

템플렛으로 빨리 디자인 잡기

시작은 쉬웠다. 템플릿을 미리 만들어놔서.

예전에 어떤 분이 템플렛을 미리 만들어놓으면 개발 시작이 쉬워진다는 말을 듣고, 시간 내서 Nextjs랑 Flutter 시작 템플렛을 미리 만들어놨다.

Nextjs: https://github.com/MontyCoder0701/nextjs-starter
Flutter: https://github.com/MontyCoder0701/flutter-starter

진심 정말로 하길 잘한것 같다. 이거 하나 해놓으니 시작에 시간이 안걸려서 바로 추진 되니 기분이 좋다.

개인적으로 남이 만들어 놓은 템플렛은 잘 안쓰게 되는것 같다. 내것을 직접 만들어놓으니 내 코딩스타일이나 유지보수 얼마나 되었는지 알아 내려받아 바로 적용하기 좋은 것 같다.

요걸 깃헙 템플렛으로 만들어놓으면 아주 쉽게 프로젝트 시작이 가능하니 제발 제발 하시길.

색상 테마 적용하기

이전 글에 미리 정해둔 색상 팔레트가 있으니 그대로 테마에 적용하면 된다.

내가 만들어놓은 템플렛도 미리 테마 분리를 다 해놓아서 색상 팔레트 지정이 아주 쉽다.

import 'package:flutter/material.dart';

class CustomTheme {
  static final light = ThemeData(
    colorScheme: ColorScheme.fromSeed(
      seedColor: Colors.deepPurple,
      brightness: Brightness.light,
    ),
  );

  static final dark = ThemeData(
    colorScheme: ColorScheme.fromSeed(
      seedColor: Colors.deepPurple,
      brightness: Brightness.dark,
    ),
  );
}

요기에 이제 내 색상 팔레트를 적용하면 된다.

import 'package:flutter/material.dart';

class CustomTheme {
  static final light = ThemeData(
    colorScheme: ColorScheme.fromSeed(
      seedColor: const Color(0xFFF0BB78),
      brightness: Brightness.light,
      primary: const Color(0xFFF0BB78),
      secondary: const Color(0xFF543A14),
      onPrimary: Colors.white,
      onSecondary: Colors.white,
      onSurface: Colors.black,
    ),
  );

  static final dark = ThemeData(
    colorScheme: ColorScheme.fromSeed(
      seedColor: const Color(0xFFF0BB78),
      brightness: Brightness.dark,
      primary: const Color(0xFFF0BB78),
      secondary: const Color(0xFF543A14),
      surface: const Color(0xFF131010),
      onPrimary: Colors.black,
      onSecondary: Colors.white,
      onSurface: Colors.white,
    ),
  );
}

결과물은 이정도다. 계속 미세조정하며 이상한 부분은 바꿀 예정이다.

첫 페이지 추가

앞서 말했듯이, 제일 중요한 기능은 소중한 추억을 간직하는 것이다. 이를 위해서 갤러리 형태의 UI가 가장 직관적이라고 생각한다. 그래서 첫 페이지에서는 갤러리 형태의 몇가지 사진을 바로 보여주는 card와 grid 컴포넌트를 사용하기로 했다.

body: ListView.builder(
  padding: const EdgeInsets.all(16),
  itemCount: 1,
  itemBuilder: (context, index) {
    return InkWell(
      onTap: () {},
      borderRadius: BorderRadius.circular(12),
      child: Card(
        margin: const EdgeInsets.only(bottom: 16),
        elevation: 4,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(12),
        ),
        child: Padding(
          padding: const EdgeInsets.all(16),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              ListTile(
                contentPadding: EdgeInsets.zero,
                title: const Text('Dad'),
                subtitle: const Text('~ 2025.02.16'),
                trailing: const Icon(Icons.arrow_forward_ios),
              ),
              const SizedBox(height: 12),
              GridView.builder(
                shrinkWrap: true,
                physics: const NeverScrollableScrollPhysics(),
                itemCount: 9,
                gridDelegate:
                    const SliverGridDelegateWithFixedCrossAxisCount(
                      crossAxisCount: 3,
                      mainAxisSpacing: 8,
                      crossAxisSpacing: 8,
                      childAspectRatio: 1,
                    ),
                itemBuilder: (context, i) {
                  return Container(
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(8),
                      color: Colors.grey[300],
                      // TODO: add image
                      // image: DecorationImage(
                      //   image: AssetImage('assets/sample_image.jpg'),
                      //   fit: BoxFit.cover,
                      // ),
                    ),
                  );
                },
              ),
            ],
          ),
        ),
      ),
    );
  },
),

이런 형태로 grid view로 이미지를 보여주기로 했고, 결과는 이런 형태의 화면이다. 여러명의 추억을 담을 수 있는 구조를 기반으로, 추억하려는 사람의 이름, 함께 했던 기간과 갤러리를 담은 리스트 뷰로 마무리 지었다.

여기에 리스트에는 추가하는 동작이 필요하기 때문에 Floating Action Button까지 Scaffold에 간단하게 추가했다.

floatingActionButton: FloatingActionButton(
    child: Icon(Icons.add),
    onPressed: () {},
  ),

마무리를 짓자면 이런 초기 형태다.

갈길은 멀어 보이지만 시작으로는 나쁘지 않은듯.

프레이머 뿌셔보자

Comments