← 블로그로 돌아가기
Day 10

바이브코딩 도전 10일차 — 디스코드 & 스레드 댓글 생성기를 하루에 2개 만들기

2026년 4월 8일 PM 11:50

devlog바이브코딩 도전discordthreads

이 도구는 누구를 위한 건가

콘텐츠를 만들다 보면 SNS 대화 캡처가 필요한 순간이 꽤 있습니다.

진짜 캡처를 쓰면 개인정보 가리기가 번거롭고, 포토샵으로 만들면 시간이 너무 걸립니다. 웹에서 바로 만들고, 이미지로 저장할 수 있으면 편하겠다 — 이게 출발점이었습니다.

이미 카카오톡 대화 생성기유튜브 댓글 생성기를 만들어 놓은 상태라, 이번에는 디스코드Threads 두 개를 한꺼번에 도전했습니다.


왜 하루에 2개가 가능했나

비밀은 없고, 같은 구조를 반복했습니다.

카톡 생성기 → 유튜브 생성기를 거치면서 "SNS 캡처 생성기"의 공식이 만들어졌습니다.

  1. 왼쪽에 설정 패널, 오른쪽에 실시간 프리뷰
  2. 프리뷰에서 직접 텍스트를 클릭해서 편집 가능
  3. 완성되면 PNG 이미지로 저장하거나 클립보드에 복사
  4. 개인정보 보호를 위한 프로필 사진 모자이크 기능

이 뼈대는 그대로 두고, 플랫폼마다 다른 살만 바꿨습니다.


디스코드 생성기 — 뭘 넣어야 "진짜처럼" 보일까

디스코드를 디스코드답게 만드는 요소들이 있습니다.

다크 테마: 디스코드 하면 떠오르는 어두운 배경. 실제 앱 스크린샷과 비교하면서 색상을 하나하나 맞췄습니다. 검색해서 나오는 색상값이 옛날 버전인 경우가 많아서, 결국 실제 앱 캡처를 스포이트로 찍어서 확인했습니다.

메시지 그룹핑: 같은 사람이 연속으로 메시지를 보내면 두 번째부터는 프로필 사진과 이름이 사라집니다. 이 작은 디테일 하나가 "진짜 같다"와 "가짜 같다"의 차이를 만들었습니다.

답장(Reply): 메시지에 답장하면 원본 메시지 미리보기가 곡선으로 연결되어 표시됩니다. 디스코드 특유의 UI인데, 이걸 넣으니 확실히 완성도가 올라갔습니다.

봇 배지 & 리액션: 봇 유저에게는 파란색 BOT 배지가 붙고, 메시지 아래에 이모지 리액션을 추가할 수 있습니다. 디스코드 커뮤니티 느낌을 살리는 핵심 요소입니다.

스레드 미리보기: 메시지에 스레드가 열려있으면 카드 형태로 미리보기가 표시됩니다. 녹색 "메시지 N개" 뱃지가 디스코드의 시그니처라 넣는 것만으로 분위기가 살았습니다.


Threads 생성기 — 실제 앱을 보고 만들었다

Threads는 디스코드보다 UI가 심플한 편이라 빠르게 만들 수 있을 거라 생각했는데, 의외의 함정이 있었습니다.

처음에 답글 사이에 세로 연결선을 넣었는데, 실제 Threads 앱 스크린샷을 자세히 보니 그런 선이 없었습니다. 그냥 들여쓰기만으로 부모-자식 관계를 표현하고 있었습니다. 넣고, 비교하고, 빼고 — 5분이면 끝나는 일이지만 실제 앱을 안 보고 감으로 만들었으면 어색한 결과물이 됐을 겁니다.

Threads 생성기의 주요 기능:


실제로 써보면 이렇습니다

두 생성기 모두 같은 방식으로 작동합니다.

  1. 유저를 추가하고 프로필 사진·이름·역할 색상을 설정
  2. 메시지나 댓글을 하나씩 추가 (답장, 리액션, 스레드 등 옵션 선택)
  3. 오른쪽 프리뷰에서 실시간으로 확인
  4. "편집" 모드에서 프리뷰를 직접 클릭해 텍스트 수정 가능
  5. 완성되면 이미지 저장 또는 클립보드 복사

프로필 사진은 직접 업로드하거나, 개인정보 보호가 필요하면 모자이크 처리할 수 있습니다. 드래그 앤 드롭으로 메시지 순서도 바꿀 수 있고요.


앞으로의 계획

"가짜 SNS 캡처 생성기" 시리즈가 이제 4개가 됐습니다.

다음은 X(Twitter)나 Instagram도 재밌을 것 같습니다. 구조가 잡혀 있으니 새 플랫폼을 추가하는 것 자체는 빠른데, 매번 플랫폼마다 "이 디테일 하나"를 맞추는 데 예상보다 시간이 걸리는 게 재밌는 부분입니다.

콘텐츠 제작에 SNS 캡처가 필요하신 분들은 한번 써보시고, 필요한 기능이 있으면 피드백 주세요!