> ## Content Index
> Fetch the complete content index at: https://blog.highoutputclub.com/llms.txt
> Use this file to discover other available public pages before exploring further.

# 디자이너의 레플릿(Replit)을 활용한 디자인 피드백 솔루션 제작기
- URL: https://blog.highoutputclub.com/replit-workshop-design-feedback-mvp/
- Published: 2025-02-04T10:10:00.000Z
- Updated: 2026-02-15T15:15:20.000Z
- Description: 레플릿(Replit)을 활용해 직접 디자인 피드백 솔루션을 개발했습니다. 기존의 번거로운 피드백 방식에서 벗어나, 더 직관적인 디자인 피드백 솔루션을 만들게 된 과정과 배운 점을 공유합니다.
- Author: 정우경
- Tags: AI & 생산성

안녕하세요! HOC에서 활동 중인 11/18/19기 온소입니다. 

**저는 아임웹을 기반으로 홈페이지를 제작하는 소온 스튜디오를 운영하고 있어요.**

디자인 프로젝트를 진행하면서 가장 어려웠던 점 중 하나는 **클라이언트와의 원활한 피드백 소통**이었습니다. 디자인 피드백은 단순한 의견 교환이 아니라, 원하는 수정 사항을 정확하게 전달하는 과정인데요. 

> 기존 방식에서는 특정 부분을 설명하기 위해 화면을 캡처하고, 별도의 PPT나 피그마에 주석을 추가하는 등 번거로운 절차가 필요했습니다. 이런 과정은 시간도 오래 걸릴 뿐만 아니라, 의도가 명확하게 전달되지 않는 경우도 많았어요.

이러한 *불편함을 해결할 수 있는 서비스*가 필요하다고 늘 생각만하던 중, **개발 지식이 없어도 Replit을 활용해 MVP를 제작**할 수 있다는 이야기를 듣고 **하이아웃풋클럽 워크샵**에 참여하게 되었습니다.

