프론트개발자가 아니지만, 프론트 개발을 해야할 때?
저는 백엔드 개발을 주로 했었기 때문에 항상(?) 단순 HTML 하드 코딩이 아닌 프론트엔드 영역의 “프레임워크”에 관심이 조금 있었는데요. 최근 ChatGPT를 이용해서 Flutter 프론트엔드 개발을 해본 경험을 공유하려 합니다.
프론트엔드 개발 선택하기
어떤 언어와 프레임워크로 개발할 것인가?
그동안 Swift, Vue, Kotlin, Dart 등 다양한 언어와 프레임워크를 찍먹(?)하면서 느낀 점 중 하나는 전문가 수준이 아니어도 기본적인 언어에 대한 공부를 했다면 충분히 해볼 수 있다 입니다.
그 중에서 제가 선택한 언어와 프레임워크는 Dart/Flutter 입니다. 그 이유는 제가 가장 관심있었던 개발 철학 중 하나인 “재사용성” 그리고 “One Source Multi Platform” 입니다.
즉, 하나의 코드로 여러가지 플랫폼을 동시에 개발이 가능하기 때문입니다.
GPT에게 Flutter와 Dart 에 대해서 물어보자
이제 본격적으로 Flutter 기반 App을 만들어보겠습니다.
ChatGPT에게 질의하기
상당히 구체적으로 질의를 했었습니다. 주요 관점은,
비전문가에게 설명할 수 있을 정도(?)로 질문을 하는 것
또한 버튼 색상이며 어떤 데이터가 들어가는지, 또 어떤 플로우로 작동하는지에 대해 구체적으로 명시하는 것 입니다. 우선 큰 틀에서 먼저 질의를 하고 GPT로부터 코드를 전달 받은 뒤 구체적으로 기능을 고도화하는 방향으로 잡아보았습니다.
물론 전달 받은 코드를 이해하기 위해서는 “최소한의 경험”은 필수라 보여집니다. ChatGPT와 함께 개발을 하면서 정상적으로 작동되지 않은 부분에 대해 보다 심도있게 질의하고 티키타카(?)를 이어나가다 보면 내가 원하는 기능을 만들 수 있게 됩니다.
App 에서 사용하는 색상 정리해줘!
import 'package:flutter/material.dart';
class CustomColors {
// Primary colors
static const Color keyColorLighter = Color(0xFFF8F9FF);
static const Color keyColorLight = Color(0xFFE7ECFF);
static const Color keyColor = Color(0xFF829DFD);
static const Color keyColorDark = Color(0xFF416BFF);
static const Color keyColorDarker = Color(0xFF1E3BA1);
// Secondary colors
static const Color pointColor = Color(0xFF829DFD);
// Grayscale colors
static const Color white = Color(0xFFFFFFFF);
static const Color light = Color(0xFFF5F4F5);
static const Color lighthover = Color(0xFFEFEFF0);
static const Color lightactive = Color(0xFFDFDEE1);
static const Color normal = Color(0xFF97959E);
static const Color normalhover = Color(0xFF88868E);
static const Color normalactive = Color(0xFF79777E);
static const Color dark = Color(0xFF717077);
static const Color darkhover = Color(0xFF444347);
static const Color darkactive = Color(0xFF353437);
static const Color black = Color(0xFF000000);
// Feedback colors
static const Color error = Color(0xFFB3261E);
static const Color errorContainer = Color(0xFFF9DEDC);
static const Color errorContainerText = Color(0xFF410E0B);
static const Color info = Color(0xFF00BAD1);
static const Color infoContainer = Color(0xFFCCF1F6);
static const Color infoContainerText = Color(0xFF008C9D);
static const Color successText = Color(0xFF416BFF);
// Other colors
static const Color calendarToday = Color(0xFFFF6B00);
static const Color calendarSelected = Color(0xFF1C6DA1);
static const Color calendarDefault = Color(0xFFDFEAFF);
static const Color subBg = Color(0xFFFFFAFF);
static const Color subBg02 = Color(0xFFFDEEFF);
}FE 개발자분들과 디자이너분들과 함께 일하다보면, “디자인 시스템”에 대해서 설계를 하고 작업을 하는 것을 종종 보았습니다. 저도 똑같이 GPT에게 도움을 요청하니 바로 코드를 받을 수 있었습니다.
아 모르겠다! 디버깅해줘!
네 무식하지만, 간편하게도 가능합니다. 코드 부분을 압축해서 GPT에게 디버깅을 요청합니다. 중복된 코드와 오류난 부분을 알아서 잘 디버깅해서 전달해줍니다.
이렇게 작업하면 얼마나 시간을 줄일 수 있을까?
🪄 ChatGPT가 나오기 전과 후로 엄청난 차이를 보여준다.
ChatGPT 덕분에 이제는 구글링(Stackoverflow)에 더 이상 물어보지 않게 되었습니다. 내가 궁금한 부분과 디버깅이 어려운 부분을 ChatGPT와 함께 정말 빠르게 구현할 수 있기 때문입니다. 혹여 추가로 어떤 기능을 붙여야 할 때, 전체 코드를 전달해 특징과 설명을 보다 구체적으로 한다면 정말 빠르게 수정하고 업데이트할 수 있게 되었습니다.
ChatGPT와 아이디어만 있다면, 그리고 최소한의 개발 경험만 있다면, 누구나 쉽게 개발을 시작해볼 수 있지 않을까? 생각이 듭니다.
[다음글]