전종훈

전종훈님의 아티클

전종훈

전종훈

💡 개발자 없이도 MVP 웹앱을 만들 수 있다고?!

안녕하세요, 노코드(No-Code) 에이전시 노코더스입니다! 🚀

스타트업을 준비하면서 MVP를 빠르게 만들고 싶은데, 개발이 발목을 잡고 있진 않나요?
개발자를 구하기도 어렵고, 직접 배우자니 너무 복잡해 보이고… 😰

그런데 요즘, "코딩 없이도 웹앱을 만들 수 있다!"는 노코드 개발이 떠오르고 있습니다!
과연 비전공자도, 개발 지식 없이도 가능할까요? 🤔


✅ 노코드(No-Code) 개발, 정말 가능할까?

노코드는 코드를 직접 작성하지 않고도 웹앱을 개발할 수 있는 방식입니다.
그중에서도 버블(Bubble)은 드래그 앤 드롭만으로 웹사이트, 서비스, 스타트업 MVP까지 만들 수 있는 강력한 툴이에요.

💡 버블로 만들 수 있는 것들
✔️ 예약, 커뮤니티, 마켓플레이스 등 다양한 웹 서비스
✔️ 개발자 없이 내 아이디어를 MVP로 빠르게 구현
✔️ 투자 유치 전, 시장 반응을 테스트할 수 있는 프로토타입 제작

"아! 그렇구나! 버블이라면 나도 웹앱을 만들 수 있겠네!"


🤯 그런데, 버블이 쉽다면서 왜 어렵다는 거지?

저도 처음엔 버블이 어렵게 느껴졌어요. 알아야 하는게 많기 때문이에요.
버튼 하나 배치하는 것도 헷갈리고, 데이터베이스 설정은 더더욱 막막했죠.
그런데 신기한 건, 대부분의 초보자들이 같은 벽에 부딪히더라고요.

✔️ 기능은 많은데 어디서부터 시작해야 할지 막막하다.
✔️ 유튜브, 강의도 찾아보지만, 내 서비스에 적용하려니 어렵다.
✔️ 포기하고 개발자에게 맡겨야 하나 고민된다.

그래서! 노코더스가 초보자 맞춤 [스터디 X 챌린지]를 준비했습니다! 🚀


📢 [스터디 X 챌린지] 이런 분들께 추천합니다!

✅ 비전공 창업자 – MVP를 개발자 없이 직접 만들고 싶은 분
✅ PM / 기획자 – 아이디어를 빠르게 프로토타입으로 구현하고 싶은 분
✅ 개발자 없이 서비스 출시를 고민하는 분

[스터디 X 챌린지] 에서는…
✔️ 단순히 강의를 듣는 게 아니라, 직접 만들면서 배우는 과정!
✔️ 초보자도 부담 없이 따라갈 수 있는 실전 과제 챌린지!
✔️ 함께 배우고 성장하는 커뮤니티 지원!

노코드 개발, 혼자 하려면 어렵지만, 함께하면 할 수 있습니다!
👉 스터디 X 챌린지 신청하기

🚀 개발 없이 MVP를 만들어야 하는 창업자라면, 지금 바로 시작해보세요!

노코드에 대해 궁금하시다면!? 노코더스로 편하게 연락주세요😄

https://nocoders.kr/

노코더스

코딩 1도 없이 나만의 서비스를 일주일 만에 만들기

0
0
전종훈

전종훈

심슨 너가 왜 거기서 나와..? - 심슨필름 프로젝트 회고

어디선가 본 얼굴이 나왔네요😁

우선, MZ세대를 저격한 심슨필름 프로젝트에 대한 소개를 하겠습니다.

사용자가 업로드한 사진을 AI가 옷을 분석해서 심슨에게 같은 옷을 입혀주고 폴라로이드 사진을 남겨주는 플랫폼입니다. 심슨필름을 사용하여 나만의 심슨을 만들고, 만든 이미지를 SNS에 공유할 수 있습니다.


인스타그램으로 공유를 해봤는데, 반응이 좋았어요~


심슨필름은 Techeer 부트캠프에서 진행한 프로젝트입니다.

이번 프로젝트에서 경험한 내용과 이슈, 해결 과정을 공유해보려 합니다.


프로젝트 개발 경험

이번 프로젝트에서 어쩌다 보니 프론트엔드 개발 리더를 맡아서 진행 했습니다. 개발 경험이 많지 않아서 처음엔 부담스러웠지만 잘 이끌어 보려 노력했습니다. 그런 과정에 많은 경험을 했는데 일부분 공유 해보겠습니다.


