15분 만에 완성? 버스 안에서 만든 우리 회사 홈페이지

제가 속한 leanIT라는 회사는 남편과 제가 함께 운영하는 작은 개발자 부부 회사입니다. 그래서 사실, 홈페이지를 거창하게 만들 필요는 없었어요.

그저 고객들에게 "우리 유령회사 아니예요" 라고 보여주는게 목적이였습니다. 그래서 3-4년 전에 AI도구가 활성화 되기 전, 최대한 깔끔하게 만들되 디자인이 따로 필요없는 워드프레스를 선택했습니다. 워드프레스는 로우코드 기반으로 템플릿이 많아서 디자이너가 없는 저희 회사에는 딱이였지만, 그래도 며칠은 꼬박 걸렸던 것이 생각납니다.

저희 홈페이지를 다시 만들게 된 건, 지피터스 오프모임에서 있었던 한 사례 발표 때문이었습니다. 수의사이신 민경준님이 "강아지 영양제 추천 서비스"를 20분만에 만드셨다고 해서 반신반의 했었어요.

노코드 툴에서 제가 가장 걱정했던 것은, 확장성이 있느냐 하는 것이였습니다. 요즘 나오는 노코드 툴 많지만, 처음엔 잘 만들어주지만, 거기에 기능을 붙이거나, 유지보수를 하기에 용이한가? 하는 의문이 항상 있었거든요.

그런데 이번엔 좀 다릅니다. 놀랍게도, lovable이라는 도구 하나로 끝났습니다.


진행 방법

  1. 제가 lovable에게 알려준 것들

    • 회사에 대한 정보: leanIT (AI/IT 서비스, 교육 제공)

    • key 컬러 : #1a997f

    • 홈페이지 주요 기능:

      • 회사 소개

      • 서비스 설명

      • 플로팅 바(문의하기)

      • 한글로 작성. 폰트는 프리텐다드로

      • 모바일에서도 잘 동작하는 반응형웹

  2. 진짜 15분 만에 완성?!

    • 참고로 저는 모바일에서 만들었어요. 사무실에서 4시에 퇴근하자마자 요청해서, 회사-집까지 15분 정도. 집에 도착하기 전에 이미 홈페이지는 다 만들어져 있었고, 도착해서 손 닦고 노트북 켜서 Git 연동하고 VS Code로 편집환경 만드는데까지 딱 30분 걸렸습니다.

  3. 깜짝 놀란 포인트

    • 처음엔 영어로 나와서 VS Code에서 직접 번역했는데, 알고 보니 그냥 대화창에 "한글로 만들어줘"라고 하면 됐더라고요. 1시간 번역한 나 자신 반성해...

    • Git 연동까지 지원해서, 기존 no-code/low-code 툴과는 차원이 다름.

    • 플로팅 바, 다국어 지원(번역이 되다 말긴했지만) 가능

  4. 추가 실험도 해봤어요

    • 더 다양한 디자인을 보고 싶어서 다른 계정으로 2번 더 테스트했지만... 처음 만들어준 게 제일 괜찮더라고요. (디자인은 사실.. 여러번 돌려봤자 거기서 거기예요. 그냥 처음에 만들어준거에서 부족한 부분을 대화하면서 채우는게 나을 것 같아요)

    • 디자인이 아주 다양하진 않지만, 기본적으로 깔끔하고, 키 컬러도 반영해줘서 좋았어요

    • 대화할 때 파일 업로드가 있길래 저희 회사 로고를 올려봤는데, 음.. 유치원생이 따라그린것 같은 이미지로 로고를 넣어줬어요 ㅋㅋ


      <원래 로고>

      IT 장점 로고를 기울이십시오

      <lovable이 만들어준거>

      IDDI의 로고는 흰색 배경에 표시됩니다.

      나름 비슷한가요? ㅋㅋ

    • 로컬에서 실행시킬 때, 아래와 같은 에러가 나면, 해당 레포지토리 접근에 대해서 접근할 수 있는 권한이 없는거예요.

      바코드가있는 검은 배경

      그럴 때는, 해당 repository의 settings에서 아래 visibility를 public으로 바꿔주면 잘 됩니다

      위험 구역�을 보여주는 페이지의 스크린 샷

결과와 배운 점

  • 워드프레스 vs lovable?

    • 워드프레스: 템플릿 많고 기능 많지만, 만드는 데는 며칠씩 걸림

    • lovable: 템플릿은 제한적이지만, 속도는 비교 불가!

    • 필요한 이미지와 아이콘도 적절히 넣어줘서 충분히 쓸만합니다.

    • Github에 바로 연동되는건 정말.. 감격적이예요.

  • 프롬프트 한 줄이 이렇게 강력할 줄이야!

    • 처음부터 "한글로 만들어줘"라고 했으면 시간을 더 아낄 수 있었어요.

    • 만들려는 회사의 정보를 자세히 주면 꽤 잘 반영해줍니다

  • 백엔드도 필요하다면?

    • Supabase 같은 백엔드 도구와 연결도 고려해볼 수 있을 것 같아요. 확장성에 대한 걱정도 이제는 안녕~

마지막으로,

만들어진 저희 회사 홈페이지를 소개하고 갑니다. lovable 덕분에 워드프레스 호스팅하던 것도 끊고, 자체 저희 서버에 올리기로 이야기해서 도메인 연결까지는 조금 시간이 걸릴거예요.
그리고 내용도 다 lovable이 써준거라, 회사 로고도 바꿔야하고.. 자잘하게 고칠게 은근 많아요 ㅋㅋㅋ 사례글 작성 끝나면 하나씩 작업해보려고 합니다

https://leanit-home-hub.lovable.app/

읽어주셔서 감사합니다^^


도움 받은 글



8
2개의 답글

👉 이 게시글도 읽어보세요