수영장(Sooyoung Archive)
홈개발일지이번캠App소개
전체보기
프로젝트
블로그 만들기그림톡캠핑 인스타
개발

© 2026 수영장 (Sooyoung Archive). All rights reserved.

개인정보처리방침연락처
개발일지 목록
개발

삼문판결 만들기 1편: '좋은 말' 대신 '판결문'을 선택한 이유

2026년 2월 24일약 4분 소요45회 조회
목차
시작점: 대화형 조언이 아니라 문서형 판결구현: Next.js 16으로 빠르게 MVP디자인: 꾸미는 대신 정리했다가장 어려웠던 건 “모델”이 아니라 “가드레일”만들고 나서 든 생각

삼문판결 만들기: “좋은 말” 대신 “판결문”을 선택한 이유

아이디어를 말하면 보통 이렇게 돌아온다.
“좋은 아이디어네요. 검증해보세요.”

문제는, 이 말이 기분은 좋게 만들지만 결정을 돕지는 않는다는 거였다.
그래서 나는 반대로 가보기로 했다.

칭찬 없는 판결 도구.
결론은 세 문장으로만.
이름은 삼문판결.


시작점: 대화형 조언이 아니라 문서형 판결

처음부터 목표는 분명했다.

  • 길게 설명하지 않는다.
  • 애매하게 위로하지 않는다.
  • 읽자마자 다음 행동이 보이게 만든다.

그래서 출력 형식을 아예 고정했다.

  1. 배지: GUILTY / CONDITIONAL / NOT_GUILTY
  2. 문장 1: 판결 (가벼운 블랙코미디 허용)
  3. 문장 2: 이유 1개 (axis 하나만)
  4. 문장 3: 행동 1개 (구체적으로 하나만)

말 그대로 “상담”이 아니라 “판결문”처럼 보이게.


구현: Next.js 16으로 빠르게 MVP

이번 MVP는 Next.js 16(App Router)로 만들었다.

  • / : 입력 폼
  • /api/judge : 판결 생성
  • /r/[slug] : 결과 페이지
  • /r/[slug]/opengraph-image : 공유용 카드 이미지

핵심은 결과 링크가 퍼졌을 때였다.
링크만 던져도 썸네일 자체가 판결 카드로 보이게 만들고 싶었다.

그래서 generateMetadata에서 slug별 OG 메타를 동적으로 붙이고,
next/og로 카드 이미지를 직접 렌더링했다.


디자인: 꾸미는 대신 정리했다

처음엔 시각 효과를 좀 넣어볼까 했는데, 금방 포기했다.
이 서비스는 화려하면 오히려 신뢰가 떨어졌다.

최종 카드 구성은 아주 단순하다.

  • 좌상단: 삼문판결
  • 우상단: 배지 pill
  • 중앙: 문장 1 크게
  • 하단: 문장 2, 3
  • 맨 아래: axis 라인

과장 없이, 판결문처럼.


가장 어려웠던 건 “모델”이 아니라 “가드레일”

만들다 보니 제일 중요한 건 모델 선택보다 출력 규율이었다.

그래서 제약을 강하게 걸었다.

  • 문장 길이 제한
  • 금지 표현 필터
  • 문장2는 axis 하나만
  • 문장3은 행동 하나만
  • 모욕/추상 처방 금지

그리고 규칙 위반 시
자동으로 한 번 더 재생성하도록 했다.

결국 삼문판결은 LLM 앱이라기보다,
“문장 규격 엔진 + 문서 UI + 공유 카드 시스템”에 가까워졌다.


만들고 나서 든 생각

이번에 가장 크게 배운 건 이거다.

좋은 답변보다 좋은 형식이 먼저다.

형식이 날카로우면,
모델이 조금 부족해도 결과물이 꽤 쓸 만해진다.

삼문판결은 아직 MVP지만,
적어도 하나는 확실하다.

아이디어를 읽고 나서
“그래서 뭘 해야 하지?”가 아니라
“아, 지금 이걸 하면 되겠구나”가 남게 만들고 싶었다.

클릭할 때마다 작가에게 따뜻한 응원이 전달됩니다 ❤️

이 글이 유익하셨나요?
동료 개발자들과 경험과 노하우를 공유해 보세요.
이전 글개발
admin-starter-kit 만들기 (2)
개발다음 글
개인 블로그 만들기부터 AdSense 수익화까지: 완벽 가이드

함께 읽으면 좋은 다른 개발일지

'개발' 및 추천 아카이브 글 모음

Next.js App Router에서 구글 서치 콘솔 '적절한 표준 태그가 포함된 대체 페이지' 해결기
개발
Next.js App Router에서 구글 서치 콘솔 '적절한 표준 태그가 포함된 대체 페이지' 해결기
Next.js App Router의 메타데이터 상속 구조로 인해 모든 블로그 포스트의 canonical URL이 홈으로 고정되어 검색 색인에서 누락되던 문제를 self-referencing canonical과 한글 슬러그 인코딩으로 해결한 실전 트러블슈팅 기록.
2026. 9. 7.

댓글

목차
시작점: 대화형 조언이 아니라 문서형 판결구현: Next.js 16으로 빠르게 MVP디자인: 꾸미는 대신 정리했다가장 어려웠던 건 “모델”이 아니라 “가드레일”만들고 나서 든 생각
0회
🏊‍♂️
개발
Next.js 16과 Tailwind CSS에서 다크/라이트 테마 깜빡임(FOUC) 없이 구현하기
Next.js 16 App Router 환경에서 localStorage 기반 다크 모드 전환 시 발생하는 첫 화면 깜빡임(FOUC) 문제를 인라인 스크립트와 CSS 변수로 깔끔하게 해결한 과정.
2026. 9. 4.2회
🏊‍♂️
개발
React 마크다운 렌더러에 스마트 목차(TOC)와 스크롤 스파이(Scroll-Spy) 적용기
긴 기술 블로그 아티클을 읽기 편하게 만들기 위해 마크다운 헤딩(#, ##)을 자동 추출하여 동적 목차(TOC)를 생성하고 IntersectionObserver로 실시간 스크롤 스파이를 구현한 경험.
2026. 9. 4.2회