좌충우돌 속에 문제점은 많지만 가까스로 1차 완성

<과정>


 “Sean’s WordSmith”용 글쓰기 웹에디터 페이지를 만들고자 했다.

  요구한 핵심 기능은 단계형 워크플로우로, 각 단계마다

1) AI 제안 3개 생성 → 2) 수정안 입력(그대로 진행 또는 직접 수정) → 3) 확정안 저장 → 4) 다음 단계 이동 흐름을 버튼으로 진행하도록 하는 것이었다.

  또한 단계별로 기사 작성 기준/원칙/분량 등 개별 요청사항을 입력해 프롬프트에 반영하도록 요청했다.

  로컬에서 HTML 더블클릭 실행이 안 보이거나 멈추는 문제가 반복되었고, 원인으로 브라우저 보안 정책(CORS), TSX/모듈 로딩 문제가 제기되었다. 이를 해결하려고 코드 통합, index.html 구조 정리, 로딩/에러 처리 보강 등이 진행되었다.

  실행은 되었지만 ‘처리 중’에서 멈춤 문제가 발생했고, 이는 API 호출 실패 시 로딩 해제 누락, 키 선택 로직 대기 문제 등으로 진단되어 try/catch/finally 등으로 보완했다.

  API 키 자동 연결/입력 문제가 계속 발생했다. 특정 환경에서 window.aistudio 기반 자동 키 선택이 지원되지 않아, 안내/수동 설정 흐름으로 유도하는 방향이 논의되었다.

  단계 진행 중 이전 단계 확정 내용이 다음 단계에 반영되지 않고 같은 내용이 반복되는 문제가 핵심 이슈로 남아, 단계별 상태관리/초기화/프롬프트 설계 보강을 반복 요청했다.

  기사 분량 선택은 처음 3종(2~3천/3~5천/5천+)으로 추가 요청되었다가, 이후 1,000자 구분을 포함한 4종으로 변경되었다.

  추가 요구로 이전 단계로 돌아가기 버튼이 요청되었다.

  마지막으로 이미지 생성 기능(나노바나나 프로 연동)은 제외하도록 변경되었다.

<결과물>

1. 서비스/도구 개요

  • 서비스명: Sean’s WordSmith

  • 핵심 콘셉트:
    “생각이 설계도 위의 정교한 문장이 되는 곳”
    → 아이디어를 구조화해 신문 기사 형태의 완성도 높은 글로 만들어주는 글쓰기 도구.


2. 주요 기능 흐름

① 기사 주제 및 초기 아이디어 입력

  • 사용자가 기사 주제 또는 키워드를 자유롭게 입력

  • 예시 입력: “인공지능”

② 목표 기사 분량 선택

기사 목적에 따라 분량과 성격을 명확히 구분

  • 1,000자

    • 핵심 정보의 신속한 전달

    • 브리핑·요약 기사에 적합

  • 2,000~3,000자

    • 핵심 쟁점과 분석 중심

    • 일반적인 신문 기획 기사

  • 3,000~5,000자

    • 다양한 인터뷰와 데이터 포함

    • 심층 분석 기사

  • 5,000자

    • 역사적 배경부터 미래 전망까지

    • 장문 리포트·해설 기사

③ 기사 설계 시작

  • 선택한 주제와 분량을 기반으로 기사 설계 프로세스 자동 시작

  • 단순 글 생성이 아니라 ‘설계 → 구조화 → 문장화’에 초점


3. 전체 UX의 특징

  • 초보자도 쉽게 접근 가능한 구조

  • 글쓰기 과정을 “선택 → 설계 → 실행”으로 단순화

  • 기자·칼럼니스트 관점의 체계적 기사 생산 도구 지향

산의 wordhash - 스크린샷

