Sunakku News

  • 레드의 불맛 바이브 코딩 개발일지 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정보는 뜨겁게, 분석은 차갑게. 말은 좀…