프론트엔드 디자인도 잘해야한다..?

프로젝트 인원중에 디자이너가 없었습니다.. 따라서 디자인은 주로 프론트가 진행하게 되었고, 디자인 하면 금방 하겠지 했지만.. 생각보다 많이 어려웠습니다😅 또한, 만들고 보니 개발자 입장에서 디자인을 하고 있었습니다. 개발하기 편한 쪽으로 말이죠. 앞으로 프론트 개발을 하면서 디자이너가 구현한 대로 개발을 해나가야 하는데, 만약 디자이너가 원하는대로 구현하지 못 하겠다면 어쩌나..? 싶었습니다. 이 과정에서 두 가지 생각이 들었습니다.

첫째, 뭐든지 해내는 실력으로 만들자!

둘째, 해내지 못하는 이유를 타당하게 말하고 고쳐달라 하자!

저의 생각은 첫 번째로 정리 했습니다. 생각해보면 디자인도 제품에 큰 영향을 준다고 생각했기 때문입니다. 따라서, 디자인을 시각화 하는 코드를 짜는데 집중을 하고 있습니다.

프론트라고 프론트만 알면 고생한다..

백엔드에 대한 지식이 많지 않던 저에게 백엔드와의 소통을 쉽지 않았습니다😅 프론트 개발을 하다 보면 백엔드에게 부탁을 해야할 일이 여러모로 많은 것 같습니다. 이러한 상황이 나타난건 API 명세서 작성 과정이였습니다. API 명세서는 보통 백엔드가 맡아서 진행하는 걸로 알고 있었습니다. 신경 안쓰고 개발을 하다가 나중에 확인을 해보니 프론트에서 필요한 데이터가 없거나, 불필요한 데이터가 있거나, 형식이 이상하거나 등등 추가적으로 소통을 해야하는 상황이 있었습니다. 이렇게 진행되다 보니 프론트도 백엔드도 다시 시간을 투자해야하는 상황이 발생했습니다. 따라서, 프론트라고 프론트만 하는게 아닌 백엔드에도 어느정도의 관심을 가지고 개발을 해나가야 원활한 프로젝트 진행이 될 수 있다는 것을 느꼈습니다. 덕분에 현재 진행중인 다른 프로젝트에서는 백엔드와 API 명세서를 같이 작성하며 진행하고 있습니다😆


이번 심슨필름 프로젝트를 통해 개발 전반적인 경험에 대해 알 수 있었던 좋은 경험이였습니다🥹 이어서 개발하면서 있었던 이슈와 해결 과정에 대해서 얘기해보겠습니다.


이슈 및 해결과정

#이슈1

⛔️ AI 분석 결과를 동기적으로 데이터 받아서 사용자의 대기 시간이 길어져 사용자 경험 감소
⛔️ 짧은 주기의 API 요청으로 트래픽 발생

해결

  •  Polling 개념 적용
  • AI 분석 평균 속도 결과를 Polling 요청 간격에 적용

성과

  •  Polling을 구현하여 주기적인 요청으로 사용자의 대기시간 감소, 사용자 경험 증가
  • AI 분석 평균 결과를 Polling 방식 요청에 반영하여 API 요청 트래픽 감소



#이슈2

⛔️ 페이지네이션 구현중에 불필요한 API 요청( 같은 요청 ) 트래픽 발생

해결

  •  React-Query 라이브러리 적용하여 캐싱 기능 활용

성과

  • React-Query 캐싱 기능을 이용해 불필요한 API 요청 트래픽 감소
  • 클라이언트와 서버 데이터 분리하여 관리
  • 기존 코드보다 깔금한 에러 핸들링


정리한 생각

이번 프로젝트를 통해, 개발자로서의 역량을 크게 향상시킬 수 있었습니다. 특히, 프론트엔드 개발에 대한 이해도를 높이고, React와 React-Query를 활용하여 소스 코드를 효율적으로 작성하는 방법을 익힐 수 있었습니다. 또한, 다른 개발자들과 함께 일하면서, 협업과 코드 리뷰의 중요성을 깨닫게 되었습니다. 앞으로도 이러한 경험을 바탕으로, 더 나은 개발자로 성장할 수 있도록 노력할겁니다✋

SimpsonFilm

AI가 OOTD(Outfit of the day)를 분석해서 심슨에게 같은 옷을 입혀주는 플랫폼

6
0