# AI 가 사람보다(?) 뛰어난 작곡 실력을 보인 사례가 나왔다

얼마전 (2024.04) 한 교육박람회 주제가 공모전에서 12개의 곡 중 AI 가 작곡한 1개의 곡이 다른 응모작들을 제치고 1등에 당선된 것이 뒤늦게 밝혀진 사례가 뉴스에 나왔습니다.

그리고 며칠 전에는 회사 후배가 장난삼아 AI 로 곡을 만들며 동료들과 "놀이" 를 하는 모습을 보았는데 재미있는 가사를 만들고 AI 작곡 플랫폼을 활용해 간단히 만들어낸 음악이 마치 전문가가 작곡하고 유명 가수가 부른 것 같이 만들어져 나온것을 보고 놀랄 수 밖에 없었네요.

저도 한시간 정도 투자해서 이것저것 만져보니 어느정도는 제가 기대하던 것과 어느정도 유사한 분위기의 음악을 만들 수 있었고, 대략적인 방법을 초등학생 아들에게 간단히 알려주었는데 바로 다음날 잠깐 해보더니 만든 노래를 저에게 들려주더군요. 그만큼 쉽습니다 하지만 강력합니다.

# AI 음악 생성 플랫폼 들

AI 로 음악을 만들어주는 플랫폼 서비스들은 상당히 많습니다. AIVA, Soundraw, Musicfy, Beatoven, Stable Audio, ... 등등, 이러한 서비스는 주로 연주 위주의 음악을 생성해주는 AI 서비스 들이라고 보면 되겠습니다.

이번에 사용한 Suno (수노) 와 Udio 와 같은 서비스는 위의 음악 생성 플랫폼과 차별화된 기능으로 "Vocal" 을 생성해줍니다. 즉, 사람 목소리로 노래를 부르게 가수도 고용해준다는 것이죠.

Suno 와 Udio 모두 Vocal 을 포함하여 노래를 생성해주는데요, 

현재 Suno 와 Udio 모두

• Multi Language 지원
• 고퀄리티 음질
• 다양한 장르의 스타일 지원 (재즈, 메탈, 팝, 블루스, 신스 ...)
• 다양한 프롬프트 지원
• 사용자 친화 UX

등을 홍보하고 있으며 실제로 사용해봐도 얼마전까지는 Suno 가 사용 편의성이나 부가기능들이 앞서지만 Udio 는 Vocal 의 음질과 Customize 가 더 좋다는 평이 있었으나 Suno 3.5 가 나오면서 그런 것인지 Suno 의 Vocal 품질도 정말 훌륭하다는 느낌이 듭니다.

# 두 플랫폼으로 이런게 만들어집니다 한번 들어보세요

아래 음악은 Suno 로 만들어본 샘플곡 입니다. 한번 들어보시죠.

https://suno.com/song/cafbd769-1bd6-4865-90aa-c84f1878174a

어떤가요? 보컬이 약간 Effector 를 쓴 것 같은 느낌이 드는 감도 있지만, 커버 이미지도 가사 내용을 참고해서 아주 잘 만들어주었고 음악도 자연스럽습니다.

같은 Prompt 와 가사를 Udio 에 넣어서 만들어진 노래입니다 (Suno 와 prompt 가 호환되지 않아 다른 스타일의 음악이 나온점은 양해하고 들어봐주세요)

https://www.udio.com/songs/4orcymaR47bY3UCp9S3xri

무료라 32초 제한과 350자 이내의 가사만 입력이 가능하지만 Vocal 이 Suno 보다 더 크고 명확한 점 등은 Udio 의 장점이라고 볼 수 있겠습니다. 그런데 그 외의 기능들은 제가 아직 Udio 를 잘 쓰지 못해서 그런가(만약 그렇다면 Suno 가 더 쓰기 쉽다고 봐야겠네요) Suno 만큼의 완성도가 나오지는 못한것 같습니다.

# 이제 만드는 과정을 봐보죠, 우선은 가사 부터! ChatGPT 를 활용합니다