![](https://storage.ghost.io/c/b6/51/b651c236-8ffa-4b60-89e0-a48718ab78eb/content/images/2025/01/-----------2025-01-31------3.16.33.png)

MVP 만들기 워크샵 사전 질문지

### MVP 제작을 위한 준비: 무엇을 만들 것인가?

워크샵에 앞서, 무엇보다도 **내가 어떤 문제를 해결하고 싶은지 명확히 아는 것**이 중요하다는 이야기를 들었습니다. 이를 위해 사전 질문지를 제공받았고, 각 문항에 대한 답을 고민하면서 제한된 시간 내에 구현할 핵심 기능을 정리할 수 있었어요.

이번 워크샵에서는 **디자인 피드백 과정을 효율화할 수 있는 솔루션을 직접 구현**하는 것이 목표였습니다. 기존 피드백 방식의 번거로움을 줄이고, 더 직관적인 방식으로 문제를 해결하는 것이 핵심이었죠.

제가 설정한 목표는 다음과 같았습니다.

- 이미지 파일 기반 주석 추가 기능
- '핀 포인트 코멘트' 기능을 통한 피드백 입력

![](https://storage.ghost.io/c/b6/51/b651c236-8ffa-4b60-89e0-a48718ab78eb/content/images/2025/01/-----------2025-01-31------3.07.57.png)

Replit 접속시 기본 화면

### 레플릿(Replit)을 활용한 개발 경험

Replit에 접속하면, 별도의 환경 설정 없이 바로 원하는 기능을 입력하고 테스트할 수 있다는 점이 큰 장점이었습니다. 

**특히, 개발 경험이 없는 사람도 쉽게 접근할 수 있도록 간편한 UI와 직관적인 코드 실행 방식을 제공한다는 점이 인상적이었어요.**

![](https://storage.ghost.io/c/b6/51/b651c236-8ffa-4b60-89e0-a48718ab78eb/content/images/2025/01/-----------2025-01-31------5.18.24.png)

![](https://storage.ghost.io/c/b6/51/b651c236-8ffa-4b60-89e0-a48718ab78eb/content/images/2025/01/-----------2025-01-31------5.14.25.png)

![](https://storage.ghost.io/c/b6/51/b651c236-8ffa-4b60-89e0-a48718ab78eb/content/images/2025/01/-----------2025-01-31------5.59.51.png)

Replit과 ChatGPT를 활용한 프롬프트 사용

뿐만 아니라, ChatGPT와 연동하여 코드를 생성하거나 보완할 수 있어 개발 지식이 부족한 저에게도 매우 유용했습니다. 

처음엔 ChatGPT에게 영어로 프롬프트 작성을 요청했어요. 하지만 나중에는 한국어로도 원활하게 소통할 수 있다는 점을 알고, 훨씬 편하게 개발을 진행할 수 있었습니다.

### 레플릿(Replit)으로 만든 MVP: 더 쉽고 직관적인 디자인 피드백 솔루션

![](https://storage.ghost.io/c/b6/51/b651c236-8ffa-4b60-89e0-a48718ab78eb/content/images/2025/01/-----------2025-01-31------6.17.56-1.png)

Replit으로 구현한 MVP

제가 Replit으로 구현해낸 MVP는 디자이너와 클라이언트 간의 디자인 피드백 과정을 보다 쉽고 직관적으로 개선하는 웹 애플리케이션입니다.

기존에는 화면을 캡처하고, PPT나 피그마에서 따로 주석을 남기는 번거로운 과정이 필요했지만, 이 솔루션을 활용하면 디자인 파일 위에서 바로 피드백을 남기고 관리할 수 있어요.

![](https://storage.ghost.io/c/b6/51/b651c236-8ffa-4b60-89e0-a48718ab78eb/content/images/2025/01/-----------2025-01-31------6.29.55.png)

![](https://storage.ghost.io/c/b6/51/b651c236-8ffa-4b60-89e0-a48718ab78eb/content/images/2025/01/-----------2025-01-31------6.30.01.png)

Replit으로 구현한 MVP 사용 이미지

1. **이미지 기반 피드백 시스템**  
사용자는 디자인 이미지(예: 웹사이트 시안)를 업로드한 후, 특정 위치에 바로 피드백을 남길 수 있습니다.
2. **핀 포인트 코멘트 기능**  
디자인의 특정 위치를 클릭하면 해당 위치에 정확한 피드백을 남길 수 있는 핀 생성

### 레플릿(Replit) 워크샵을 통해 느낀 점

![](https://storage.ghost.io/c/b6/51/b651c236-8ffa-4b60-89e0-a48718ab78eb/content/images/2025/01/IMG_9991.jpg)

실리콘밸리 출신 대표님과 함께하는 Replit 워크샵

이번 워크샵을 통해 얻은 가장 큰 수확은 **개발에 대한 두려움을 줄이고, 직접 아이디어를 구현해볼 수 있었다는 점**이었습니다.

- ***내가 해결하고 싶은 문제를 직접 구현할 수 있다는 자신감***  
기존에는 '개발은 어려운 것'이라는 인식이 있었지만, Replit과 같은 도구를 활용하면 생각보다 쉽게 시작할 수 있다는 걸 깨달았습니다. 물론 완벽한 제품을 만들려면 더 많은 학습과 개발이 필요하겠지만, MVP를 직접 만들어보고 테스트할 수 있다는 점에서 큰 성취감을 느꼈어요.
- ***단순한 아이디어에서 실행으로 옮기는 과정의 중요성***  
이번 경험을 통해, 아이디어가 있더라도 직접 실행하지 않으면 아무 의미가 없다는 것을 다시 한번 실감했습니다. 특히 Replit과 같은 도구를 활용하면 빠르게 MVP를 만들어보고, 실제로 사용자들에게 피드백을 받아 개선할 수 있는 환경이 갖춰진다는 걸 알게 되었어요.

### 앞으로의 발전 방향

Replit을 활용한 이번 개발 경험을 통해, **개발 경험이 없어도 직접 아이디어를 실현할 수 있다는 자신감**을 얻었습니다. 아직 기본적인 기능만 구현된 상태이지만, 지속적으로 개선하여 **더 편리하고 직관적인 디자인 피드백 솔루션**을 만들어볼 예정입니다.

![](https://storage.ghost.io/c/b6/51/b651c236-8ffa-4b60-89e0-a48718ab78eb/content/images/2025/01/IMG_0086.jpg)

마지막으로, 이번 Replit 워크샵을 포함하여, **늘 멋진 판 깔아주는 하이아웃풋클럽**에 감사의 말씀과 사랑 전합니다.

---

## 나만의 서비스 만들기 사전 알림 신청 안내

![워크샵 사전 알림 신청하기](https://storage.ghost.io/c/b6/51/b651c236-8ffa-4b60-89e0-a48718ab78eb/content/images/2025/02/----------------.png)

워크샵 사전 알림 신청하기

- 코딩을 몰라도 괜찮습니다! 개발자가 없어 막막했던 분들을 위해 준비한 이번 워크샵은, **실리콘밸리 개발자 출신(전 DoorDash) 대표님과 함께하는 특별한 기회**입니다.
- 개발 경험이 전혀 없던 **참여자 48명이 3시간 만에 직접 서비스를 만들고 배포까지 성공적으로 마친 경험을 바탕**으로, 자신의 아이디어를 현실로 만들 수 있도록 도와드립니다.

**💡 워크샵 사전 알림 신청 시 워크샵 오픈 소식을 안내드려요!**

### **🔥 \[실제 사례\] 이런 것들을 만들어 볼 수 있어요!**

1) 개발을 전혀 모르던 마케터 와니님은 점심시간 30분 만에 '[글쓰기 서비스](https://blog.highoutputclub.com/replit-30min-challenge-web-deployment/)'를 만들었습니다.   
2) 직장인 영끌님은 단 돈 만 원으로 '[영어 단어 학습 서비스](https://blog.highoutputclub.com/build-vocab-ninja-using-replit-agent/)'를 완성했습니다.  
3) 영어강사 따스텔님은 4시간 만에 '[맞춤형 교재 추천 서비스](https://blog.highoutputclub.com/replit-beginner-workshop-review/)'를 완성했습니다.  
4) 크리에이터 리나몬드님은 '4시간 만에 '[학술 논문 리뷰 시뮬레이터](https://blog.highoutputclub.com/replit-ai-mvp-workshop/)'를 완성했습니다.  
5) 웹서비스 기획자 윤샐리님은 직접 '[캘린더 예약 서비스](https://blog.highoutputclub.com/replit-workshop-mvp-booking-serivce/)'를 완성했습니다.

**👇 더 많은 사례들은 여기서 확인하실 수 있습니다!**

[AI & 생산성 - 하이아웃풋클럽1인 사업가, 프리랜서, 스몰 브랜드 대표님들을 위한 팁. AI를 활용해 업무 효율을 극대화하고, 반복 작업을 자동화하며, 데이터 분석과 개인화된 워크플로로 더 똑똑하게 일하는 인사이트를 전합니다.![](https://storage.ghost.io/c/b6/51/b651c236-8ffa-4b60-89e0-a48718ab78eb/content/images/icon/logo-15.png)하이아웃풋클럽전시진![](https://storage.ghost.io/c/b6/51/b651c236-8ffa-4b60-89e0-a48718ab78eb/content/images/thumbnail/-----1.png)](https://blog.highoutputclub.com/tag/ai-work-productivity/)

### **✅ 이런 분들에게 워크샵을 추천드립니다!**

- 실제로 구현하고 싶은 **명확한 아이디어**가 있는 분
- **개발은 모르고 코딩은 몰라도 API에 대해 들어본 적**이 있는 분
- 새로운 도전을 좋아하며 **어떻게든 끝낼 의지가 있는 분** (제일 중요!)

워크샵 사전 알림 신청 

[👉 지금 바로 신청하기 ](#) 

---

📝

****함께 읽어보면 좋은 글**  
  
1) [하이아웃풋클럽 워크샵 레플릿(Replit)으로 나만의 서비스 만들기](https://blog.highoutputclub.com/replit-beginner-workshop-review/)  
2) [\[하이아웃풋클럽 워크샵 후기\] 레플릿(Replit)으로 만든 영어 단어장](https://blog.highoutputclub.com/build-vocab-ninja-using-replit-agent/)  
3) [Replit 사용법, 30분 만에 기획부터 웹 서비스 배포까지](https://blog.highoutputclub.com/haiauspuskeulreob-repeulris-replit-weokeusyab-1sigan-mane-gagyeogbigyo-seobiseu-mandeulgi/)  
4) [Replit을 활용해 15분 안에 웹 서비스 만들기](https://blog.highoutputclub.com/replit-ai-service-making/)  
5) [Replit Agent로 30분 만에 글쓰기 서비스를 만들고 실제 유저 테스트까지](https://blog.highoutputclub.com/replit-agent-testing/)