IT컴퓨터

퍼플렉시티 연구실 Perplexity Labs 사용으로 티스토리 꾸며보기

아이디어박스 2025. 8. 5. 13:42
320x100

전구를 누르면 Labs(실험실)가 활성화됩니다.

영상에서 봤을 때는 정형화된 프로젝트가 15개 정도 있다고 했었는데 저는 어디로 들어가야 할지 몰라서 그냥 해봤습니다.

 

정보 수집에 대한 링크를 줬는데 곧바로 만들기 시작했습니다.

아이디어박스 티스토리 블로그 스킨 추천 및 커스터마이징 가이드

📊 블로그 콘텐츠 분석 결과

귀하의 "아이디어박스" 블로그를 분석한 결과, 정치/사회 이슈 분석에 특화된 전문 블로그로 확인됩니다. [AI분석] 태그를 활용한 체계적인 분류와 데이터 기반 분석이 주요 특징이며, 선거 분석, 정치인 분석, 시사 해설 등을 다루고 있습니다.

주요 특성

  • 전문적이고 객관적인 분석 중심 블로그
  • 텍스트 위주 콘텐츠로 가독성이 중요
  • 데이터와 표/차트 활용 빈도 높음
  • 신뢰성과 정확성이 핵심 가치

🎨 추천 스킨

1순위: Odyssey (오디세이) ⭐⭐⭐⭐⭐

강력 추천 이유:

  • 깔끔하고 전문적인 디자인으로 정치/시사 블로그에 최적ideabox.tistory+1
  • 텍스트 중심 콘텐츠에 최적화된 레이아웃ideabox.tistory
  • 사이드바를 통한 명확한 카테고리 구분ideabox.tistory+1
  • 정보성 블로그에 적합한 구조tistory
  • 대표 이미지가 배경에 표시되어 시각적 임팩트 제공ideabox.tistory

2순위: Letter (레터) ⭐⭐⭐⭐

추천 이유:

3순위: Book Club (북클럽) ⭐⭐⭐⭐

추천 이유:

🛠️ 커스터마이징 가이드

권장 색상 테마

