프로토 타입 공유 사이트
si 든 솔루션이든 백엔드는 주로 스프링 (node, go python 도 있지만 주로 스타트업?), 프론트는 리액트(혹은 vue,angular,svelte 등등) 정해져 있고 특히 신규 프로젝트면 tailwind css + shadcn ui or radix ui or headless ui 이런식인데 프로토 타입 여러가지 많이 만들어 놓으면 레거시 리뉴얼이나 부분적 참고 프로젝트로 활용하기 좋을것 같아서 아예 프로토 타입 공유 및 관리 사이트를 만들어 봤습니다
프로토 타입 공유 및 챌린지 사이트
https://hibot-docu.com/
1. 프로토 타입 공유
2. 해당 문서
3. 해당 프로토 타입에 대한 의견 및 점수 매기기
등의 기능을 기본적으로 구현
it 뉴스중에 스웨거가 최고의 문서다 라는 말이 있던데 이제 ai 가 스웨거만 보고도 ui ux 를 구현 한다 그런 취지 였는데 아무래도 정확성이 떨어질수 밖에 없고 차라리 uiux 를 아예 프로젝트 단위로 문서화 해놓으면 더 활용도가 높을거라고 생각합니다. 또한 서버 관련 프로토 타입도 여러 부분에서 유효할거라고 생각합니다.
예를 들어
1. 트리 메뉴 관련
2. tanstack table 관련
3. ag-grid 관련
4. redis 관련
5. framor-motion 관련
6. dnd-kit 관련
7. 스프링 시큐리티
8. 다국어
9. 테마 설정
10. jpa + queryDsl n+1 문제 발생
11. 스프링 ai 활용 방법
12. ddd 아키텍쳐 활용
13. 외부 api 요청에 따른 정합성 관리
14. redis, kafka 이벤트 전파 관련
15. flutter 시작하기
등등
결국 사람도 전체적인 맥락과 부분 부분 구현 포인트들을 이해해놓고 아예 어떤식으로 구현될지 예상 가능하면 중간에 claude 나 gpt 가 구현 하는 와중에도 계속 잘하고 있는지 확인하면서 수정할수 있겠죠
당장 구현이 급하다면 구현 자체를 계획적으로 하고 점검을 꼼꼼히 하는것도 즉 컨텍스트 엔지니어링도 꽤나 주효하지만 부분 부분 구현에 대한 익숙함과 확신 커스텀 가능 범위와 동작 방식에 대한 이해가 있다면 타워 크레인으로 모듈 쌓아올리듯이 개발을 할수 있게 되지 않을까라는 의미에서 프로젝트 이름도 TowerCrane fullstack 으로 지었는데요 디비는 sqlite 라서 관리하고 바꿔낄수 있게? 했습니다.
uiux 도 그렇고 다소 복잡한 디비 설계나 서버 로직도 그렇고 결국은 부분 부분 만들어서 돌려보는게 기본기 향상 혹은 흐름 참고 문서로 활용하는데 도움 된다고 생각해서 많은 개발자들이 프로토타입(충실한 문서화와 함께)을 공유하면 개발 노하우 공유나 실력 올리기 혹은 프로젝트에서의 협업에 도움이 될것 같다고 생각하는데 실효성 있어 보이시나여?
요약:
잘만드는게 중요한게 아니라 삽질 안하는게 중요
심지어 프로토 타입을 만들더라도 여러 방식으로 만들어 보는 유연성 및 검증 과정의 일환이 될수 있음
pm 이라고 하도 커뮤니케이션과 미리 한번 만들어본 경험을 바탕으로 상황 파악이나 이슈 공유가 더 빠를수 있음
참고1:
참고2:
참고3:
https://backstage.spotify.com/discover/backstage-101
요약:
1. 문제 (왜 필요한가)
조직 커질수록
→ 서비스 위치 모름 / 담당자 모름 / 문서 outdated / 기술 제각각결과
→ 생산성 ↓, 개발자 스트레스 ↑, 회사 속도 ↓
2. 해결책 (정체)
👉 Internal Developer Portal (IDP)
한줄 정의:
회사 내부의 모든 개발 자산을 한 곳에서 관리하는 플랫폼
3. 핵심 기능
① Software Catalog
서비스 / API / 라이브러리 다 모아둠
누가 만들었는지, 상태, 의존성 확인 가능
👉 “이거 뭐고 누가 담당임?” 바로 해결
② Software Template
표준 프로젝트 자동 생성 (Golden Path)
버튼 몇 번 → repo + CI/CD 자동 생성
👉 “개발 방식 통일 + 속도 ↑”
③ Plugin 시스템
CI/CD, 배포, 보안, 모니터링 다 연결
필요하면 커스텀 기능 추가 가능
👉 “회사 모든 툴 = 하나의 UI로 통합”
4. 효과
문서 / 코드 / 인프라 → 한 화면에서 조회
중복 개발 ↓
온보딩 속도 ↑
기술 표준 통일
5. 본질 요약
👉 이건 그냥:
개발자용 "운영 시스템(OS)"서비스 관리
문서 관리
생성 자동화
전체 인프라 통합
6. 왜 Spotify가 만들었냐
마이크로서비스 + 조직 급성장 → 혼돈 발생
해결하려고 만든게
👉 Backstage (대표 IDP)
결론 한줄
“회사 내부 기술 자산을 통합해서 개발 생산성을 극단적으로 올리는 플랫폼”
기타:
Spotify Backstage 101
https://backstage.spotify.com/backstage-101
Setting up Software Templates
https://backstage.spotify.com/learn/onboarding-software-to-backstage/setting-up-software-templates/11-spotify-templates/Spotify Portal
https://backstage.spotify.com/products/portal/Can vibe coding produce production-grade software?
https://www.thoughtworks.com/en-us/insights/blog/generative-ai/can-vibe-coding-produce-production-grade-softwareWhat is a Golden Path for software development?
https://www.redhat.com/en/topics/devops/golden-pathsHow internal developer portals help you to pave and remain on the golden path
https://www.port.io/blog/how-internal-developer-portals-help-you-to-pave-and-remain-on-the-golden-pathHow to Build Golden Paths Your Developers Will Actually Use
https://jellyfish.co/library/platform-engineering/golden-paths/Fast isn't finished: Why production-ready still takes discipline
https://www.techradar.com/pro/fast-isnt-finished-why-production-ready-still-takes-disciplineThe 2026 AI Innovation Playbook: From Pilots to Production
https://www.tractiontechnology.com/blog/the-2026-ai-innovation-playbook-from-pilots-to-productionBuilding production-ready agentic systems: Lessons from Shopify Sidekick
https://shopify.engineering/building-production-ready-agentic-systemsHow Spotify Built Honk | AI Coding Agent Webinar
https://backstage.spotify.com/how-spotify-built-honkClaude Code in an Hour: A Developer's Intro
https://www.anthropic.com/webinars/claude-code-in-an-hour-a-developers-introWhat We Shipped: Feature Updates, Tips, and Live Q&A with the Claude Code Team
https://www.anthropic.com/webinars/what-we-shipped-feature-updates-tips-and-live-q-a-with-the-claude-code-team
관련 키워드:
Backstage, Golden Path, Software Templates, Internal Developer Platform, pilot-to-production
