7일날 마지막 개발일지를 올리고 개발 일지 작성을 또 게을리 한 것 같다. 그동안 크고 작은 버그수정 및 업데이트가 계속되고 있었다. 오늘은 업적 시스템이라는 재미요소를 추가했다. 경험치 보상도 할 수 있어 초반 렙업이 한층 시워질 듯 하다.

점심을 먹고 아내를 데려다 주기위해 차로 가던 중 gmail 알람이 울렸다. 무심코 열어보니 조코딩 채널 해커톤 본선 진출작에 선정되어 라이브 발표에 초청한다는 내용의 메일이었다. 가슴이 콩닥콩닥 뛰기 시작한다. 몇번이고 다시 확인하느라 차에 타지 못했다. 참석 여부 회신을 해야해서 그 자리에 서서 이메일 답장하고 문자로도 답장을 보냈다. 하..신기하고 감사하다.

글을 작성하고, gemini 를 통해 글을 다시 쓰는 기능을 추가했다. 이로써 자동으로 오타나 맞춤법을 수정하게 되었고, 진지한 말투, 유머러스한, 분노의 말투 등을 사용할 수 있다.

오은영AI 가 도입되었다. 사용자가 직접 그린 그림을 AI가 평가하는 시스템에 뭔가 더 필요함을 느꼈는데, 최근 아이 미술 심리 분석이라는 것을 보고 영감이 떠올랐다. 바로 그림심리분석을 해주는 AI를 적용해 보는 것이다. 캐릭터를 찾다가 오은영 박사가 떠올랐고, 배틀포스트에 AI로 영입을 했다. 분석 결과가 나름 괜찮다.

친한 동생이 놀러와서 현재 만들고 있는 배틀포스트를 보여줬다. 그리고 이용을 해보라며 권했는데 동생이 자신의 스마트폰으로 구글 로그인으로 가입을 하려는데 계속 오류가 생기는거다. 가입화면도 과거 파란색 피씨통신 테마때 만들던 것이었고 문제는 가입이 안되고 있었던 것! 기존에 만들어둔 아이디로 테스트만 해봤기에 전혀 몰랐다. 문제는 얼마전 업데이트 한 레벨링 시스템이 회원 가입시에 처리가 안되고 있었던 것이다. 다행이 버그는 수정됐고 가입화면도 간소화 시켜 다크테마로 적용했다. 동생이 찾아오지 않았으면 이대로 제출했을텐데 정말 진땀나는 순간이었다.

이제는 기능을 추가할 때 마다 상당한 리소스가 투입되어야 한다. 기존의 코드를 전부 뜯어 고치게 되는 일이 반복된다. 댓글에 좋아요와 답글 기능을 추가했다. 일단 게시글에만 적용하기로 한다.

해커톤이 며칠 남지 않았다. 

그림판 컬러피커가 모바일에서 매우 불편한 인터페이스인 것을 뒤늦게 확인하고 오늘 종일 또 컬러피커에 대해 다뤘다. spectrum.js 라는 괜찮은 라이브러리가 있어 바로 적용했다. 배틀포스트 대부분이 자바스크립트로 이루어져 있는데 jquery 를 거의 처음 써보는 것 같다.

처음에는 구현 할 수 있을 법한 범위를 스스로 제한하여 텍스트로만 처리하려고 했다. 그런데 그림 콘테스트를 구현하고 일이 커지게 되었다. 

AI와 상호 작용하는 것은 만족스럽다. 하지만 뭔가 부족함이 있다. 그래서 코드가 더 방대해지기 전에 레벨링 시스템을 추가했다. 이 작업도 결코 만만하지 않았다. 기본 사용자 정보를 시작으로 글 작성자 정보, ajax 로 로딩될 때 처리, 프로필 글 목록, 그림 목록 등 처리할 곳이 너무 많다. 이러다 점점 빠트리고 버그가 난무하는게 아닌지 오늘 조금 걱정이 된다. 전체적으로 코드를 손본 것이 좀 전에 글을 쓴 것 처럼 어두운 테마 적용과 레벨링 시스템이었다. 레벨링 시스템은 무조건 글을 쓰거나 그림을 그려서 경험치를 획득하는 것이 아닌 하루에 수행할 수 있는 미션을 둘 것이다. 일일 미션으로 게시글1, 그림1, 댓글3 이정도면 어떨까 싶다. 미션 달성시 경험치를 얻고 레벨업을 하는 것이다. 이러면 레벨링을 위한 도배도 좀 줄어 들겠지..

이번 해커톤을 준비하면서 가장 애를 먹고 많은 시간이 소요되는 작업이 UI 디자인이다. AI가 어느정도 빠르게 잡아주긴 하지만 실제 사용자의 눈으로 바라봤을 때 불편함이 많다. 결국 직접 눈으로 보며 하나하나 고쳐가는데, 이게 작업량이 상당하다. style css 파일이 7-8개가 있는데 어쩔 수 없는 중복도 많고 디버깅이 꽤나 난해하다. 그래서 페이지 안에 태그를 넣고 작업하고 있음에도 여기저기 뿌려져 있는 css 들로 인해 충돌을 피할 수 없었다. 그래도 게이미피케이션 요소가 들어갈 배틀포스트 답게 테마는 아무래도 어두운게 어울릴 것 같아. 오늘 종일 css 만 뜯어 고쳤다.

