오늘의 할일 : 클로드(Claude) AI로 나만의 맞춤형 대시보드 뚝딱 만들기 (CO-WORK 활용)
코딩 몰라도 OK! 클로드 AI와 대화하며 대시보드 만드는 방법! 실전 후기
오늘은 지난번에 이어서 code에 능하기로 유명한 클로드 AI를 활용하여 대쉬보드를 만들어 본 후기입니다.
클로드 ai를 활용하여 영상 수집과 데이터 창고 역할을 하는 대쉬보드 만들기입니다. !
1. 준비물 및 사전 기획 (무엇을 만들 것인가?)
본격적으로 코드를 짜기 전에 어떤 대시보드를 만들 것인지 뼈대를 잡아야 합니다.
-
목표 설정: 뉴스 큐레이션, 실시간 트렌드 모니터링, 개인 포트폴리오 등 대시보드의 목적을 명확히 합니다.
-
필요 툴: * Claude (클로드 cowork): 레이아웃 설계 및 코드 생성을 담당할 AI 파트너
SNS를 사용하다보면
다들 “나만의 입맛에 딱 맞는 깔끔한 정보나 좋아하는 영상”들을 수집하고 싶은 욕심이 생길것입니다.
하지만 복잡한 HTML, CSS, 자바스크립트 코딩을 몰라서 다들 실천하지 못하셨죠.
요즘은 클로드(Claude) AI와 대화만 잘해도 누구나 멋진 웹 대시보드를 뚝딱 완성할 수 있습니다.
이번 글에서는 AI와 함께 대시보드를 기획하고 구현하는 전 과정을 알기 쉽게 정리해 드리겠습니다
AI 시대를 맞이하여 기존의 복잡한 툴이나 개발 지식 없이도 AI만 있으면 원하는 대시보드나 정보 수집툴을
만들 수 있는 시대가 도래했습니다.
제가 직접해봤으니까요 !
물론 장장 10시간에 걸친 어려운 작업이었습니다만.. 저는 사실 명령어만 전달했고 클로드 AI가 다한 셈입니다
그 과정을 오늘 적어보는 시간을 가져보겠습니다 !
2. 기획안 및 레이아웃 프롬프트 작성하기
저번 시간에는 제미니 ai를 이용해서 이미지와 영상을 만들었다면
오늘은 클로드 ai를 활용해 각종 SNS상의 영상과 정보를 수집해 나만의 대시보드를 만든 경험입니다.
가장 먼저 클로드에게 전체적인 구조와 기획안을 설명해야 합니다.
단순히 “대시보드 만들어줘”라고 하기보다는 구체적인 조건을 붙여주는 것이 좋습니다.
프롬프트 예시: “카드뉴스 대시보드 레이아웃을 만들어줘.
HTML과 CSS를 포함한 단일 파일 코드로 작성해주고, 깔끔하고 모던한 UI 디자인을 적용해줘.”
AI와 작업할때는 위 사진처럼
제가 만들고 싶은 창작물과 기획을 클로드에게 먼저 설명해야합니다.
또한 가장 중요한게 확실하고 구체적인 설명 명령어입니다. 처음에는 이미지같은 컨퍼런스를 AI에게 업로드해서 보여주는걸 추천합니다
그렇지 않으면 가끔 창작물이 산으로 갈수가 있으니까요 ^^
3 . 대시보드 제작 실전 단계: 클로드 AI와 10시간의 사투
가장 먼저 대쉬보드의 주요 메인인 MENU와 카테고리를 만드는 작업을 했는데요.
위 처럼 클로드 AI와 주기적으로 설명과 질문을 동반하여 서로 소통하면서 만들어야했습니다.
AI가 만든 메뉴와 카테고리 항목들이 실제로 작동할수 있는지 확인하면서 작업하는 사진입니다.
4. 코드 생성 및 화면 디자인 조정하기
클로드가 코드를 스스로 생성하며 만들어낸 결과물을 보여주면, 브라우저로 내가 마음에 안 드는 부분을 수정 요청합니다.
-
“카드의 간격을 조금 더 넓혀줘”
-
“폰트는 깔끔한 고딕 계열로 통일해 줘”
-
“모바일 화면에서도 깨지지 않게 반응형으로 다듬어 줘”
- 이 부분에는 이런 메뉴를 넣고 이런 기능을 넣어줘”
끊임없이 대화하고 요구하고 수정해야합니다.
그래야 자신이 원하는 창작물의 결과물이 나오니까요
작업하다가 모르는 용어나 구조가 등장하면 AI에게 자세한 설명도 부탁해야합니다.
5. 데이터 연동 및 기능 다듬기
제가 가장 염려되고 걱정스러웠던것은 바로 대시보드의 기능과 연동 부분인데요 !
갖춰진 레이아웃이 마음에 들면 실제 정보나 카테고리 메뉴, 링크 등을 연결하여 실제 작동하는 대시보드를 만들고 싶었기 때문입니다.
레이아웃에 생동감을 불어넣는 작업이죠.
6. 중간 중간 창작물을 저장하기.
AI와의 작업은 장시간을 통해 수많은 수정과 반복 작업이 요구됩니다. 더나은 창작물을 위해서 꼭 필요한 과정이죠.
그렇기 때문에 중간 중간 결과물을 반드시 저장해가면서 작업해야합니다.
저는 실제로 클로드와 AI와 작업하면서 하루 사용량을 모두 소진해버려서 잠시 작업을 멈춰야했습니다.
너무 아쉬웠죠. 아직 작업이 끝나지 않았는데 도중에 멈춰버렸으니까요
여러분은 절대로 중간 중간에 완성된 작업물을 저장하시면서 이어나가셔야합니다.
AI가 만들어준 코드를html 파일로 저장해 수시로 업데이트 해줘야합니다.
장장 10시간에 걸쳐 콜로드 AI와 만든 첫번째 대쉬보드 작업 결과물입니다. !!
주요 메뉴 구성/ 카테고리 기능 / 유튜브 바로가기 / 인스타 바로가기 / 영상 수집 기능 및 조회 가능
엄청난 열정이 투입된 작업이었습니다
그 결과물을 보여 드리겠습니다 !
짜잔~! 위 이미지 사진은 제가 직접 10시간동안 클로드 AI와 만든 결과물입니다 하하 !
각 카테고리별로 영상도 수집해서 볼수 있게끔 구성했습니다..!!
이번 작업을 통해서 클로드 AI의 엄청난 강점과 장점을 발견했는데요. 확실히 클로드는 코드 구성에 있어서 강력한 힘을 가진것 같았습니다
7. 마치며: 직접 만들어본 소감과 꿀팁
처음에는 막막해 보였지만, 클로드 AI와 대화하며 하나씩 수정해 나가다 보면 어느새 클로드의 매력과 작업 재미를 느끼게 되었고
코딩 지식이 없다고 마냥 포기하기 보다는 저처럼 AI툴을 이용하여 자신이 원하는것을 마음껏 만들수 있었다는점에서 매우 만족합니다.
저도 처음으로 이렇게 만들었는데 실제로 제가 만들었다니 놀라울뿐입니다. 요즘은 정말 AI 툴들이 많아서 모든것이 가능해진 세상입니다.
여러분들도 AI를 적극활용하여 여러분만의 아이디어를 대시보드로 구현해 보세요!!