실제 음악 프로듀싱은 작사부터다 작곡부터다 말들이 많은 주제이지만(프로듀서 스타일 마다 다르다는 결론을 내봅니다), AI 를 활용한 음악 제작에는 작사부터 하는 방법이 맞습니다 ^^. 생성 시 곡 구성과 함께 가사를 넣어줘야 AI 가 그 구성과 분위기에 좀더 적합한 멜로디를 만들어냅니다.

가사 생성은 현존 최고의 말빨 LLM 인 ChatGPT 를 활용하면 끝판왕 급 가사가 나옵니다. 아 그 전에 가사를 만들어달라고 할 때 곡의 구성 (Song Form 이라고 하죠) 을 ChatGPT 에게 알려주며 그 구성에 맞는 가사를 뽑아내라고 할 것인데요, 보통 대중음악의 Song Form 은 아래가 가장 말그대로 대중적인 구성입니다.

Intro - Verse1 - Pre-Chorus - Chorus - Interlude - Verse2 - Pre-Chorus - Chorus - Bridge - Outro

각 구성의 설명은 아래와 같죠

• Intro (인트로): 곡의 시작 부분으로, 분위기를 설정하고 청중의 관심을 끌기 위한 역할을 합니다. 보통 짧고 간결하며, 종종 곡의 멜로디나 테마를 암시합니다.
• Verse 1 (벌스1): 곡의 이야기를 전달하는 첫 번째 구절입니다. 가사는 보통 서사적이며, 청중에게 곡의 주제를 소개합니다.
• Pre-Chorus (프리코러스): 구절과 후렴 사이의 연결 부분으로, 곡의 긴장감을 높이고 후렴으로의 전환을 부드럽게 만듭니다. 멜로디는 구절과 후렴과 다를 수 있으며, 독특한 요소를 추가합니다.
• Chorus (코러스): 곡의 핵심 메시지를 담고 있으며, 가장 기억에 남는 멜로디와 가사를 포함합니다. 반복적으로 등장하며, 곡의 클라이맥스 역할을 합니다.
• Interlude (인털루드): 짧은 중간 부분으로, 보통 연주만으로 구성됩니다. 곡의 분위기를 환기시키거나 다음 구절로 자연스럽게 넘어가도록 돕습니다.
• Verse 2 (벌스2): 두 번째 구절로, 첫 번째 구절의 구조를 따르지만 가사는 다릅니다. 이야기를 계속 이어가며, 곡의 주제를 더욱 발전시킵니다.
• Pre-Chorus (프리코러스): 첫 번째 프리코러스와 동일한 역할을 하며, 다시 한 번 긴장감을 높이고 후렴으로 전환합니다.
• Chorus (코러스): 반복적으로 등장하며, 곡의 핵심 메시지를 재확인시킵니다.
• Bridge (브릿지): 곡의 중간에 새로운 요소를 추가하는 부분입니다. 멜로디와 가사는 구절과 후렴과 다르며, 곡에 변화를 주고 청중의 관심을 유지시킵니다.
• Outro (아웃트로): 곡의 마무리 부분으로, 곡을 끝맺는 역할을 합니다. 보통 인트로와 대조적이거나 비슷한 분위기를 가지며, 곡의 주제를 마무리합니다.

그런데 이렇게 완벽할 필요까지는 없고요, 저는 아래 처럼 Tailoring 하여 구성해보겠습니다

Intro - Verse1 - Chorus1 - Verse2 - Chorus2 - Bridge - Verse3 - Outro

자 이제 ChatGPT 에게 가사를 주문해보겠습니다

상황을 설명해주며 노래 가사를 만들어주라 했는데 거창한 가사를 만들어줍니다.

이제 가사가 준비 되었으니 Suno 를 시켜 노래를 만들어달라 할 차례지요.

# 간단히 Suno 에게 노래를 만들어달래자~! (기본 모드)

저는 Suno 를 사용하여 만들어 보겠습니다. 아무리 봐도 저는 Suno 가 Udio 보다는 훨씬 사용하기도 쉽고 자연스럽고 완성도 있는 결과물을 뽑아주는것 같은 느낌이라 이걸로 결정합니다.

Suno 의 좌측 메뉴에 Create 로 들어가보면, 입력하는 부분이 