조코딩님 유튜브 채널이 업로드 되고 4일째인가 5일째 구글 gemini api 키를 캡처하고 양식이 첨부하여 전송을 했다.

당시 영상의 조회수가 몇천이 되어 선착순 2천명 안에 못 들 수 있겠다는 생각을 했는데, 오늘 문자로 스벅 쿠폰이 날아왔다. 처음에는 믿기지가 않아 스팸인가? 싶었는데 내용을 보니 조코딩이라는 키워드가 있어서 '아 내가 2천명 안에 신청했구나'라고 안도했다.

이제는 피자가 남았다. 🍕 그것도 도미노피자 슈퍼슈프림L 사이즈!!

해커톤 과제 제출일까지 열심히 만들어 보자!! 배틀포스트 파이팅!

아무리 생각해도 그림 그리기가 불편했다. canvas 자체를 사용해 본 적이 없어서 AI의 힘을 맥시멈으로 가져다 복붙 신공을 했지만 코드가 꼬이고 기능이 자주 먹통이 된다. 특히 실행 취소와 다시 실행을 하는 redo, undo가 엉뚱하게 동작한다.

그래서 이번에 UI도 간소화하면서 통일성 있게 그리고 무엇보다 기능에 충실하도록 버전2로 만들었다.

여전히 모바일에서는 어렵지만, 테블릿이라면 나쁘지 않을 듯하다.

이제 글쓰기 기능과 그림 그리기 기능이 어느 정도 완성이 되어가는 듯하다. 이제 gemini 들은 유저의 글과 소통하고 그림에 평가할 준비가 끝났다.

그림 그리기 기능이 생각보다 상당한 난이도가 있다. 캔버스를 거의 사용해보지 않은 내게 커다란 숙제와도 같다. 대안으로 fabric.js를 임시 적용해봤는데, 그림 그릴 때 완전 부드럽다. 역시 전문가의 손길이 필요한 건가. 어쨌든 일단은 코드 작성은 여기까지 하고 중간중간 새로운 아이디어들이 떠오르고 기획하는데 무중력 의자에 앉아 시간을 보낸다. 그러다 번뜩인 것이 바로 레벨링 시스템이다.

과거 커뮤니티를 보면 사용자의 활동에 따라 경험치를 주고 레벨을 올릴 수 있었다. 당시에는 레벨링 하는 것이 하나의 소소한 재미였다. 그런데 SNS에서는 레벨링 시스템을 아직까지 본 적이 없다.

그래서 이번에 만들어 보기로 한다. 처음부터 복잡하면 안 되니 최대한 간소화 한다. 일단 DB 테이블에 레벨과 경험치 컬럼을 생성한다. 그리고 글을 쓰거나 그림을 그릴 때, 댓글을 남길 때 일정량의 경험치를 부여한다. 단, 경험치 획득을 위한 반복적인 작업을 1차적으로 차단하는 것은 필수다. 연속으로 작성하는 것을 시간 텀을 두고 막아 본다.

사실 이런 제한 두는 걸 원치 않는다. 알아서 클린하고 돌아갔으면 하지만 어김없이 등장이 예상되는 매크로.. (이 정도로 대박이 나진 않겠지..만? 혹시 모르니 일단 최소한의 장치는 해주자)

정말이지 AI가 아니었음 이런 웹사이트 만드는것은 꿈도 꾸지 못했을거 같다.. 특이점이 왔어 특이점이..!!!@

단순 게시글을 넘어, 인간이 그린 그림을 이제는 AI가 평가하는 시스템을 만들었다. 약간 아갓텔 느낌!? 그림판 기능이 현재는 너무 단순해서 보다 손쉽게 그림을 그릴 수 있도록 해야한다.

구글 gemini 를 이용해서 봇을 만들었다. 이제 누군가 글을 쓰면 해당 글에 봇들이 읽고 댓글을 달게 된다. 완벽하지는 않지만 그래도 제법이다. 그런데 이모지를 너무 남발하는거 같아서 이모지를 줄이기로 한다.

오늘은 구글 GEMINI 를 사용하고 적용시켜 볼 것이다. 이전 조코딩님 채널에서 운세 챗봇 챗도지 따라 만들때는 chatgpt 를 썼는데 이번에 처음으로 제미니를 써본다. 기대가 크다.

SNS라고 하면 소통이 필수다. 그럴려면 상호작용을 할 때마다 알림을 띄워줘야 한다. 알림 시스템을 만들어보자!

파란 화면에 흰색 글씨만 두고 과거 PC통신 느낌을 살려보기로 했다가 눈이 너무 아파서 원복하기로 한다. 모던한 느낌으로 가자

만들어 보고 싶었던게 있었는데 이참에 만들어 보기로 한다. 바로 AI가 운영하는 커뮤니티인 것이다. AI가 글을 쓰고 댓글을 달고 상호작용을 할 수 있는 월드를 만든다.