데보션앱 소개페이지 바로가기
로그인 선택

신고하기

CLOSE
신고사유 (대표 사유 1개)
상세내용 (선택)
0/200
  • 신고한 게시글은 더 이상 보이지 않습니다.
  • 이용약관과 운영정책에 따라 신고사유에 해당하는지 검토 후 조치됩니다.
  • 허위 신고인 경우, 신고자의 서비스 이용이 제한될 수 있으니 유의하시어 신중하게 신고해 주세요.
(이 회원이 작성한 모든 댓글과 커뮤니티 게시물이 보이지 않고, 알림도 오지 않습니다.)

미리보기

커뮤니티

      1,234

      badge 23.06.15

      글 등록

      카테고리를 선택해주세요.

      DEVOTEE를 활성화 시키면
      지금 작성한 커뮤니티 글에 대해 1개의 댓글을 달아줍니다.

      버튼을 누르면 글 수정 시 ChatGPT가 작성한 댓글이 수정됩니다.

      임시저장함에 저장되었습니다. 저장일시 : 2022.5.17 14:29:08

      임시저장함

      제목을 선택하시면 이어서 작성이 가능하며,
      최대 20건까지 저장합니다.
      컨텐츠 유형, 제목, 저장일시, 삭제로 이뤄진 임시저장 목록
      컨텐츠 유형 제목 저장일 삭제

      데보션 블로그 게재 요청

      CLOSE
      • *
      • *

      본인인증

      효율적인 데보션 서비스 이용 및
      고객님의 소중한 개인정보보호를 위해
      본인인증을 진행해주세요. 본인인증 미 진행 시 로그인이 제한됩니다.
      본인인증 실패

      본인인증 로그인에 실패하였습니다.
      회원이 아니시거나 본인인증 등록이
      완료되지 않은 사용자입니다.

      회원정보 연결

      비개발자가 AI 기술과 만나는 방법 : Vibe-coding 도구

      Todd 25.10.02
      4,420 8 2
      DEVOTEE 요약
      본 블로그는 AI 기술의 급속한 발전 속에서 만든 "Vibe-coding" 도구들의 특징과 활용 방법을 공유하는 내용입니다. Vibe-coding은 크게 IDE 통합형, 데스크톱 애플리케이션, CLI 도구로 나뉘며, 비개발자도 쉽게 시작할 수 있어 추상적인 아이디어를 프로토타입으로 구체화하거나 학습 보조 도구로 유용하게 사용할 수 있다고 설명합니다. 그러나 도구의 한계와 예상외의 문제점, 정신적 피로 등을 감안해 Git 백업이나 system prompt 활용을 통해 대비하며 사용해야 한다고 조언합니다.
      DEVOTEE 추천 블로그


      들어가며

      생물 다양성이 폭발적으로 증가했던 캄브리아기 대폭발처럼, 우리는 지금 AI 기술 대폭발 시대를 살고 있습니다. 매일같이 새로운 소식이 들려오고, 새로운 규격·기술·도구·모델이 쏟아져서 쫓아가기 바쁜 요즘입니다. 이런 새로운 소식을 지속적으로 모니터링하고 학습하는 일은 결코 쉽지 않은 것 같습니다.

      한편, Gen. AI가 등장한 초기부터 LLM은 프로그래밍 보조 도구로 활용되어 왔습니다. 다만 당시에는 IntelliJ, Eclipse 같은 IDE에서 개발자들만 사용하는 도구였기 때문에, 직접 개발할 수 있는 역량이 없다면 코딩 보조 도구는 무용지물이라고 생각했는데요. 그러나, 메모장과 IDE 사이 어딘가에 위치한, 문서 편집기(VS Code) 기반으로 만들어진 Cursor를 사용해보니, 심리적 장벽도 낮아질 뿐 아니라 LLM의 성능이 예상보다 뛰어나서 많은 것들을 커버해 주고, 생각보다 많은 부분을 몰라도 된다는 것에 용기를 얻어 vibe-coding 도구을 조금씩 사용해보기 시작하였습니다.

      비개발자이어서 vibe-coding 도구를 업무에 직접적으로 사용하지는 않으나 서로의 상상력을 시각화하는 용도와, 새로운 각종 정보들을 능동적으로 학습하는데 사용하고 있는데요. 이번 글에서는 이에 대해 얕고 가볍게 소개를 해보도록 하겠습니다.


      1. Vibe-coding 도구 어떤 것들이 있지?

      Vibe-coding 도구는 크게 세가지 유형으로 나눌 수 있습니다. IDE에 LLM을 플러그인 형태로 붙여서 사용하는 IDE 통합형, vibe-coding 전용 애플리케이션을 별도로 다운받아 설치 후 사용하는 방식, 그리고 터미널(CLI)에서 설치 후 사용하는 방식 입니다.

      이 중에서 IDE 통합형은 가장 초기에 출현했던 방식으로 알고 있는데, 여전히 활발히 사용하고 있는 것으로 알고 있습니다. 비개발자 입장에서는 이 방식보다는 CLI 도구나 데스크톱 애플리케이션 형태를 사용하는 것이 유리한 것 같습니다. 특히, 데스크톱 애플리케이션 형태인 Cursor는 VS Code를 기반으로 만들어졌고, 여러 모델들을 사용할 수 있고 사실상 토큰 제한이 없다는 점에서 큰 장점이 있었습니다.

      유형

      특징

      대표 도구

      내가 느낀 장점

      내가 느낀 단점

      IDE 통합형

      IntelliJ, Eclipse 등의 IDE에 플러그인 형태로 사용하는 방식

      Github Copilot, Codeium 등

      (미사용)

      (미사용)

      데스크톱 애플리케이션

      다운 받아 설치하고 사용하는 데스크탑 애플리케이션

      Cursor, Windsurf 등

      • 직관적

      • LLM이 수정하는 과정을 실시간으로 확인 가능

      • GPT-4o, Claude Sonnet 4, Gemini 2.5 Pro/Flash 등 여러 모델 선택 가능

      • Cursor의 경우 사실상 제한 없음 (Claude Sonnet 4 사용 중 일정량 초과 시 3.5로 자동 전환 확인)

      • 여러 프로젝트를 동시에 관리하기 어려움

      • 서버 실행 상태 확인이 번거로움

      CLI 도구

      맥의 Terminal, 윈도우의 PowerShell 등 CLI 환경에서 사용하는 방식

      Claude Code, Cursor CLI, Gemini CLI 등

      • 터미널에서 Shell 접근을 통해 제어해야 하므로 여러 터미널을 동시에 띄울 수 있다는 점이 유리

      • 같은 모델을 사용하더라도 Claude Code의 system prompt가 더 우수한지 결과물이 더 좋게 느껴짐

      • CLI 환경이 처음에는 낯설 수 있음

      • LLM이 실시간으로 수정하는 과정이 처음에는 유용했으나, 그 의미를 잘 모르면 보는 것이 큰 의미가 없어짐


      2. Vibe-coding 도구 어때?

      생각보다 많은 것들을 대신 해준다.

      기본적으로 파일의 생성·읽기·수정·삭제가 가능하여서 필요한 파일들을 생성한 후 그것을 수정해가면서 프로젝트를 알아서 진행할 수 있고, Shell 접근을 통한 서버나 애플리케이션 제어, 패키지 관리 등을 할 수 있어서, 특히 비개발자들에게 도움이 되겠다는 생각이 들었습니다.


      간단한 기능들을 구현하는 것은 쉽다

      Vibe-coding 도구를 활용할 때 추상화 레벨을 낮춰서 명확한 지시를 내릴수록 결과가 좋아지는 것이 당연합니다. 하지만 무엇이 명확한 것인지 모르는 초보자는 그렇게 하고 싶어도 하기가 어렵습니다. LLM은 초보자가 추상적으로 요청해도 부족한 부분을 채워가며 결과물을 만들어 주기 때문에 부담 없이 시작할 수 있다는 점이 매력적인데요. LLM이 이미 많은 코드들/프레임워크/라이브러리 등을 통해 학습된 상태이기 때문에, 전에 없던 새로운 기능이 아니라면 대충 얘기해도 사용자의 의도를 잘 파악하고 명령을 수행할 수 있는 것 같습니다. 저는 어떤 도구를 사용하더라도 LLM은 Claude Sonnet을 주로 사용했는데요. 제가 만들어달라고 요청한 것은 대화방, 어드민, 대시보드, 구글 OAuth 연동, 게시판 등과 같이 라이브러리가 많이 존재하는 것 들이어서, 추상적으로 이야기 해줘도 상당히 잘 만드는 편이었습니다.

      만들려고 하는 기능/서비스에 어떤 프레임워크가 적합한지 확인하여 "Streamlit으로 파일 업로드 할 수 있는 어드민 만들어" 등과 같이 방향만 잡으면 더 정확히 구현하는 경향을 보였습니다. 이렇게 어떤 프레임워크가 적합한지를 확인하는 것도 LLM이 매우 잘 응답할 수 있으니까 "내가 이러이러한 것을 만들려고 한다. 프로젝트를 시작하지말고 일단 어떤 프레임워크가 적절한지 분석하고 샘플 조사해줘' 와 같은 식으로 대화를 시작하는 것도 좋을 것 같습니다.


      탐색적 프로토타입을 만들기 좋다

      간단한 기능은 구현하기 쉽다는 특성 때문에, 저는 어떤 아이디어를 동료 구성원들과 함께 논의할 때 기능을 쪼개어서 단위 기능 별로 프로토타이핑을 하여 회의를 하고 있습니다. 글이나 스틸 이미지로 자신의 아이디어를 다른 이에게 전달하는 것 보다, 일부 기능이긴 하지만 실제로 동작하는 프로토타입을 만들어서 논의하는 것이 일치된 의견을 얻는데 더 원활했던 것 같습니다.


      학습 보조 도구로서의 가치가 더 크다

      또 vibe-coding 도구는 새로운 개념을 학습하고 큰 그림을 그리는 데 집중할 수 있게 도와주는 학습 보조 도구로서 큰 의미가 있었습니다. 비개발자 입장에서 '몰라도 되는 부분'은 AI에게 맡기고, 알고 싶었던 핵심 개념에 집중할 수 있다는 것은 엄청난 장점이었는데요. 예를 들어 RAG에 대해 알아보려는 경우, 혼자서 시스템을 구축하고 LLM과 연동하려면 Python, LangChain 등을 공부하고 직접 구현해야 하는데요. 아마도 첫 줄의 패키지 import부터 막힐 것입니다. 하지만 이런 부분은 AI에게 맡겨 RAG가 동작하도록 구성한 뒤, RAG를 시스템에 어떻게 연동하고 활용할지 고민하는 단계로 바로 건너뛸 수 있습니다.


      지나친 기대는 금물

      Vibe-coding 도구가 아무리 훌륭하다고 해도, 비개발자가 현업에서 이 도구만으로 업무의 연장선상에 있는 무언가를 생산해내기는 아직 어렵다고 생각합니다. 이 도구를 통해 처음 제공받은 결과물이 생각보다 훌륭해서 신세계를 경험한 것 같았지만, 기능들을 추가하다보니 개발 지식이 없다면 명확한 한계가 있다는 것을 깨달았습니다.

      규모가 작거나 구조가 단순하다면 비개발자도 이 도구로 서비스를 만들 수 있겠지만, 우리가 서비스를 사용하며 당연하게 여기는 기능들까지 구현하려면 기능이 늘어날수록 상호 영향도가 높아지며 핸들링이 점점 어려워지는 순간을 경험했습니다. 상용 서비스 수준의 결과물을 만드는 것이 절대 불가능하지는 않겠으나 비효율적이며, 한 번 만들고 끝나는 것이 아니라 지속적으로 발전시켜야 한다는 점에서 사실상 불가능하다고 봅니다.


      3. 어떻게 시작해야 할까?

      Vibe-coding을 처음할 때 어떻게 말을 꺼내야 할지 막막할 수 있습니다. 하지만 특별한 순서나 방법 같은 건 없고, 내가 구현하고자 하는 것을 가능하면 상세하게 설명하고 결과물을 확인한 뒤 다시 그것에 대해 피드백을 주는 방식으로 진행해야 합니다. 가령 채팅 시스템을 만들고 싶다면 "대화창 구현해줘"로 시작해 일단 첫발을 내딛고, 거기서 원하는 바를 계속 말해나가면 금방 결과물이 나오기 시작합니다.

      이 글을 작성하면서 RAG 시스템을 만들어보려고 테스트를 해보았는데요. 다음과 같이 두 번의 입력만으로 문서를 업로드하고 채팅 테스트를 해볼 수 있는 간단한 시스템을 만들 수 있었습니다. LLM이 모든 작업을 완료한 후, 제 경우에는 가상환경과 frontend/backend 서버를 실행하는 명령어를 직접 터미널에 입력했지만, 이마저도 LLM에게 시킬 수 있습니다.

      • 첫 번째 요청: 내 PC를 서버로 하는 RAG 시스템을 만들어보고 싶어. 크게 문서를 업로드해서 indexing/chunking/embedding한 뒤 vector store에 저장하는 업로드 페이지 하나와, 대화창을 통해 확인할 수 있는 시스템을 만들어줘. FAISS / OpenAI embedding small / recursive text splitter를 사용해서 만들어. OpenAI 키도 첨부할 테니 이를 활용해. 대화창도 구현해서 RAG를 테스트해볼 수 있게 해.

      • 두 번째 요청: 이런 에러가 발생했어 "error: externally-managed-environment × This environment is externally managed > To install Python packages system-wide, try brew install xyz, where xyz is the package you are trying to install."

      이 결과물은 나만을 위한 것이기 때문에 "Vector store 별로 어떤 특징이 있지? 종류를 여러 옵션을 선택할 수 있게 해줘.", "구현 가능한 모든 retriever 유형을 구현하고 하나의 쿼리에 대해 어떻게 다르게 응답이 나오는지 확인할 수 있게 구현해",

      "어드민에서 chunk size랑 overlap 조절할 수 있게 해줘" 등과 같이 커스텀한 시스템을 만들면서 구현 디테일은 건너뛰고 RAG 시스템의 핵심 개념과 활용 방법 학습에 집중할 수 있습니다.


      4. 한계와 주의사항

      이 도구들을 통해 몇 가지 프로토타입을 만들어보며 다음과 같은 어려움을 경험했습니다.


      1) LLM의 판단에 의존해야 함

      Vibe-coding 도구만 사용하는 것은 블랙박스에 request를 넣고 response를 받는 것과 같습니다. 구조 설계부터 세부 구현까지 AI에게 모든 것을 맡기면, 그 구조나 디테일이 적절한지 판단할 수 없습니다. 이 때문에 처음에는 잘 진행 되다가도 수동적으로 끌려다니게 되고, 진행 과정에서 갑자기 AI가 잘못된 판단을 해 중요한 로직이나 데이터베이스를 날려버리는 사고가 발생하곤 합니다. (Claude Sonnet 4 기준)

      제가 경험했던 사례는 다음과 같습니다:

      • 사용자 인증 기능을 추가하려다 기존 데이터베이스 스키마와 충돌 발생

      • 이를 수정하기 위해 accept-data-loss, force-reset 플래그를 사용해 모든 데이터를 날려버림

      • 새로운 API를 추가했더니 기존 라우팅 로직이 손상됨

      • rm -rf로 폴더를 통째로 삭제함

      • 프론트엔드와 백엔드의 데이터 형식 불일치로 연동 실패

      • 문제 해결을 시도하다가 '해당 로직을 삭제하는 것이 문제 해결'이라고 판단하고 로직을 삭제함


      2) 구현한 척 흉내만 내는 경우가 있음

      LLM에게 구체적으로 구현 사항을 명시하여 시켰을때도 하드코딩을 하거나 비슷한 효과를 내는 다른 방식으로 우회하려는 경우가 있습니다. 이건 오늘(9월 30일) 출시한 Sonnet 4.5에서도 이 현상을 몇 차례 경험했는데요. 모델의 성능이 좋아져도 이 부분은 쉽게 수정되지 않는 듯 합니다.


      3) 시스템 프롬프트 무시

      위에서 언급한 플래그나 하드코딩 금지 규칙 등을 시스템 프롬프트로 명시했으나 이를 무시하는 경우가 많았습니다.


      4) 토큰 소모와 비용 문제

      기능 추가나 디버깅 과정에서 LLM가 원하지 않는 동작들을 수행하여 그것을 수정하다보면 급격하게 토큰이 소모되는 일이 종종 발생합니다. 중간중간 누적되는 대화 히스토리를 정리해야 하지만 저는 이를 잘 관리하지 못한 것인지 쉽게 제한에 걸렸습니다. 결국 Claude, Gemini, Cursor, ChatGPT Pro 요금제를 동시에 사용하게 되었고, 결국 나중에는 Claude Max 요금제까지 사용하게 되었습니다. 이들의 전략에 낚인 걸까요?


      5) 정신적 피로

      Vibe 코딩 도구를 사용해 LLM과 대화하며 작업을 진행하는 것은 정신적으로 피로합니다. 오랫동안 작업한 것을 한순간에 복원 불가능하게 삭제하거나, 지시한 것과 명백히 다른 작업을 진행한 뒤, 그렇게 하면 안된다고 지적하면 "맞습니다!", "그렇게 하면 안 되죠", "완벽합니다. 데이터를 초기화하여 깔끔해졌습니다" 같은 반응을 보입니다. 아마도 사용자의 system prompt보다 강력한, 도구 자체의 system prompt 에서 'Right', 'Perfect'와 같은 리액션을 하라는 것을 넣어놨기 때문이라고 생각은 들지만, 이런 부분을 감당하며 진행해야 해서 다소 피로감이 있었습니다.


      5. 어떻게 대응해야 하지?

      이런 단점들이 많다고 사용하지 않을 수는 없고 대응 없이 그냥 사용할 수도 없었습니다. 사실 저도 아직 해결을 못한 문제들이긴 한데요. 아래와 같은 방식으로 단점들을 극복하기 위해 노력을 하고 있습니다.

      • Git 및 로컬에 상시 백업: 중요한 것들은 로컬 또는 git을 통해 백업하여 데이터 손실에 대비해야 합니다.

        간단한 수정 요청을 시키더라도 AI가 급발진해서 엄청나게 많은 것들을 변경시키거나, 중요한 것을 날려버릴 수 있습니다.

        AI에게 롤백하라고 하면 많은 것들을 수정한 경우 직전에 무엇을 수정했는지 몰라서 롤백이 안되는 경우가 종종 있었습니다.

      • System prompt 활용 : 각 도구 별로 claude.md, .cursorrules 등의 파일을 통해 광역으로 또는 프로젝트 단위별로 system prompt를 관리할 수 있습니다.

        종종 이것도 무시한다는 점이 있긴 하지만, 그 빈도를 낮출 수 있어서 활용 해야 합니다.

      • Sub agent를 통한 제약사항 검토: 이 방법은 현재 테스트중인데요. 이전 작업을 Sub Agent를 두고, 작업 전에 또는 작업 후에 감독하도록 하는 방식인데요.

        토큰 소모량이 더 높아지겠지만 대안이 될 수 있을 것 같아서 검증 중입니다.

      • 시스템 구조 및 소프트웨어 개발 이해도 높이기: 해결책인지 모르겠습니다.

        하지만 최소한의 기본적인 소프트웨어 개발 지식이 있어야 LLM의 판단을 검증할 수 있는 것 같습니다.


      6. 그래서 무엇을 할 수 있는데?

      저 같은 경우는 vibe-coding 도구만 활용하여 다음과 같은 프로토타입들을 만들어보았습니다.


      1) 커피 예약 시스템 'MJ Cafe'


      팀 내에서 핸드드립 커피를 내려주시는 구성원이 있어 하루 2명까지 예약할 수 있는 시스템을 만들었습니다. 팀 위클리 미팅 시간에 농담처럼 얘기하면서 만들다가 완성하고 이후에 총 3시간 정도 투입해 완성한 간단한 토이 프로젝트입니다.

      • 주요 기능:

        • 예약/취소 관리

        • 회원 관리 및 로그인

        • Google Calendar 일정 등록

        • 휴가·재택 등 근무 유형을 포함한 공휴일 관리

        • 커피 배치별 정산 기능


      2) Workflow Builder 프로토타입

      N8N 같은 자동화 workflow builder의 프로토타입을 만들어 보았습니다. Workflow engine을 만드는 것 까지는 진행을 하지 못했고, workflow graph를 사용자가 생성/수정/편집할 수 있으며, LLM이 연결된 AI Assistant를 제공하여 graph를 생성할 수 있도록 구성했습니다.

      • 주요 기능:

        • React Flow를 통한 캔버스 구현

        • 대화방 구현 및 AI Assistant를 통한 Canvas 위 workflow 제어

        • 어드민을 통한 Node 버전 관리, 노드별 System prompt 관리

        • Google OAuth 회원 연동


      3) 웹 대화방 및 AI Agent 구현 (w/ N8N)


      AI Frontier 교육과정의 일환으로 N8N을 통해 에이전트를 구현하였었는데요. 이를 동작시킬 수 있는 웹 대화방을 함께 만들어서 실제 에이전트 서비스를 흉내내보았습니다. 오른쪽은 N8N에서 간단한 LLM Agent를 병렬로 연결해 둔 workflow이고, 이 workflow를 접속하는 채팅방을 구현한 모습입니다.

      • 주요 기능:

        • N8N 통해 날씨/Serp/Geocoding/T맵 길찾기 API 연동하여 각각 기능 동작하는 Agent

        • Naive RAG 구성

        • 대화방 내에서 이벤트 발생시켜 N8N workflow 트리거링

        • Agent 날씨 응답을 파싱해서 대화방 내에서 표와 이미지로 날씨 표현


      4) MCP Client/Server 구현



      Cursor, Claude Desktop이 아니더라도 MCP Host 역할을 하는 웹 채팅방을 만들어 MCP Client를 연결하고, 기상청 API를 통해 날씨를 알려주는 MCP Server, Apple script를 통해 제 피씨의 음악 프로그램을 컨트롤 하는 MCP Server를 구현한 뒤 이를 연결시켜 테스트해보았습니다.


      7. 실제 사용 예제

      실제 사용하는 방법에 대해 간단한 예제를 보여드리겠습니다.

      이 글을 작성하면서 '커피 예약 시스템 MJ Cafe' 캡쳐를 하다보니, 셀의 높이가 불필요하게 높게 설정되어 있다는 생각이 들었습니다. 캡쳐하기도 불편하네요. 이 문제를 수정해보겠습니다.

      먼저, "캘린더에서 셀의 높이는 (커피) 배치의 여부에 따라 가변적으로 설정해. 최소 높이는 셀의 가로 너비와 동일하게 해" 라고 요청하겠습니다.



      저는 이 시스템을 상용환경에 올려놓았으므로, 커밋/푸시도 Claude Code에게 시키겠습니다.



      그랬더니 이렇게 셀의 크기가 바뀐 것을 확인할 수 있습니다. 배치가 늘어났을 때 가변적으로 늘어나는지 테스트하기 위해 29일, 30일에 커피 배치를 넣어보겠습니다.



      원하는대로 가변적으로 셀이 변하고 있는데, 행 내에서 셀의 크기가 다른 문제가 발생했네요. 다시 수정해보겠습니다.

      "좋아. 다만 이번에는 하나의 행 내에서 셀의 크기가 달라지는 문제가 발생한다.

      셀이 속한 행 내에서 자신 보다 높은 높이를 가진 셀이 존재하는 경우 그 셀과 같은 높이가 되도록 변경해. " 라고 요청했습니다.


      이젠 처음 기대한 대로, 모든 셀 높이가 적절하게 조정되었고, 같은 행에 속한 셀들의 높이는 일정하게 수정이 된 것을 확인할 수 있습니다.


      마치며

      결국 vibe-coding 도구가 비개발자에게 주는 진짜 가치는 '코드를 짜는 능력'이 아니라 '기술과 대화하는 능력'인 것 같습니다. 예전에는 개발자에게 요구사항을 전달하고 결과를 기다려야 했다면, 이제는 직접 시도하고 실패하고 수정하면서 기술적 제약과 가능성을 체감할 수 있습니다. 완벽한 결과물을 만들지는 못하더라도, 이 과정에서 얻는 기술에 대한 직관과 이해는 개발자와의 협업에서도, 새로운 서비스를 기획할 때도 분명 자산이 됩니다. 마치 외국어를 유창하게 구사하지는 못해도 간단한 대화를 나눌 수 있게 되면 그 문화를 이해하는 깊이가 달라지는 것처럼, vibe-coding 도구는 비개발자가 기술의 언어로 생각해볼 수 있는 창을 열어준 셈입니다. 완벽한 도구는 아니지만, 배우고 실험하는 과정 자체가 의미 있는 경험이었습니다.

      댓글 0

      DEVOTEE를 활성화 시키면
      지금 작성한 댓글에 AI가 댓글을 달아줍니다.

      Todd 님의 최신 블로그

      더보기

      DEVOTEE 추천 블로그

      동영상 기고하기