"Song Description" 하나 밖에 안보입니다. 

위 모드는 기본 모드로, 저 Song Description 에 원하는 곡의 Style 과 곡에 대한 설명을 쓰면 가사와 제목, 심지어 표지까지 한번에 생성해줍니다. 한번 "Create" 를 누르면 2개의 곡을 만들어줍니다.

대단하지 않은가요? 저 짧은 Song Description 을 갖고 어쩜 저렇게 유창하게 가사도 쓰고 정말 Texas Blues 느낌의 곡을 한글로 만들어낼 수 있는지.. 아래는 기본모드로 생성해준 곡 중 한곡 입니다.

https://suno.com/song/e8608aa1-1232-4b8e-b063-68e3016033ec

# ChatGPT 의 가사로 곡을 Suno 에게 만들어달래자 (Custom 모드)

위 기본모드로 곡을 제작했다면 뭔가 아쉬움이 있을 수 있다. ChatGPT 가 생성해준 가사를 사용할 수 없다는게 가장 큰 문제입니다.

생성 모드를 Custom 으로 선택하면, Create 메뉴의 상세화면이 아래 처럼 바뀌고, 가사(Lyrics) 와 음악 스타일(Style of Music) 을 분리해서 넣을 수 있게 된다. 아래부분에 제목(Title) 도 넣을 수 있습니다.

Lyrics 에 ChatGPT 가 생성해준 가사를 붙여넣기 해줍니다.

아마 Prompt 에 음악 스타일을 어떻게 넣어야 할지가 가장 걱정일 듯 하다. 모든 Style Prompt 를 알아내는것은 어렵다 그나마 v2 의 경우는 https://www.suno.wiki/faq/style-and-lyrics/styles-and-genres/ 에 리스트가 있지만, 3.5 에서는 Style Prompt 가 이전 버전들과 동일하게 동작할지 보장할 수 없다고 하고있다고 합니다.

대신 Suno 는 Explore 라는 기능을 3.5 에 와서 새로 추가했습니다.

 방대한 양의 Style Prompt 조합을 갖는 Style 세트가 화면 우측에 보이며 돌아가고, 클릭해보면 (제목을 클릭)

해당 스타일세트를 추출해낸 곡의 상세가 표시되고, 유사한 Style 을 얻고싶으면 "reuse prompt" 를 눌러 나의 새로운 곡을 만들어낼 수 있습니다.

아래는 동일한 노래를 두가지 Style 로 생성해 보았어요.

https://suno.com/song/cafbd769-1bd6-4865-90aa-c84f1878174a

https://suno.com/song/7d76ee83-366f-4919-b507-8c389ea18faf

# 마치며

생성형 AI 의 기술이 나날이 급속도로 발전해 나아가고 있다는게 느껴집니다. 이제 나만의 음악을 만들어 지인들에게 선물도 하고 앨범을 만들어 사람들에게 들려주는 일이 아무나 할 수 있는 일이 되어버린 듯 하네요.

ChatGPT 가 HTML 내에서 전체 댓글 수를 가져오는 코드를 만들어줬고, 나는 이를 JS 함수를 만들어 붙여넣기만 했다.

이번에는 실제로 현재 페이지의 전체 댓글 선택 버튼을 클릭하고, 변경메뉴 내의 "휴지통으로 이동" 버튼을 클릭하는 코드를 CoPilot 과 함께 작성해서 완성하려 한다.

# 코딩 동반자 CoPilot 

CoPilot 은 왜 이름을 이렇게 지었는지 사용할수록 이해가 된다. 묻고 대답하는 ChatGPT 와 같은 형태 보다는 IDE 의 AutoCompletion 기능을 적극 활용하여 내가 개발하고 있는 코드를 보고 있다가 '아.. 이런 코드 작성하려고 하는거지?' 하며 끊임없이 나의 코드를 자동완성 해주려고 노력해준다.

또는 코드를 개발 시작하기 전에 의사(pseudo)를 코드가 아닌 주석으로 입력해주면 그 의사에 맞는 코드를 뿅~ 하고 만들어주며, 반대로 코딩에 심취한 나머지 주석을 안달고 넘어간 코드에 주석도 달아준다.

