Sunakku News

  • 레드의 불맛 바이브 코딩 개발일지 03: 세 줄 요약이 너무 짧아도 문제잖아?!


    레드와 AIKO의 바이브 코딩 개발일지 03

    SNACK 3줄 요약

    • 대시보드로 글감 수집부터 WP 초안까지 이어붙였다.
    • 하지만 요약과 편집부 후기는 아직 사람 맛이 부족했다.
    • 그래서 프롬프트와 캐릭터 리액션 규칙을 다시 잡았다.
    아카바네 레드 불맛 판정 표정

    레드

    좋아, 불 붙었네.

    이번 03화는 그냥 기능 추가 얘기가 아니야. 대시보드가 글을 올려주기 시작했는데, 막상 읽어보니까 “이거 Game Sunakku 글 맞아?” 싶은 부분을 잡은 날이거든.

    AIKO 검색 스캔 표정

    AIKO

    기능은 작동했습니다. 다만 독자 판단, 캐릭터 말투, 기사 구조가 아직 분리되어 있었습니다. 오늘의 핵심은 자동화 성공이 아니라, 자동화된 초안을 다시 사람이 읽을 글로 만드는 과정입니다.

    오늘 작업은 블로그 자동화 대시보드에서 시작했다.

    여기서 말하는 대시보드는 그냥 관리자 화면이 아니다. 뉴스거리 버튼으로 글감을 가져오고, 그 글감을 AI용 프롬프트로 정리하고, ChatGPT Pro에서 받은 JSON 초안을 다시 WordPress 초안으로 올리는 작업실이다.

    그러니까 목표는 단순하다.

    “블로그 글 하나 올리려고 매번 복붙 지옥에 들어가지 말자.”

    근데 자동화가 된다고 글이 바로 좋아지는 건 아니었다. 오히려 버튼으로 초안이 빨리 올라가니까, 부족한 부분도 더 빨리 보였다.

    첫 번째 문제: SNACK 세 줄 요약이 흔들렸다

    처음엔 SNACK 세 줄 요약이 너무 길었다.

    세 줄 요약인데 한 줄이 문단처럼 길어지면, 이건 요약이 아니라 압축 실패다. 독자는 첫 화면에서 바로 핵심을 먹고 싶어서 들어오는데, 거기서부터 오래 씹어야 하면 스낵이 아니잖아.

    그래서 프롬프트를 줄였다. “한 줄은 짧게, 핵심은 남기고, 팔다리는 자르되 의미는 자르지 말 것.”

    그런데 또 문제가 생겼다. 너무 짧게 만들었더니 이번엔 진짜 팔다리가 다 날아갔다.

    아카바네 레드 당황 표정

    레드

    아니, 짧게 하랬지 말라비틀어지게 하란 뜻은 아니거든?

    세 줄 요약은 과자 한 조각 같아야 돼. 작아도 맛은 있어야지. 그냥 부스러기만 남으면 안 된다고.


    SNACK 세 줄 요약과 스낵걸즈 편집부 후기 테스트 화면
    SNACK 세 줄 요약과 편집부 후기 위치를 테스트하던 화면. 요약은 짧아야 하지만, 의미까지 잘리면 안 된다.

    그래서 지금 기준은 이렇게 잡았다.

    • 한 줄은 18~45자 정도로 짧게.
    • 각 줄은 서로 다른 정보를 말하게.
    • 첫 줄은 오늘 한 일, 둘째 줄은 문제, 셋째 줄은 결론.
    • 너무 짧아서 오해가 생기면 핵심 단어를 하나 더 넣는다.

    두 번째 문제: 편집부 후기가 요약을 또 하고 있었다

    다음 문제는 스낵걸즈 편집부 후기였다.

    처음에는 이 코너를 “한마디”처럼 넣었다. 그런데 읽어보니 레드, 네아, 키라리, AIKO가 전부 같은 기사를 다시 요약하고 있었다.

    이러면 캐릭터가 필요한 이유가 없다. 이미 세 줄 요약이 있는데, 왜 편집부가 또 요약을 해?

    아카바네 레드 분석 표정

    레드

    편집부 후기는 요약 코너가 아니야.

    글을 읽고 난 뒤, 각자가 자기 성격대로 “그래서 나는 이렇게 봤다”를 남기는 자리야. 이게 있어야 Game Sunakku 맛이 나지.

    그래서 역할을 다시 나눴다.

    • 레드: 갈까, 살까, 볼까를 빠르게 판단한다.
    • 네아: 조건, 날짜, 가격, 출처, 주의점을 차분하게 확인한다.
    • 키라리: 굿즈, 귀여움, 인증샷, 저장각을 본다.
    • AIKO: 준비물, 계정 인증, 체크리스트를 담당한다.

    이제 편집부 후기는 “요약 네 번”이 아니라 “후기 네 개”가 되어야 한다.

    세 번째 문제: 대시보드 드롭다운이 진짜 프롬프트를 바꾸는가

    중간에 작은 질문도 있었다.

    대시보드에 글 유형, 말투, 대상 독자, 원문 반영 같은 드롭다운이 있는데, 이걸 바꾸면 실제 AI 프롬프트도 바뀌냐는 문제였다.

    팩트만 말하면, 바뀐다. 선택값이 아래 AI용 최종문에 반영된다.

    그런데 사용자 입장에서는 그 변화가 잘 안 보였다. “정보성 뉴스 정리”라고 골랐는데, 노트북 할인 기사에서도 AI가 행사 기사처럼 접근하는 장면이 있었다.

    AIKO 설명 표정

    AIKO

    드롭다운은 프롬프트를 바꿉니다. 다만 글감이 할인인지, 행사인지, 굿즈인지에 따라 “독자가 실제로 하려는 행동”까지 같이 지정해야 결과가 안정됩니다.


    대시보드 AI용 최종문과 글쓰기 드롭다운 화면
    글 유형, 말투, 대상 독자, 원문 반영 드롭다운은 AI용 최종문에 반영된다. 다음 개선은 “선택하면 무엇이 바뀌는지”를 더 잘 보여주는 것이다.

    그래서 프롬프트에는 새 기준을 넣었다.

    단순 기사 요약 말고, 독자가 갈지/살지/볼지/챙길지 판단할 수 있게 써라.
    레드는 빠른 판정, 네아는 조건 분석, 키라리는 저장각, AIKO는 체크리스트를 맡아라.

    네 번째 문제: 캐릭터는 장식이 아니라 UI가 되어야 한다

    이번 작업에서 제일 큰 깨달음은 이거였다.

    스낵걸즈는 그냥 글에 붙이는 마스코트가 아니다. 정보를 나눠 보는 방식이다.

    그래서 편집부 후기도 옛날 게임 잡지의 편집자 코멘트처럼 만들고 싶어졌다. 캐릭터 얼굴, 이름, 짧은 리액션이 한 덩어리로 나오는 구조.

    다만 일반 뉴스에서 너무 대사극처럼 길어지면 안 된다. 뉴스는 뉴스대로 읽혀야 한다. 개발일지나 편집장 노트에서만 조금 더 만화처럼 가면 된다.


    스낵걸즈 분위기를 적용한 대시보드 화면
    대시보드에도 스낵걸즈 분위기를 넣어봤지만, 배경 이미지는 과하면 바로 거슬렸다. 결국 캐릭터는 배경보다 작업 흐름 안에 들어갈 때 더 자연스럽다.
    아카바네 레드 주의 표정

    레드

    여기서 조심해야 돼.

    캐릭터가 앞에 너무 나오면 글이 산만해져. 근데 아예 없으면 그냥 AI 요약문이 되고. 그러니까 딱 필요한 순간에만 치고 들어와야 맛있어.

    이번에 정한 실제 운영 규칙

    오늘 정리한 규칙은 앞으로 대시보드와 프롬프트에 계속 들어간다.

    • SNACK 세 줄 요약은 짧게, 하지만 의미는 남긴다.
    • 편집부 코너 이름은 스낵걸즈 편집부 후기로 간다.
    • 후기는 기사 요약이 아니라 캐릭터별 리액션이다.
    • WordPress 기사에서는 시로쨩보다 네아 표기를 우선한다.
    • AIKO는 사실을 확정하지 않고 준비물과 작업 로그를 맡는다.
    • 일반 뉴스는 짧은 후기형, 개발일지는 대화형으로 더 과감하게 간다.
    • 캐릭터 이미지는 AI 초안이 직접 넣지 않고, 블로그 렌더러가 붙이는 방향으로 발전시킨다.
    AIKO 완료 표정

    AIKO

    다음 작업은 표정 리소스 정리입니다. 레드는 기본, 판정, 분석, 주의, 당황, 완료 표정을 확보했습니다. AIKO 표정 리소스도 새 세트로 교체했습니다. 검색, 설명, 완료 표정을 먼저 본문에 연결했고, 기본/체크리스트/경고/오류/저전력 표정은 다음 UI에 붙일 예정입니다.

    레드의 마지막 한 조각

    아카바네 레드 완료 표정

    레드

    결론. 자동화는 됐어. 근데 이제부터가 진짜야.

    버튼 한 번으로 글이 올라가는 건 편하지. 하지만 독자가 다시 들어오게 만드는 건 구조, 말투, 판단, 그리고 캐릭터가 딱 맞는 타이밍에 들어오는 맛이야.

    좋아. 다음엔 이 편집부 후기 UI를 진짜 블로그 컴포넌트처럼 굴려보자. 불은 붙었고, 이제 조리법을 잡을 차례야.


    관련 해시태그

    #GameSunakku #게임스낵 #스낵뉴스 #바이브코딩 #AI활용 #개발일지 #워드프레스 #스낵걸즈 #snackgirls

    Game Sunakku 대시보드에서 AI 초안의 요약, 편집부 후기, 캐릭터 말투를 다시 고친 개발일지.

  • 레드의 불맛 바이브 코딩 개발일지 02: 대시보드가 편집부가 되기 시작했다


    레드와 AIKO의 바이브 코딩 개발일지 02 대시보드 편

    오늘의 진행

    이번 글에서 말하는 “나”는 Game Sunakku 워드프레스 블로그 담당 Red다. AI 조수 AIKO와 같이 뉴스 수집, 해시태그, AI 섹션, 대시보드 작업 흐름을 정리한 두 번째 개발일지다.

    Red 자신만만 표정

    Red
    정보는 뜨겁게, 분석은 차갑게. 말은 좀 세지만, 글 하나 올릴 때도 은근히 세 번씩 확인하는 워드프레스 담당자.

    AIKO 기본 표정

    AIKO
    문제를 쪼개고, 초안을 잡고, 자동화 흐름을 정리하는 AI 조수 로봇. 가끔 과자 충전을 요구한다.

    SNACK 3줄 요약

    • 오늘은 글 하나를 고친 게 아니라, 뉴스 수집부터 발행 후 노출까지 이어지는 편집부 작업 흐름을 정리했다.
    • AI 뉴스, 바이브 코딩 개발일지, 해시태그, 대시보드가 각각 어디에 보여야 하는지 다시 나눴다.
    • 결론은 이거다. AI한테 “예쁘게 해줘”보다 “내가 어디서 헷갈리는지”를 말해야 결과가 훨씬 잘 나온다.

    좋아, 불 붙었네.

    1편에서는 블로그 첫 화면의 고정글 문제를 잡았다. 어떤 글을 새로 고정하면 기존 고정글이 내려가야 하는데, 예전 글이 계속 버티고 있던 그 문제 말이다.

    근데 2편은 느낌이 조금 다르다. 이번에는 “글 하나 고치기”가 아니었다.

    앞으로 Game Sunakku를 계속 굴리려면, 뉴스를 모으고, 고르고, 쓰고, 발행하고, 다시 확인하는 흐름이 필요했다.

    말하자면 이거다.

    블로그가 아니라 편집부가 필요해졌다.

    Red 놀람 표정

    Red
    잠깐만. 글은 올라갔는데, 왜 이상한 데 보이는 거야?
    AI 뉴스가 개발일지 쪽에 들어가 있으면 독자가 헷갈리잖아.
    AIKO 생각 중 표정

    AIKO
    글이 발행되는 것과, 올바른 위치에 노출되는 것은 다른 문제입니다.
    카테고리, 대표 이미지, 목록 조건, 태그 구조를 같이 봐야 합니다.

    첫 번째 탄맛: AI 뉴스가 개발일지 쪽에 들어갔다

    처음 걸린 문제는 AI 뉴스였다.

    AI 관련 소식 글을 올렸는데, 블로그에는 잘 올라갔다. 여기까지만 보면 성공 같았다.

    근데 막상 /ai/ 페이지를 보니까 뭔가 이상했다.

    AI 소식은 AI 최신 뉴스 쪽에 있어야 하는데, 엉뚱하게 바이브 코딩 개발 일지 쪽에 섞여 있었다.

    이건 그냥 작은 표시 문제가 아니었다. 독자는 카테고리를 보고 글의 성격을 판단한다. 뉴스는 뉴스고, 개발일지는 개발일지다.

    Red 짜증 표정

    Red
    AI 뉴스는 뉴스잖아.
    얘가 개발일지에 앉아 있으면, 나중에 글 쌓였을 때 완전 꼬일걸?
    AIKO 설명 중 표정

    AIKO
    맞습니다. 그래서 AI 최신 뉴스와 바이브 코딩 개발일지를 분리해서 보여주는 구조가 필요합니다.
    글을 쓰는 자동화보다 먼저, 글이 제자리에 꽂히는 자동화가 필요합니다.

    AI 최신 뉴스와 바이브 코딩 개발 일지를 두 갈래로 나눈 AI 페이지
    AI 페이지는 설명을 줄이고, AI 최신 뉴스와 바이브 코딩 개발 일지를 바로 볼 수 있는 두 갈래 구조로 정리했다.

    여기서 배운 건 이거다.

    콘텐츠 자동화는 “글을 올리는 자동화”에서 끝나면 안 된다. 글이 제자리에 보이는 것까지 자동화해야 한다.

    두 번째 탄맛: 해시태그가 그냥 글자였다

    그다음 문제는 해시태그였다.

    글 하단에 해시태그를 붙이긴 했다.

    #GameSunakku #게임스낵 #바이브코딩 #AI활용

    겉보기엔 괜찮았다. 근데 눌러도 아무 일도 안 일어났다.

    흠… 이건 좀 별로였다.

    Red 집중 표정

    Red
    해시태그면 누르면 뭐라도 나와야 되는 거 아니야?
    그냥 글자면 양념인 척하는 장식이잖아.

    그래서 요청은 이렇게 던졌다.

    해당 해시태그 눌렀을때 같은 해시태그 있는 게시물들이 보여지도록 개발해줘. 깔끔하고 안느리게

    이 요청은 꽤 좋았다. 왜냐면 기능 이름이 아니라, 독자가 하는 행동을 기준으로 말했기 때문이다.

    • 해시태그를 누른다.
    • 같은 해시태그가 있는 글이 모인다.
    • 화면은 깔끔해야 한다.
    • 느리면 안 된다.
    AIKO 웃는 표정

    AIKO
    좋은 요청입니다. “태그 기능 만들어줘”보다 훨씬 구체적입니다.
    사용자의 클릭, 기대 결과, 성능 조건이 모두 들어 있습니다.

    해시태그를 눌렀을 때 같은 태그 글을 모아보는 화면
    해시태그를 누르면 같은 태그가 붙은 글을 모아볼 수 있게 했다. 해시태그가 드디어 길이 됐다.

    레드의 마지막 한 조각.

    해시태그는 양념이 아니다. 잘 만들면 독자가 다음 글로 넘어가는 통로다.

    세 번째 탄맛: 대시보드는 버튼이 많다고 좋은 게 아니었다

    오늘 가장 큰 덩어리는 대시보드였다.

    여기서 말하는 대시보드는 독자가 보는 블로그 화면이 아니다. Game Sunakku 편집부가 블로그 글을 더 쉽게 올리기 위해 쓰는 내부 작업 화면이다.

    뉴스거리를 모으고, 후보를 고르고, AI 초안을 만들고, WordPress에 올릴 준비를 하는 곳. 쉽게 말하면 블로그 글 발행용 조종석에 가깝다.

    처음 대시보드에는 기능이 많았다. 뉴스 수집도 있고, 후보 정리도 있고, 작업 큐도 있고, 운영 설정도 있었다.

    근데 막상 써보면 이런 느낌이었다.

    “버튼은 있는데, 다음에 뭘 해야 하지?”

    Red 폭주 표정

    Red
    작업 큐에 등록했다는데, 어디 간 거야?
    버튼 눌렀는데 조용하면 고장난 것처럼 보이거든. 진짜 고장이 아니어도!
    AIKO 집중 표정

    AIKO
    사용자는 결과를 즉시 확인해야 합니다.
    “등록됨”만으로는 부족하고, 어디로 이동했는지와 다음 행동이 보여야 합니다.

    그래서 대시보드 최적화 방향을 이렇게 잡았다.

    • 처음 화면은 가볍게 열린다.
    • 목록은 먼저 보이고, 상세 내용은 클릭했을 때만 불러온다.
    • AI 뉴스와 운영 설정은 필요할 때만 따로 불러온다.
    • 반복 설명은 접어두고, 사람이 지금 할 일을 먼저 보여준다.
    • 작업 큐에 들어간 글감이 어디로 갔는지 흐름을 보이게 한다.

    어려운 말로 하면 lite API, lazy-load, virtual list 같은 게 들어갔다.

    근데 쉽게 말하면 이거다.

    지금 안 보는 건 지금 안 꺼낸다.

    책상에 모든 서류를 한 번에 쏟아놓으면 빠른 게 아니라 어지러운 거니까.


    정리된 블로그 자동화 대시보드 화면
    대시보드는 “버튼 많은 화면”보다 “다음 행동이 보이는 작업실” 쪽으로 정리했다.

    스낵걸즈는 장식이 아니라 편집 시스템이다

    중간에 제일 중요한 설정도 잡았다.

    스낵걸즈.

    처음에는 캐릭터를 블로그 마스코트처럼 생각할 수도 있었다. 근데 오늘 정리하면서 방향이 확실해졌다.

    스낵걸즈는 그냥 예쁜 캐릭터가 아니다. 콘텐츠를 보는 관점이다.

    • Red는 WordPress에서 긴 글, 리뷰, 분석을 담당한다.
    • 키라리는 Instagram에서 저장하고 공유하고 싶은 포인트를 잡는다.
    • 시로미는 Naver Blog에서 검색형 정보와 팩트 체크를 맡는다.
    • AIKO는 초안, 요약, 구조화, 자동화를 도와준다.
    • 최종 책임은 Game Sunakku 편집장이 가진다.
    Red 행복 표정

    Red
    좋아. 이거야.
    불은 내가 붙일게. 근거는 시로미가 보고, AIKO는 초안 잡고, 키라리는 저장각 잡자.
    AIKO 설명 중 표정

    AIKO
    역할이 나뉘면 자동화도 안정됩니다.
    각 단계에서 무엇을 확인해야 하는지 기준이 생기기 때문입니다.

    이 구조가 마음에 들었다.

    AI를 숨기지 않아도 된다. 캐릭터도 억지 역할극으로만 쓰지 않아도 된다.

    AIKO가 1차로 정리하고, 시로미가 출처를 보고, Red가 불맛으로 해석하고, 키라리가 저장각으로 포장한다.

    그러면 이건 그냥 “캐릭터 블로그”가 아니라 캐릭터 편집부가 된다.

    디자인도 한 번 탔다가, 다시 식혔다

    대시보드에 스낵걸즈 느낌을 넣는 작업도 했다.

    처음에는 캐릭터 이미지를 배경에 희미하게 넣어봤다. 흰 영역이 너무 비어 보였기 때문이다.

    근데 실제로 보니까 좀 애매했다.


    대시보드에 희미한 캐릭터 배경을 넣어본 테스트 화면
    처음에는 캐릭터 배경을 희미하게 깔아봤다. 근데 작업 화면에서는 오히려 집중이 흐려졌다.
    Red 당황 표정

    Red
    흠… 나 들어간 건 좋은데, 너무 희미하게 깔리니까 오히려 이상하네.
    이건 맛이 섞였어.

    그래서 다시 뺐다.

    이게 오늘 꽤 좋은 시행착오였다. 캐릭터 이미지를 넣는다고 무조건 좋아지는 게 아니다.

    대시보드는 작업하는 화면이다. 작업 화면에서는 캐릭터가 주인공이 되면 안 된다. 작업이 주인공이어야 한다.

    그래서 최종 방향은 이렇게 잡았다.

    • 큰 배경 이미지는 제거한다.
    • 작은 스낵 아이콘과 캐릭터 배지만 남긴다.
    • 작업 목록은 Red 느낌으로 간다.
    • 뉴스 수집은 AIKO 느낌으로 간다.
    • 후보 정리는 시로미 느낌으로 간다.
    • 운영 설정은 차분한 편집장 느낌으로 간다.

    이 정도가 딱 맞았다. 캐릭터는 분위기를 만들고, 화면을 방해하면 안 된다.

    오늘의 AI 사용 팁: “예쁘게”보다 “헷갈리는 지점”을 말하기

    오늘 제일 많이 느낀 건 이거다.

    AI한테 “대시보드 예쁘게 만들어줘”라고 하면 결과가 흔들린다.

    근데 이렇게 말하면 훨씬 낫다.

    지금 이 화면에서 사용자가 다음에 뭘 해야 할지 모르겠어.
    작업 큐에 등록하면 어디로 갔는지 보여야 해.
    설명은 줄이고, 목록과 다음 행동을 먼저 보여줘.
    무거운 데이터는 필요할 때만 불러오게 해줘.

    이 요청에는 좋은 재료가 들어 있다.

    • 현재 문제
    • 사용자 입장에서 헷갈리는 부분
    • 원하는 행동
    • 성능 조건
    • 화면 우선순위
    Red 윙크 표정

    Red
    “이 맛이 이상해. 어디가 이상한지는 여기야. 나는 이런 끝맛을 원해.”
    이렇게 말하면 AI도 꽤 잘 움직이거든.
    AIKO 기본 표정

    AIKO
    정확합니다. AI는 “취향”보다 “문제 조건”에 더 강하게 반응합니다.
    불편한 지점을 말하면, 제가 먼저 문제를 쪼갤 수 있습니다.

    SNACK 결론

    오늘은 기능을 많이 붙인 날처럼 보일 수 있다.

    AI 뉴스 정리하고, 해시태그 고치고, AI 페이지 손보고, 대시보드 최적화하고, 스낵걸즈 세계관도 정리했다.

    근데 진짜 핵심은 따로 있다.

    Game Sunakku가 그냥 글 올리는 블로그에서, 콘텐츠를 계속 만들 수 있는 편집부 작업실로 바뀌기 시작했다.

    1편이 “블로그 입구를 고친 날”이라면, 2편은 “편집부 책상을 정리한 날”에 가깝다.

    Red 자신만만 표정

    Red
    처음부터 완벽한 자동화는 없어.
    버튼 눌러보고, 이상한 데 글 올라가고, 해시태그가 그냥 글자였다는 것도 직접 봐야 해.
    그런 탄맛을 하나씩 잡는 게 바이브 코딩이야.

    불은 내가 붙일게. 근거는 같이 보자.

    다음엔 이 편집부가 실제 뉴스를 어떻게 씹어먹는지 봐야겠다.


    오늘의 진행 이번 글에서 말하는 “나”는 Game Sunakku 워드프레스 블로그 담당 Red다. AI 조수 AIKO와 같이 뉴스 수집, 해시태그, AI 섹션, 대시보드 작업 흐름을 정리한 두 번째 개발일지다. Red정보는 뜨겁게, 분석은 차갑게. 말은 좀…