명함 사진 파일 관리 웹앱/스마트폰앱 개발기

소개

명함 사진 파일을 관리하는 웹앱을 Replit으로 만들고, 하이브리드 웹앱으로 만들어서 스마트폰에 설치해보고 싶었습니다.

진행 방법

Figma Make로 디자인한 명함 사진 관리 사이트에 Replit으로 기능을 넣었습니다.

ALT

장미가있는 명함

이렇게 명함 사진을 올리면 자동으로 사진의 글자를 인식해서 DB에 저장하기까지 이런 프롬프트를 썼습니다.

우선 사진 파일을 관리할 파일 서버를 만들었습니다.

ALT

한국어 텍스트가있는 화면 스크린 샷

사진 파일의 연락처를 인식해서 DB에 넣는 부분은 gpt4o를 썼습니다.

OpenAI API Key가 필요했습니다. env파일을 만들고 할 것 없이 Replit에서 입력 폼을 주었고

거기에 넣은 키는 이렇게 Replit에서 안전하게 보관이 됩니다.

이제 기능을 대강 만들었으니 배포해야 하는데, 백엔드가 붙은 프로그램 배포에서 문제가 생겼습니다.

이것도 Replit Agent가 수정해줬습니다.

아무리 해도 안되길래, 이런 프롬프트를 썼습니다.

ALT

한국 문자 메시지의 스크린 샷

그래도 문제가 하나 남았는데 Replit Agent가 그만두네요. 남은 문제도 수정 요청합니다.

ALT

화면에 한국어 텍스트의 스크린 샷

결국 배포 성공했네요.. 후아..

https://rose-ai.replit.app/

여기에 배포했습니다.

이제 이 웹 사이트를 하이브리드 웹앱으로 만들어야죠.

Flutter를 썼습니다.

https://docs.flutter.dev/get-started/install/windows/mobile

Fltutter 설치는 이 곳을 참고했습니다.

VS Code Extension을 설치해서 커서에서 작업했습니다.

빈 Flutter 프로젝트를 하나 만든 다음에 아래와 같은 작업으로 간단히 스마트폰에 설치 가능한 apk 파일을 만들었습니다.

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

void main() {
  runApp(const MaterialApp(home: WebViewApp()));
}

class WebViewApp extends StatefulWidget {
  const WebViewApp({Key? key}) : super(key: key);

  @override
  State<WebViewApp> createState() => _WebViewAppState();
}

class _WebViewAppState extends State<WebViewApp> {
  late final WebViewController controller;

  @override
  void initState() {
    super.initState();
    controller = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..loadRequest(Uri.parse('https://rose-ai.replit.app'));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter WebView'),
      ),
      body: WebViewWidget(controller: controller),
    );
  }
}

flutter build apk --release

이렇게 빌드했는데 오류가 나서 커서가 수정해줬습니다.

결국 apk 파일을 얻는 데 성공했습니다. 설치 파일이라서 파일 전송이 안 될 수 있으니 ap로 확장자를 수정하고, 휴대폰에 전송 후 다시 apk로 고칩니다. 설치해봤습니다.

business_card_manager라는 이름의 앱으로 설치되었습니다. 잘 열립니다. Flutter WebView라는 앱 이름은 좀 수정해야겠네요.

결과와 배운 점

하이브리드 웹 앱으로 만들어서 휴대폰에 설치했으니, 이제 휴대폰 앱을 개발해야 할 차례입니다.

사진 스캔 기능을 개발해야 합니다. 하이브리드 웹앱이기 때문에 휴대폰 네이티브 기능을 넣을 수 있어요. Flutter를 공부해서 넣어야겠습니다.

아마도 방학 때나 다음 기수에.. (커밍쑨..)