CoPilot 도 채팅 기능이 추가되고 지금은 File 내용을 붙여넣지 않아도 파일 자체를 참조할 수 있도록 지정해줄 수도 있어 좀더 광범위한 질답이 가능하며, 출시 예정인 CoPilot Workspace 기능이 나오면 이제 Code Snippet 수준이 아니라 요구사항을 기반으로 Project 자체를 CoPilot 과 함께 개발이 가능해진다.

# 코드 개발 시작

아무 이름의 .js 파일을 Visual Studio Code 로 생성 했고, 파일을 열고 일단 ChatGPT 가 만들어준 코드를 내용으로 하는 함수를 위에 붙여 두었다. 그리고 댓글관리 페이지의 HTML 을 크롬 브라우져로 개발자 도구 로 부터 복사해 와 .html 파일로 저장했다.

이제 CoPilot 에게 내가 만들고 싶은 JS 코드를 // 주석으로 설명한다

// ChatGPT 가 만든, 현재 댓글 수를 가져오는 함수
function getCurCount() {
    // Select the h3 element containing the specific txt_count
    const titContElement = document.querySelector('.tit_cont');

    // Select the span element containing the number within the h3 element
    const txtCountElement = titContElement.querySelector('.txt_count');

    // Get the text content from the span element
    const txtCount = txtCountElement.textContent;

    // Remove commas from the string and convert it to a number
    return parseInt(txtCount.replace(/,/g, ''), 10);
}

// list.html 에서 id 가 "checkComments" 인 input 을 클릭하고 "휴지통으로 이동" 이름의 버튼을 누르는 함수
function delComments() {
    // id 가 checkComments 인 element 를 가져와
    var checkComments = document.getElementById("checkComments");
    checkComments.click();

    // type 은 button 이고 class 는 btn_g , value 는 "휴지통으로 이동" 인 input 을 가져옴
    var delButton = document.querySelector("input[type=button].btn_g[value='휴지통으로 이동']");
    delButton.click();
}

// 3초에 1번 씩 getCurCount() 가 100 보다 크면 delComments() 를 실행한다 
setInterval(() => {
    if (getCurCount() > 100) {
        delComments();
    }
}, 3000);

코드 에서 getCurCount() 부분은 ChatGPT 가 만들어준 코드이고, 그 아래 delComments() 부터는 // 주석을 이용해 내가 만들고 싶은 코드의 주석을 넣어준 것이다. 처음부터 완전히 깔끔한 코드를 만들어주는것은 아니지만 내가 일부 수정하거나 주석의 내용을 보완/변경 해 나아가면서 좀더 내가 원하는것과 일치한 코드를 만들게할 수 있다.

# 브라우져에서 실행 시키기

간단히 저정도의 코드를 만들어서 Chrome 의 개발자 도구 내 console 에 붙여넣고 실행하면 나를 대신하여 댓글 삭제를 진행해준다.

1. 브라우저 콘솔 하단에 위에 만든 코드를 Copy & Paste 해놓고 엔터를 친다!

2. 자동으로 화면에 Click 이벤트를 보내며 돌아가는 모습을 구경하고 있으면 된다

# 좀더 나은 방향으로..

위의 ChatGPT 와 CoPilot 이 만들어준 코드로 붙여놓고 실행하면 대략 1페이지(15 댓글)을 지우는데에 3~5초 가량의 시간이 소요된다.

1. "8,157 Page * 4초(평균잡아) = 약 9시간" 의 시간이 소요된다. 물론 자동으로 돌고 있을 것이라 그냥 기다려주면 되긴 하지만 왠지 좀더 빠르게 진행되었으면 하는 욕심이 든다..

2. 게다가 현재 방식은 댓글 중 저 요상한 이름의 공격자와는 관계 없는 댓글들 까지도 모두 삭제해버리는 피해를 감수해야 한다.

위 두가지 고민을 해소하기 위해 약간의 시간을 더 투자해 개선을 해보기로 한다! 어떻게~? "영혼의 단짝 코 파일러~ㅅ 과 함께" 