1단계: Topic Smith (뉴스 가치 분석 및 리드문 작성)

  • 어떤 작업인가요? 사용자가 던진 '거친 아이디어'를 '기삿거리'로 변환하는 단계입니다.

  • 상세 내용: AI 편집장이 이 아이디어가 얼마나 시의성이 있는지, 독자들이 흥미로워할 핵심 요소가 무엇인지 분석합니다. 그리고 기사의 첫인상을 결정하는 가장 중요한 '리드(Lead) 문장'을 3개 정도 제안합니다.

  • 결과물: 기사의 방향성을 담은 강렬한 도입부 문장.

2단계: Angle Smith (독보적인 보도 관점 설정)

  • 어떤 작업인가요? 같은 주제라도 남들과 다른 '차별화된 시각'을 정하는 단계입니다.

  • 상세 내용: 단순히 정보를 나열하는 것이 아니라, "경제적 관점에서 볼 것인가?", "사회적 약자의 시선에서 볼 것인가?" 등 기사의 깊이를 더할 3가지 심층 취재 포인트를 제안합니다.

  • 결과물: 기사를 독특하게 만들어 줄 날카로운 분석 관점.

3단계: Reader Smith (용어 해설 및 배경 지식 보강)

  • 어떤 작업인가요? 독자가 기사를 읽다 멈추지 않도록 '친절함'과 '신뢰도'를 더하는 단계입니다.

  • 상세 내용: 기사에 등장하는 어려운 전문 용어를 쉽게 풀이해주고, 주장에 힘을 실어줄 관련 통계 데이터나 역사적 배경 지식을 AI가 찾아내어 제안합니다.

  • 결과물: 독자 친화적인 용어 설명과 기사의 근거가 될 팩트 꾸러미.

4단계: Structure Smith (전체 구성 및 소제목 설계)

  • 어떤 작업인가요? 집을 짓기 전 '상세 설계도'를 그리는 단계입니다.

  • 상세 내용: 선택한 기사 분량(1,000자~5,000자 이상)에 맞춰 [서론-본론1-본론2-본론3-결론]의 흐름을 짭니다. 각 문단에 들어갈 핵심 내용을 요약하고, 시선을 끄는 소제목들을 배치합니다.

  • 결과물: 논리적 흐름이 완벽한 기사 아웃라인.

5단계: Draft Smith (본문 집중 집필)

  • 어떤 작업인가요? 설계도 위에 실제 기사 본문을 길게 써 내려가는 '실전 집필' 단계입니다.

  • 상세 내용: 앞서 확정된 리드문, 관점, 배경지식, 구조를 모두 통합하여 풍성한 문장으로 기사를 완성합니다. 설정한 목표 분량을 채울 수 있도록 AI가 상세한 묘사와 분석을 담아 초안을 작성합니다.

  • 결과물: 완성된 형태의 기사 본문 전체.

6단계: Final Check (최종 퇴고 및 팩트 체크)

  • 어떤 작업인가요? 발행 전 마지막으로 문장을 다듬고 논리를 점검하는 '데스킹(Desking)' 단계입니다.

  • 상세 내용: 전체 기사의 흐름이 자연스러운지, 기자의 시각에서 어색한 표현은 없는지 검토합니다. 가장 날카롭고 세련된 문체(~했다, ~이다)로 최종 수정을 거쳐 기사를 완성합니다.

  • 결과물: 즉시 발행 가능한 수준의 전문 기사.


💡 사용자 입장에서의 흐름

사용자는 각 단계마다 AI가 제안하는 3가지 옵션 중 하나를 선택하거나, 자신의 생각을 더해 '확정' 버튼을 누르기만 하면 됩니다. 이렇게 6번의 확정을 거치면, 파편화되었던 아이디어가 어느새 전문적인 한 편의 기획 기사로 변해있게 됩니다.

시연 동영상

https:Bm0efxerhPs//youtu.be/

<추후 과제>

좀 더 고도화된 구조로 업그레이드: 문단 형식 조정, 구조 논리 검증, 팩트 체크, 오탈자 및 문장 보완, 출력 형태 다양화 등

뉴스레터 무료 구독

👉 이 게시글도 읽어보세요