정치/시사 블로그에 적합한 신뢰감 있는 색상 조합을 제안합니다:

 
css
/* 정치/시사 블로그 색상 테마 */ :root { --primary-color: #2c3e50; /* 신뢰감 있는 네이비 */ --secondary-color: #34495e; /* 진한 그레이 */ --accent-color: #e74c3c; /* 포인트 컬러 (빨강) */ --text-color: #2c3e50; /* 본문 텍스트 */ --bg-color: #ffffff; /* 배경색 */ }

[AI분석] 태그 스타일링

 
css
.ai-tag { background-color: #e74c3c; color: white; padding: 2px 8px; border-radius: 4px; font-size: 12px; font-weight: 600; margin-right: 8px; }

데이터 표시 최적화

정치 분석에 자주 사용되는 표와 데이터 표시를 위한 스타일:

 
css
/* 선거 결과 표 등에 활용 */ table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 14px; } th { background-color: #2c3e50; color: white; padding: 12px; text-align: left; } td { padding: 10px 12px; border-bottom: 1px solid #ddd; }

📋 단계별 구현 방법

1단계: 스킨 적용

  1. 티스토리 관리자 → 꾸미기 → 스킨 변경
  2. Odyssey 스킨 선택 및 적용weweb.tistory

2단계: HTML/CSS 편집

  1. 꾸미기 → 스킨 편집 → HTML 편집uncompress.tistory+1
  2. CSS 탭에서 위의 커스터마이징 코드 추가uncompress.tistory

3단계: 사이드바 설정

  1. 꾸미기 → 사이드바에서 메뉴 구성tipinone.tistory
  2. 카테고리, 최근글, 인기글 순으로 배치 권장tipinone.tistory

💡 추가 개선 제안

SEO 최적화

정치/시사 블로그의 검색 최적화를 위해:

  • 메타 태그 최적화로 뉴스 검색 노출 개선yolo60.tistory
  • 구조화된 데이터 마크업 추가
  • 주제 권위성 강화를 위한 전문성 있는 콘텐츠 지속 작성yolo60.tistory

성능 최적화

  • hELLO 스킨이나 Berry 스킨 같은 성능 최적화 스킨도 고려 가능dev-roo.tistory+1
  • 페이지 속도 개선으로 사용자 경험 향상dev-roo.tistory

📱 모바일 최적화

현재 추천한 스킨들은 모두 반응형을 지원하므로 모바일에서도 최적화된 경험을 제공합니다. 추가로 모바일 설정에서 "티스토리 모바일웹 자동 연결을 사용하지 않음"으로 설정하여 반응형 스킨을 완전히 활용하시기 바랍니다.yolo60.tistory+3

 
tistory-skin-recommendation.md
생성된 파일

이 가이드를 통해 귀하의 정치/시사 분석 블로그가 더욱 전문적이고 신뢰감 있는 모습으로 거듭나길 바랍니다. 추가 질문이나 세부 커스터마이징이 필요하시면 언제든 말씀해 주세요!

  1. https://ideabox.tistory.com
  2. https://www.tistory.com/skin
  3. https://ideabox.tistory.com/manage/design/skin/edit
  4. https://takeaction.tistory.com/30
  5. https://bonggang.tistory.com/257
  6. https://weweb.tistory.com/154
  7. https://uncompress.tistory.com/entry/%ED%8B%B0%EC%8A%A4%ED%86%A0%EB%A6%AC-%EB%B8%94%EB%A1%9C%EA%B7%B8-%EC%8A%A4%ED%82%A8%EB%94%94%EC%9E%90%EC%9D%B8-%EC%84%A0%ED%83%9D%ED%95%98%EA%B8%B0-%E2%9C%A8-%EC%B2%98%EC%9D%8C%EB%B6%80%ED%84%B0-%EC%A0%9C%EB%8C%80%EB%A1%9C-%EA%B3%A0%EB%A5%B4%EC%9E%90
  8. https://rankroo.tistory.com/entry/Tistory-%ED%8B%B0%EC%8A%A4%ED%86%A0%EB%A6%AC-%EC%8A%A4%ED%82%A8%EC%9D%98-%EC%9D%98%EB%AF%B8%EC%99%80-%EA%B8%B0%EB%B3%B8%EC%8A%A4%ED%82%A8-%EC%A0%81%EC%9A%A9%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95
  9. https://tipinone.tistory.com/3
  10. https://yolo60.tistory.com/entry/%ED%8B%B0%EC%8A%A4%ED%86%A0%EB%A6%AC-%EB%B8%94%EB%A1%9C%EA%B7%B8-%EA%B8%B0%EB%B3%B8%EC%8A%A4%ED%82%A8-%EB%B6%84%EC%84%9D-%E2%91%A1-%EC%83%81%EC%84%B8-%EB%B6%84%EC%84%9D
  11. https://dev-roo.tistory.com/entry/how-to
  12. https://alive-wong.tistory.com/77
  13. https://yolo60.tistory.com/entry/%ED%8B%B0%EC%8A%A4%ED%86%A0%EB%A6%AC-%EB%B8%94%EB%A1%9C%EA%B7%B8-%EA%B8%B0%EB%B3%B8%EC%8A%A4%ED%82%A8-%EB%B6%84%EC%84%9D-%E2%91%A0-%EC%A2%85%ED%95%A9-%EB%B9%84%EA%B5%90
  14. https://yjshin.tistory.com/1101
  15. https://self-therapy-session.tistory.com/10
  16. https://gajicoding.tistory.com/20
  17. https://ezez99.tistory.com/20
  18. https://imheroim.tistory.com/35
  19. https://brunch.co.kr/@markism/44
  20. https://h-s-y.tistory.com/170
  21. https://memostack.tistory.com/98
  22. https://castle-goog.tistory.com/entry/%ED%8B%B0%EC%8A%A4%ED%86%A0%EB%A6%AC-%EB%B8%94%EB%A1%9C%EA%B7%B8-%EC%8A%A4%ED%82%A8-%EB%94%94%EC%9E%90%EC%9D%B8-%EC%84%A0%ED%83%9D%ED%95%98%EA%B8%B0
  23. https://www.kidp.or.kr/upload/20210714_%EB%94%94%EC%9E%90%EC%9D%B8%EC%9D%B4%20%EA%B6%81%EA%B8%88%ED%95%B4_%EC%9C%A4%EC%84%B1%EC%9B%90_A5%EA%B5%AD%EB%B0%B0%ED%8C%90(210%20148)_%EA%B3%B5%EA%B0%9C%EC%9A%A9.pdf
  24. https://www.mois.go.kr/frt/sub/a06/b02/govServiceDesign/screen.do
  25. https://www.instagram.com/log_ceo_cha/
  26. https://kidp.or.kr
  27. https://www.youtube.com/watch?v=SQ6eeXvIm1U
  28. https://how-to-learn.tistory.com/4
  29. https://www.dbpia.co.kr/journal/voisDetail?voisId=VOIS00733243
  30. https://logid.co.kr
  31. https://areumdawoon.tistory.com/100
  32. https://blog.modusign.co.kr/category/news/pr
  33. https://www.instagram.com/logdesign_studio_official/p/C8mcvdeJ24R/?locale=us&hl=am-et
  34. https://the-see.tistory.com/91
  35. https://www.krds.go.kr
  36. https://www.youtube.com/@logdesign
  37. https://www.youtube.com/watch?v=SzBTv-_uxNY
  38. https://www.gidp.kr/gidp/notice/gidpnotice/notice_press?articleSeq=681
  39. https://d.cafe24.com
  40. https://www.miricanvas.com/ko/templates/search?templateTypeId=naver_blog_skin
  41. https://alsdma0100.tistory.com/entry/%ED%8B%B0%EC%8A%A4%ED%86%A0%EB%A6%AC-HTML-%EC%BB%A4%EC%8A%A4%ED%84%B0%EB%A7%88%EC%9D%B4%EC%A7%95-%EC%8B%A4%EC%A0%84-%ED%8C%81-%E2%80%93-%EA%B3%A0%EA%B8%89-%ED%99%9C%EC%9A%A9%EB%B2%95
  42. https://alsdma0100.tistory.com/entry/HTML-%EC%BD%94%EB%93%9C%EB%A1%9C-%ED%8B%B0%EC%8A%A4%ED%86%A0%EB%A6%AC-%EC%BB%A4%EC%8A%A4%ED%85%80-%EC%82%AC%EC%9D%B4%EB%93%9C%EB%B0%94-%EC%B6%94%EA%B0%80-%EB%A9%94%EB%89%B4-%EC%88%98%EC%A0%95%ED%95%98%EA%B8%B0-%E2%80%93-%EB%B6%81%ED%81%B4%EB%9F%BD-%EC%8A%A4%ED%82%A8-%EA%B8%B0%EC%A4%80
  43. https://www.wp-guide.co.kr/wordpress-blog/%EC%9B%8C%EB%93%9C%ED%94%84%EB%A0%88%EC%8A%A4-%EA%B5%AD%EB%82%B4%EB%8C%80%ED%91%9C%EB%B8%94%EB%A1%9C%EA%B7%B8-%EC%82%AC%EB%A1%80/
  44. https://denev6.tistory.com/entry/custom-tistory
  45. https://busstech.tistory.com/entry/HTMLCSS-%ED%8B%B0%EC%8A%A4%ED%86%A0%EB%A6%AC-%ED%8F%AC%EC%8A%A4%ED%84%B0-%EC%8A%A4%ED%82%A8%EC%97%90-%EC%82%AC%EC%9D%B4%EB%93%9C%EB%B0%94-%EC%B6%94%EA%B0%80%ED%95%98%EA%B8%B0
  46. https://developers.google.com/search/blog/2023/05/understanding-news-topic-authority?hl=ko
  47. https://yeonduing.tistory.com/24
  48. https://daag.monginfo.com/entry/%ED%8B%B0%EC%8A%A4%ED%86%A0%EB%A6%AC-%EC%82%AC%EC%9D%B4%EB%93%9C%EB%B0%94-%EB%A9%94%EB%89%B4-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0
  49. https://www.kci.go.kr/kciportal/landing/article.kci?arti_id=ART001102189
  50. https://junhee-hee.tistory.com/entry/%ED%8B%B0%EC%8A%A4%ED%86%A0%EB%A6%AC-%EA%BE%B8%EB%AF%B8%EA%B8%B0-1%ED%8E%B8-HTML-CSS-%EB%B6%84%EC%84%9D
  51. https://cord-ai.tistory.com/215
  52. https://www.kisdi.re.kr/report/fileDown.do?key=m2101113025931&arrMasterId=3934566&id=529757
  53. https://ardentdays.tistory.com/24
  54. https://honglab.tistory.com/78
  55. https://www.dbpia.co.kr/journal/articleDetail?nodeId=NODE06675880
  56. https://pronist.tistory.com/195
  57. https://yomi-tory.tistory.com/entry/%ED%8B%B0%EC%8A%A4%ED%86%A0%EB%A6%AC-%EB%B8%94%EB%A1%9C%EA%B7%B8-%EC%8A%A4%ED%82%A8-%EA%BE%B8%EB%AF%B8%EA%B8%B0-%EC%82%AC%EC%9D%B4%EB%93%9C%EB%B0%94sidebar-1%ED%8E%B8
  58. https://ebook.kyobobook.co.kr/dig/pnd/showcase?pageNo=2892&cmdt=EBK&clst1=21&clst2=2117&clst3=&landing=Y
  59. https://rangvest.tistory.com/entry/Tistory-%ED%8B%B0%EC%8A%A4%ED%86%A0%EB%A6%AC-%EC%8A%A4%ED%82%A8-%ED%8E%B8%EC%A7%91%EC%9D%98-%EA%B8%B0%EC%B4%88-HTML-CSS-JavaScript
  60. https://dailyspace.tistory.com/entry/%ED%8B%B0%EC%8A%A4%ED%86%A0%EB%A6%AC-%EC%82%AC%EC%9D%B4%EB%93%9C%EB%B0%94-%ED%9A%A8%EA%B3%BC-%EC%84%A4%EC%A0%95

 

평소에 퍼플렉시티로 검색하는 것보다 더 많은 검색을 하고 자료를 본다는 것을 출처의 개수를 통해 알 수 있습니다.

저 코드들을 적용시켜보려고 했는데 생각보다 CSS코드 양이 방대해서 어디다가 추가해야 할지 물어봤습니다.

오디세이 스킨 CSS 커스터마이징 가이드

현재 오디세이 스킨의 CSS를 분석한 결과, 정치/시사 분석 블로그에 최적화하기 위해 다음과 같은 수정이 필요합니다.

🎯 주요 수정 사항

1. 기존 CSS 하단에 추가할 커스터마이징 코드

 
ideabox-custom-css.css
생성된 파일

이 커스터마이징 CSS는 기존 오디세이 스킨 CSS 코드 맨 하단에 추가하시면 됩니다.

2. 색상 테마 변경

  • 기존: #ef402f (빨간색) → 신규: #e74c3c (정치적 신뢰감 있는 빨간색)
  • 기존: #333 (텍스트) → 신규: #2c3e50 (네이비 텍스트)
  • 전체적으로 정치/시사에 적합한 신뢰감 있는 색상 팔레트 적용

3. [AI분석] 태그 자동 스타일링

HTML 편집에서 </body> 태그 직전에 다음 JavaScript 코드를 추가하세요:

 
javascript
<script> // [AI분석] 태그 자동 감지 및 스타일링 document.addEventListener('DOMContentLoaded', function() { const titles = document.querySelectorAll('.article-type-common .title, .title-article, h1, h2, h3'); titles.forEach(function(title) { const text = title.textContent || title.innerText; if (text.includes('[AI분석]')) { title.setAttribute('data-tag', 'AI분석'); } else if (text.includes('[정치분석]')) { title.setAttribute('data-tag', '정치분석'); } else if (text.includes('[선거분석]')) { title.setAttribute('data-tag', '선거분석'); } else if (text.includes('[시사]')) { title.setAttribute('data-tag', '시사'); } }); }); </script>

🛠️ 적용 방법

단계 1: CSS 수정

  1. 티스토리 관리자 → 꾸미기 → 스킨 편집 → CSS 탭
  2. 기존 CSS 코드 맨 하단에 위의 커스터마이징 CSS 추가
  3. 저장

단계 2: HTML 수정 (JavaScript 추가)

  1. HTML 탭으로 이동
  2. </body> 태그 직전에 위의 JavaScript 코드 추가
  3. 저장

📊 주요 개선 효과

시각적 개선

  • [AI분석] 태그가 자동으로 빨간색 배지로 표시
  • 정치분석 태그는 파란색, 선거분석은 오렌지색으로 구분
  • 표(테이블) 스타일이 선거 결과 분석에 최적화

사용성 개선

  • 사이드바 카테고리에 호버 효과 및 시각적 피드백 추가
  • 전체적인 가독성 향상 (폰트, 간격, 색상 대비 개선)
  • 반응형 디자인 최적화로 모바일 경험 개선

브랜딩 강화

  • 블로그 제목 하단에 "정치·사회 이슈 AI 분석 전문 블로그" 서브타이틀 자동 추가
  • 정치/시사 블로그에 적합한 전문적이고 신뢰감 있는 디자인 적용

💡 추가 팁

  • 기존 CSS는 그대로 두고 새로운 CSS만 추가하여 안전하게 적용
  • 색상이나 폰트가 마음에 들지 않으면 CSS 변수값만 수정하면 전체 테마 변경 가능
  • JavaScript 코드는 기존 글에도 소급 적용되어 모든 [AI분석] 태그가 자동 스타일링됨

이렇게 수정하시면 현재의 깔끔한 오디세이 스킨을 유지하면서도 정치/시사 분석 블로그에 최적화된 전문적인 디자인을 완성할 수 있습니다!

  1. https://ppl-ai-file-upload.s3.amazonaws.com/web/direct-files/attachments/66551754/737e4574-fed9-4033-838b-ec005279c5e4/paste.txt

이 내용을 티스토리 글로 공유하고 싶다고 말해봤는데 자료만 조금 생성해주고 말았습니다.

AI가 내 티스토리 블로그를 완벽하게 맞춤 분석하고 디자인해 줬다! 🎨✨

이번 대화를 바탕으로 작성한 티스토리 블로그 포스팅을 제안드립니다.

 
tistory-ai-customization-review.md
생성된 파일

📸 추천 이미지 활용

포스팅에 함께 사용하면 좋을 이미지들을 찾아드렸습니다:

 
Screenshot of Tistory blog skin change interface showing various responsive skin templates and the highlighted 'Skin Change' option in the customization menu
  • 티스토리 스킨 변경 화면
 
Close-up view of CSS code in a development environment showing flexbox properties
  • CSS 코딩 화면
 
Screenshot of a simple HTML page with a heading and list items alongside its HTML structure in browser developer tools i0.wp
  • HTML 개발자 도구 화면
 
티스토리 블로그 AI 커스터마이징 전후 비교
  • AI 커스터마이징 전후 비교 이미지

🎯 이 포스팅의 장점

1. 실제 경험 기반

  • 우리가 실제로 진행한 대화와 작업 과정을 그대로 반영
  • 구체적인 CSS 코드와 JavaScript 코드 제공
  • 단계별 적용 방법 상세 설명

2. 독자들에게 유용한 정보

  • AI 활용 블로그 커스터마이징 방법
  • 티스토리 스킨 선택 가이드
  • 실용적인 CSS/JavaScript 코드 예시

3. SEO 최적화

  • "티스토리", "블로그 디자인", "AI", "커스터마이징" 등 인기 키워드 포함
  • 구조화된 헤딩과 목차
  • 실용적인 정보로 체류시간 증가 기대

4. 공유 가치

  • 다른 블로거들이 참고할 수 있는 실용적 가이드
  • AI 도구 활용법 소개
  • 커뮤니티 기여

💡 추가 제안

시리즈 포스팅으로 확장 가능

  1. "AI와 함께하는 블로그 기획 - 콘텐츠 전략편"
  2. "AI가 추천하는 티스토리 플러그인과 위젯 활용법"
  3. "데이터 기반 블로그 분석 - GA4와 AI 활용"

독자 참여 유도

  • 댓글로 블로그 URL 공유하면 AI 분석 후 추천 제공
  • 다양한 주제 블로그의 커스터마이징 사례 공모
  • 독자들의 적용 후기 수집

이 포스팅은 실제 우리의 대화를 기반으로 하여 매우 구체적이고 실용적인 내용을 담고 있어, 티스토리 사용자들에게 큰 도움이 될 것 같습니다!

 

여기는 출처가 없네요. 퍼플렉시티가 직접 만든 것 같습니다.

첫 번째 사진인 스킨 편집에 표시를 해준 스크린샷은 정말 놀라웠는데 그다음부터는 정말 창작 수준의 사진이라 이건 뭘까 싶긴 했습니다. 아무래도 생성형 AI가 아니라서 글을 쓰는 것은 무리이지만 사진은 생성했다는 것에 대해 놀라웠습니다.

728x90

'IT컴퓨터' 카테고리의 다른 글

[AI기고] 사장님들 카드 단말기에서 매출 거래 내역 상세 내역 등을 쉽게 보는 방법  (10) 2025.08.08
일을 편하게 하려고 AI한테 물어보다가 코딩까지 갈 뻔 했던 썰  (8) 2025.08.08
윈도우10에서 윈도우11로 무료 업그레이드 / 시작메뉴 설정 작업표시줄 설정  (0) 2024.05.31
윈도우10에서 윈도우11 업데이트를 향한 여정  (2) 2024.05.30

'IT컴퓨터'의 다른글

  • 현재글퍼플렉시티 연구실 Perplexity Labs 사용으로 티스토리 꾸며보기

관련글

티스토리툴바