나의 계획은 이렇다

1. 댓글목록 조회는 Ajax 로 XHR GET 요청을 하고 가져온 목록을 화면에 Rendering 하는데, 이때 Query String 으로 page=? 형태로 하여 현재 페이지에 뿌려줄 15개의 항목을 가져온다. 대략 조회는 1~2 초 정도가 소요된다. --> 이 요청을 내가 직접 JS 로 가져오고 병렬로 요청하면 아마도 시간이 대폭 단출 될 것이다!

2. 휴지통으로 이동 버튼 클릭 시에도 Ajax 로 XHR DELETE 요청을 하는데, 이때 form-data 형태로 지울 댓글들의 ID 를 "," separate 하여 보낸다! 15개 기준으로는 2~5초 가량이 소요된다. --> 이 요청에 15개가 아닌 더 많은 수의 item 을 한번에 넣어 보낼 수 있다면? 굿굿~!

3. 1번 + 2번 모두 가능하다면 1 번에서 가져온 item 들 중에서 작성자와 IP 필드가 있을 것이고, 이걸 패턴 매치하여 나쁜놈만 걸러서 삭제할 수 있다! 굿굿굿~!

그래서 일단 1~3 번을 수동으로 테스트 해봤는데~~! 오예~ 모두 가능한 상황이다!

# 개선된 코드

CoPilot 과 함께 난 // 주석으로 일을 시키고~ CoPilot 이 열심히 만들고 주인님이 빠꾸 해 가면서 만들어낸 코드는 아래와 같다.
(짧은 시간에 VERSION 3 가 되어버렸는데, VERSION 2는 유사한 방식이나 작업을 fromPage ~ toPage 의 범위로 하게 하였으나 이러면 중간에 삭제 대상이 아닌 댓글들로 목록이 꽉 차게 되면 문제가 생길 수 있어 방식을 변경했다)

아래 코드에서 blockersNamePattern 과 blockersIps 의 내용을 바꾸어서 실행하면 된다.
blockersNamePattern 은 해당 문자열이 author 내용 내에 일부 매치만 되어도 true 가 되므로 잘 생각해서 한다.

실행은 Chrome 개발자도구 Console 에 모든 코드를 붙여넣고 실행한 후,
deleteCommentsForBatchSize(<한번에 delete 요청 보낼 댓글 수>) 를 하면 된다.

////////////////////////////////////////////////////////////
//--- VERSION 3 
// 이거 쓰자.. 브라우져 console 에 다 붙여놓고 deleteCommentsForBatchSize(500) 이런식으로 실행하면 됨   
////////////////////////////////////////////////////////////

let totalCount = 0;
blockersNamePattern = ["Mmz","MjPAz","-1","if(now", "@@"];
blockerIps = ["158.247.***.145"];

function containsBlockerNamePattern(author, ip) {
    for (let i = 0 ; i < blockersNamePattern.length ; i++) {
        if (author.includes(blockersNamePattern[i]))
            return true;
    }

    for (let i = 0 ; i < blockerIps.length ; i++) {
        if (ip.includes(blockerIps[i]))
            return true;
    }

    return false;
}

function collectAllCommentIdsUntilLimit(limit) {
    // Create an array to store all comment IDs
    const allCommentIds = [];
    const fetchPromises = [];
    let page = 1; // Initialize page number

    // Function to delay execution
    const delay = ms => new Promise(resolve => setTimeout(resolve, ms));

    // Function to fetch comments and process them
    const fetchAndProcessComments = () => 
        fetch(`https://goodjoon.tistory.com/manage/comments.json?filter=&searchType=writer&searchKeyword=&page=${page}`)
            .then(response => response.json())
            .then(data => {
                // Extract the comment IDs from the response and push them to the allCommentIds array
                const commentIds = data.items
                    .filter(item => containsBlockerNamePattern(item.author, item.ip))
                    .map(item => item.id);
                totalCount = data.totalCount;
                console.log("Page: " + page);
                console.log("commentIds to delete: " + commentIds.length);
                allCommentIds.push(...commentIds);

                // Check if the limit is reached or not
                if (allCommentIds.length < limit ) {
                    page++; // Increment page number for the next fetch
                    return delay(500).then(fetchAndProcessComments); // Continue fetching with delay
                }
            });

    // Start the fetching process
    fetchPromises.push(fetchAndProcessComments());

    // Return a promise that resolves when the limit is reached or all comments are fetched
    return Promise.all(fetchPromises).then(() => allCommentIds);
}

