[문과생도n8n]Lovable과 함께하는 웹앱만들기(온라인 명함북)_총정리

1. 인트로 - 왜 이걸 만들게 됐냐고요?

“그냥… Lovable한 실험이었어요”

이번 [문과생도n8n] 스터디에서는 MCP와 Lovable 서비스를 처음으로 접해보았습니다.

박정기 스터디장님의 시연으로 처음 본 Lovable은, 우리에게 익숙한 프롬프트 입력으로 멋진 Web APP을 AI가 만들어주는 편리한 서비스였습니다.

lovable.dev

파란색 배경에 사랑스러운 로고

실습으로 무언가 만들어보는데 책상에 널부러진 명함들을 보며 단순하게 ‘온라인 명함북 한 번 만들어볼까?’생각하고 간단한 프롬프트로 만들어보았어요.

검은 색 화면에서 명함 응용 프로그램의 스크린 샷

그런데.. 진짜 뚝딱 만들어주는 거에요?

그때 드는 생각이 “이거, 진짜 자동화까지 해보면 재밌겠는데?”였습니다.


2. 전체 흐름 요약

“명함 하나 넣어보세요.. 전부 다 해드립니다!”

전체 플로우는 [데이터 수집]과 [데이터 뷰] 두 가지 입니다.

사용 툴

  • n8n : 데이터 수집과 데이터 읽어오기 자동화

  • telegram: 사용자와 커뮤니케이션 창

  • ChatGPT: 명함이미지의 정보를 추출 및 분석 / 바이브코딩

  • Airtable: 데이터 저장소

  • Lovable: 웹 APP 자동생성기!

  • Cursor AI: Lovable로 만든 APP 다듬기


3. n8n 워크플로우 구성

“이게 바로 요즘 대세인 노코드 자동화다!”

워크플로우는 단순하게 데이터 입력용과 읽기용 두 개로 나눴습니다.

<데이터입력 워크플로우>

💡워크플로우 주요 내용 살펴보기

Telegram Trigger 노드

  • 입력되는 메세지의 종류에 따라 분기점을 만들어 워크플로우 순환

  • 이미지가 입력되면 이미지 분석으로.

  • 그 외의 텍스트나 콜백쿼리가 입력되면 값 수정으로.

ChatGPT 이미지 분석 노드

  • 이미지에서 텍스트 내용을 추출하고 JSON객체로 추출하도록 프롬프트 작성(멍멍님 도움)

당신은 명함 OCR 어시스턴트입니다.  
제공된 명함 이미지를 분석하여 아래 필드를 하나의 JSON 객체로 추출하세요:

- name     : 사람의 전체 이름  
- company  : 회사명  
- position : 직책  
- email    : 이메일 주소  
- phone    : 전화번호 (휴대폰 또는 회사)  
- address  : 주소  
- website  : 웹사이트(URL)  
- notes    : 명함에 특별한 내용이 있으면 해당 내용을, 없으면 전체 내용을 간략히 요약

읽을 수 없거나 누락된 필드는 `없음`로 설정하세요.  
반환 값은 **JSON 객체만**, 추가 설명 없이 출력해주세요.
**반환할 때는 절대 코드 블록(markdown fences) 없이, 오로지 순수 JSON만 출력해 주세요.**

예시 출력:
```json
{
  "name":     "홍길동",
  "company":  "주식회사 에이씨엠이",
  "position": "대표이사",
  "email":    "[email protected]",
  "phone":    "02-1234-5678",
  "address":  "서울특별시 중구 세종대로 110",
  "website":  "www.acme.com",
  "notes":    "주력 제품: 친환경 전기차 배터리"
}

Airtable에 입력 전 처리

  • Airtable 컬럼에 attachment 속성의 컬럼 사용: 이미지 url을 넣으면 저장됨

  • http노드로 이미지 받고 이미지 url만들기

  • https://api.telegram.org/file/bot{botToken}/{filePath} 형태의 url 생성

  • 1차적으로 Airtable에 데이터를 저장하고 Status필드 값을 In progress로 지정

🗨️ 텔레그램에서 상호작용

  • 1차적으로 추출된 정보를 사용자에게 보여주고 수정과 완료로 선택을 받음

  • 다시 텔레그램 트리거에서 Callback Query 값을 가지고 수정과 완료로 분기

  • Callback Query는 Airtable 레코드ID값을 함께 넘겨 받아 해당레코드를 구분

🗨️ Human in the loop?

  • 텔레그램 메시지를 단순히 보내고 끝내는 노드가 아닌 사용자의 응답을 받아 상호 작용할 수 있음(박정기 스터디장님의 피드백 참고)

  • 1차 가공된 데이터를 사용자가 수정함

  • 사용자가 수정한 부분과 그렇지 않은 부분을 구분하여 JSON형태로 데이터 수정

const airtable = $items('Airtable2')[0].json; // Airtable에서 읽어온 값
const userForm = $input.first().json.data;    //사용자가 수정한 값

return [{
  json: {
    Name: userForm.Name || airtable.Name,
    Company: userForm.Company || airtable.company,
    Position: userForm.Position || airtable.position,
    Email: userForm.Email || airtable.email,
    Phone: userForm.Phone || airtable.phone,
    Address: userForm.Address || airtable.address,
    Website: userForm.Website || airtable.website,
    Notes: userForm.Notes || airtable.Notes,
    recordId: airtable.id
  }
}];

  • 사용자의 컨펌을 받은 데이터는 Airtable 레코드의 Status 값을 done으로 변경하고 완료

<데이터 읽기 워크플로우>

Code 노드 (Airtable에서 불러온 레코드를 웹상에 뿌리기 위해 JSON가공)

  • 명함 이미지를 <img>태그에 사용할 수 있도록 링크가공

return $input.all().map((item) => {
  const imageKey = Object.keys(item.binary || {}).find(key => key.startsWith('Bizcard'));
  const binaryData = imageKey ? item.binary[imageKey] : null;

  const imageUrl = binaryData
    ? `data:${binaryData.mimeType};base64,${binaryData.data}`
    : null;

  return {
    json: {
      id: item.json.id,
      createdTime: item.json.createdTime,
      Name: item.json.Name,
      Notes: item.json.Notes,
      company: item.json.company,
      position: item.json.position,
      email: item.json.email,
      phone: item.json.phone,
      address: item.json.address,
      website: item.json.website,
      Bizcard: imageUrl, // base64 인코딩된 이미지 URL
    }
  };
});


4. Web APP 구현

  • Lovable로 기본 틀 구현

  • Cursor AI로 레이아웃 및 디자인 수정

  • 배포(docker에 올리고 외부도메인까지~)


6. 마치며

요즘 일에 치여 많은 시간을 할애하지는 못했지만 완성을 했다는 것에 의의를 두며, 역시 시행착오를 겪어야 내것이 된다는 것을 새삼 느낍니다.

지난주 박정기 스터디장님의 피드백을 받고 정보 수정 부분을 원활히 풀어나갈 수 있었고, 이미지 데이터를 저장하고 불러오고 또 웹에 뿌려주는 과정도 좋은 공부가 됐네요.

  • 자동화는 대세다!

  • 자동화툴은 이제는 쉽게 접근할 수 있기에(그 중 n8n이 최고!), 앞으로도 필요에 의해 또는 재미로 개인화된 자동화를 구상해보고 또 구현해가는 경험을 계속 쌓아가겠습니다!

3
4개의 답글

👉 이 게시글도 읽어보세요