function deleteComments(ids) {
    // Create a FormData object
    const formData = new FormData();

    // Append the IDs to the FormData object
    formData.append('ids', ids.join(','));

    // Make a DELETE request to the comments API
    console.log(ids.length + " 개 삭제 요청 보냄... 기다려..");
    return fetch('<https://goodjoon.tistory.com/manage/comments.json>', {
        method: 'DELETE',
        body: formData
    })
        .then(response => {
            // response 를 출력
            console.log(response);
            return response.json();
        })
        .then(data => console.log(data))
        .then(() => console.log("삭제 완료!"));
}

let timeoutHandle = null;
let itemsPerPage = 15;

function deleteCommentsForBatchSize(batchSize) {
    // Collect all comment IDs from the specified pages
    collectAllCommentIdsUntilLimit(batchSize).then(ids => {
        // Delete the collected comment IDs
        console.log("totalCount: " + totalCount);
        if (ids.length >0 ) { // 총 댓글 수가 (pageTo - pageFrom) * itemsPerPage 보다 크거나 같으면
            console.log("삭제할 댓글 수: " + ids.length);
            deleteComments(ids).then( () =>
                timeoutHandle = setTimeout(() => deleteCommentsForBatchSize(batchSize), 1000)   // 1초 뒤에 deleteIdsOfPage(pageFrom, pageTo) 를 실행
            );
        } else {
            console.log("삭제할 댓글이 없음");
        }
    });
}

테스트 하다보니 제약사항이 있었다!

1. collectAllCommentIdsUntilLimit() 코드 내에 delay 를 위한 Promise 에 전달되는 timeout 값은 500ms 정도가 적당하다. 더 짧게 하다 보니 Tistory 서버가 앞단에서 500번대 에러를 내며 한동안 응답하지 않음을 발견했다

2. batchSize 는 delete 시에 큰 영향이 있는데, 한번에 1,000 개를 넣어보니 Tistory 의 Rev. Proxy 서버 쯤에서 너무 응답이 길어져 Response Timeout 을 낸다. 500 개 정도 부터 시작해봐도 될것 같다

이렇게 작성한 코드를 붙여넣고 위에 설명한대로 deleteCommentsForBatchSize() 를 실행시키면 몇시간 딴짓하고 돌아오면 12만개 쯤이야 삭제를 해놨을 것이다~~

# 마치며

이제 Tistory 는 Blog 시장에서 사라져버리는 수순을 기다리고 있는것인지 무언지 정말 실망스러운 운영과 시스템 유지보수가 아쉬움의 선을 넘어선 감정을 갖게 만든다.

무엇이 발전하고 있는지는 모르겠으나 플랫폼이 망가져가고 있는것은 확실히 느낀다.

지난 글에서는 뭐가 문제인지, 어떻게 할 구상인지에 대해 글을 써봤고, 이번에는 본격적으로 AI 에게 개발을 시켜볼 차례이다.

# ChatGPT (GPT-4o)

 ChatGPT 는 현재 상황을 인식시키고 답을 내놓으라고 할 때 참 착하게 동작해준다. GPT-4o 모델로 image 를 포함한 file 을 upload 하여 일을시킬 수 있어 좀더 여러가지 일을 시킬 수도 있어 좋다.(무료 플랜에서도 제한적으로 사용 가능하다)

 ChatGPT 에게 시킬 일 : ChatGPT 에게는 HTML 코드의 일부를 Image 로 캡춰해서 분석하게 한 후 총 남은 댓글의 개수를 가져오는 Javascript 코드를 만들어 내라고 시켰다. (아래 캡쳐의 122,364 라는 숫자를 가져오고 싶은 것이다)

무한정 일을 반복시킬 수는 없으므로 처음에는 남은 댓글 수가 0이 될 때 까지 돌려버리려 했다. (나중에는 정말 진심으로 감사드릴 댓글까지 지워지면 안되겠다 싶어 좀더 시간을 들여 수정 했지만..^^)

위 처럼 Chrome 의 개발자도구에 있는 HTML 코드 일부를 Image 로 캡춰해서 필요한 부분을 가져오는 JS 를 만들어달라고 하니 아래 처럼 코드를 생성해준다

나는 Javascript 를 Chrome 개발자도구의 console 에서 직접 실행시킬것이기 때문에 "DOMContentLoaded" 이벤트 Listener 를 구현할 필요는 없고, 그 안의 내용만 있으면 된다.

요즘은 Client 쪽 JS 를 개발할 일이 없기때문에 왠만한 ECMAScript 표준함수 들에 대해서는 다 까먹고 있었는데 궂이 찾아볼 필요 없이 잘 코드를 뽑아준다. HTML 에는 숫자에 자릿수 구분자 "," 가 들어가 있는데, 이걸 replace 해주어 int 로 변환해주는 코드도 친절하게 넣어준다.

# 좀더 일 주기

잘 해주었다 GPT-4, 그러나 그리 호락한 주인이 아니어서 일을 좀 더 하라고 지시하고 싶은 부분이 있다.

HTML 구조 상 ChatGPT 가 만들어준 코드 처럼 ".txt_count" 클래스로만 가져오면 혹시나 다른데에서도 저 클래스를 쓰는 경우가 생긴다면 잘못된 값을 가져올 수 있으니 (뭐 현재 페이지 코드를 보면 그렇지는 않았지만~), 좀더 querySelector() 의 query 를 specific 하게 쓰거나 다른 코드를 덧붙였으면 하는 주문을 해봤다

💬 const txtCountElement = document.querySelector('.txt_count');
      여기서 .txt_count 클래스는 다른곳에도 사용될 수 있으니 조금 변경해줘

🤖

다른 곳에서도 .txt_count 클래스가 사용될 수 있기 때문에, 특정 부모 요소 내에서 해당 요소를 선택하도록 수정하겠습니다. tit_cont 클래스를 가진 요소 내에서 .txt_count 클래스를 선택하도록 변경하겠습니다.

<!DOCTYPE html>
....
중략
...

    <script>
        // JavaScript to get the number and convert it
        document.addEventListener('DOMContentLoaded', (event) => {
            // Select the h3 element containing the specific txt_count
            const titContElement = document.querySelector('.tit_cont');

            // Select the span element containing the number within the h3 element
            const txtCountElement = titContElement.querySelector('.txt_count');

            // Get the text content from the span element
            const txtCount = txtCountElement.textContent;

            // Remove commas from the string and convert it to a number
            const number = parseInt(txtCount.replace(/,/g, ''), 10);

            // Log the number to the console
            console.log(number);
        });
    </script>
</body>
</html>

이 코드에서는 .tit_cont 클래스를 가진 부모 요소 내에서 .txt_count 클래스를 가진 자식 요소를 선택합니다. 이를 통해 해당 클래스가 다른 곳에 사용되더라도 정확한 요소를 선택할 수 있습니다.

그래서 일단 전체 댓글의 개수를 가져오는 function 하나는 아래와 같이 getCurCount() 라는 이름으로 만들었다

// ChatGPT 가 만든, 현재 댓글 수를 가져오는 함수
function getCurCount() {
    // Select the h3 element containing the specific txt_count
    const titContElement = document.querySelector('.tit_cont');

    // Select the span element containing the number within the h3 element
    const txtCountElement = titContElement.querySelector('.txt_count');

    // Get the text content from the span element
    const txtCount = txtCountElement.textContent;

    // Remove commas from the string and convert it to a number
    return parseInt(txtCount.replace(/,/g, ''), 10);
}

이렇게 ChatGPT 에게 HTML 의 Capture Image 를 주고 코드를 만들게 하고 수정까지 요청하여 간단하지만 코드를 하나 만들었으니, 다음에는 CoPilot 을 옆에 앉혀두고 나머지 기능들을 개발 해 나아가자 (다음글 계속)