AI로 SEO 최적화하기 : PageSpeed 100점!
AI로 SEO 최적화하기 : PageSpeed 100점!
웹사이트를 만들었다면, 그다음은 사람들이 찾아오게 해야 하지 않을까요? 멋진 사이트를 만들었는데, 정작 아무도 들어오지 않는다면 아쉽죠. 이때 필요한 것이 SEO와 AEO입니다. SEO(Search Engine Optimization)는 구글 같은 검색엔진에서 내 사이트가 잘 노출되도록 최적화하는 것입니다. AEO(Answer Engine Optimization)는 ChatGPT, Perplexity 같은 AI 검색엔진이 내 콘텐츠를 답변 소스로 인용하도록 최적화하는 거예요. 요즘은 검색 자체가 AI로 넘어가고 있으니, 둘 다 신경 써야 하는데 SEO가 기본이지요. 콘텐츠를 계속 발행할 계획이라면 적절한 키워드를 타겟한 좋은 글을 쓰는 것도 물론 중요하지만, 그것만으로는 부족합니다. 모바일 환경에서도 레이아웃이 잘 정리되어있고, 글자들도 가독성이 높고, 페이지 퍼포먼스 측면에서도 좋은 점수를 받아야 구글이나 AI가 "이 사이트는 잘 관리되고 있는 좋은 웹사이트"라고 평가하거든요. 느리고, 접근성이 떨어지고, 기본적인 웹 표준도 안 지키는 사이트의 콘텐츠는 좋은 점수를 받지 못합니다. 근데 SEO, AEO라고 하면 막막하게 느껴지는 분들이 많을 거예요. 조금 검색을 해보셨다면 메타태그, 구조화 데이터, canonical 태그... 용어부터 낯설죠. 저도 그랬습니다. 누가 필요한 것만 진단해주고 고쳐주면 좋을텐데 싶은데, AI와 함께 아주 쉽게 기본 사항들을 최적화 할 수 있는 방법이 있습니다. 제 블로그의 SEO 점수를 모두 80~100점으로 올렸는데 어떻게 했는지 따라해보실 수 있도록 과정을 그대로 공유합니다. 내 사이트 상태부터 확인하기 제일 먼저 할 일은 현재 상태를 파악하는 겁니다. PageSpeed Insights에 내 사이트 주소를 넣어보세요. 4가지 점수가 나옵니다: Performance - 페이지 로딩 속도 Accessibility - 접근성 (스크린리더, 키보드 내비게이션 등) Best Practices - 웹 표준 준수 SEO - 검색엔진 최적화 시작 전에 캡쳐해둔다는것을 깜빡했는데, 저는 처음에 SEO 77점, Accessibility 89점, Performance 54점이었습니다. 개선할 곳이 꽤 있었죠. AI 스킬 설치하기 Claude에서 SEO 감사를 잘 수행하려면 seo-audit 라는 SEO 전문 스킬을 활용하면 됩니다. 터미널에 아래 명령어를 입력해 설치합니다. npx skills add https://github.com/coreyhaines31/marketingskills --skill seo-audit 1단계: AI에게 진단 요청하기 seo-audit 스킬을 설치했다면 이제 AI에게 "내 사이트 SEO 진단해줘"라고 말하면 됩니다. 그럼 AI가 알아서 seo-audit 스킬을 사용해 전체 프로젝트 코드를 훑으며 문제를 찾아냅니다. 저는 이런 문제들이 발견됐습니다: 파일마다 도메인이 제각각이었습니다. 검색엔진 입장에서는 같은 사이트인지 헷갈릴 수밖에 없습니다. html lang 속성이 없었습니다. canonical 태그가 없었습니다. 일부 페이지에 메타태그 자체가 없었습니다. 등등, 그리고 이 외 몇 가지가 더 있었습니다. 만약 AI가 말하는 것들이 무엇인지 몰라도 괜찮습니다만, 해당 스킬이 SEO관련 지식들이 많이 있기 때문에 궁금한 것은 물어보면 좋습니다. 2단계: 진단 결과에 따라 수정 적용하기 진단이 끝나면 AI가 하나씩 수정해줍니다. 각자의 웹사이트 상황에 따라 진단 결과가 다를 것이기 때문에 모든 것을 다 다루기보다는 어떤 방식인지만 언급하고 넘어가도록 하겠습니다. 도메인 통일 : 모든 파일에서 도메인을 하나로 맞춥니다. 이건 단순해 보이지만, 코드베이스 전체를 뒤져야 해서 손으로 하면 빠뜨리기 쉽습니다. lang 속성 추가 : <html lang="ko"> 한 줄이면 됩니다. 검색엔진이 페이지 언어를 정확히 파악하는 데 필요합니다. canonical 태그 : canonical 태그는 "이 URL이 이 페이지의 정식 주소입니다"라고 검색엔진에 알려주는 겁니다. SNS 공유 시 ?utm_source=twitter 같은 파라미터가 붙으면 검색엔진은 다른 페이지로 볼 수 있어요. 이걸 방지하는 보험 같은 역할입니다. AI가 진단 결과를 알려주면서 동시에 개선 방안까지 함께 제안할 것입니다. 제안 내용을 읽어보고 큰 문제 없을것 같다 싶으면 "진행해줘" 라고 해주세요. 3단계: 배포하고 점수 확인하기 수정이 완료되면 배포하고, 다시 PageSpeed Insights를 돌려봅니다. 한 번에 100점이 나오지 않아도 괜찮습니다. 점수가 오른 것을 확인하고, 남은 문제를 AI에게 다시 물어보는 식으로 반복합니다. PageSpeed Insights는 SEO, Performance 외에도 Accessibility, Best Practices 항목이 있습니다. 스크롤을 내려보면 각 항목마다 어떤 문제가 있는지 구체적으로 보여주기 때문에, 결과 화면을 스크린샷으로 찍어서 클로드에게 전달하며 "어떻게 개선할 수 있는지 방법을 찾고 개선해줘"라고 요청해보세요. 항목별로 원인과 해결 방법을 알려주고, 바로 코드를 수정해줍니다. 저의 경우에는 접근성 항목에서 아이콘 버튼들에 적절한 이름이 설정되어있지않다고 하는군요. 이 부분을 캡쳐해서 AI에게 전달하고 해결해달라고 하면 개선사항에 반영해줍니다. 최종 결과 Performance: 54 → 97 Accessibility: 89 → 94 Best Practices: 77 → 96 SEO: 100 → 100 따라해보세요 웹사이트가 있다면 지금 바로 시작할 수 있습니다. PageSpeed Insights에 내 사이트 주소를 넣어 현재 점수를 확인하세요 SEO 전문 스킬을 설치하세요 AI에게 "내 사이트 SEO 감사해줘"라고 요청하세요 진단 결과를 하나씩 수정 적용하세요 배포 후 다시 점수를 확인하세요 반복하세요 SEO 최적화는 한 번에 끝나는 작업이 아닙니다. 하지만 AI와 함께라면 처음 시작이 훨씬 쉬워집니다. 복잡한 설정을 직접 외울 필요 없이, 진단하고 수정하는 사이클을 돌리면 됩니다. 이렇게 하나씩 AI를 활용해 내 브랜드의 완성도를 올려가세요.
1인 개발자 수익, 디자이너 출신이 유리한 이유
1인 개발자 수익, 디자이너 출신이 유리한 이유
1인 개발자 수익, 디자이너 출신이 유리한 이유 1인 개발 수익 이야기를 찾아보면 디자이너 출신은 많지 않습니다. 아마 개발에 대한 진입장벽을 크게 느끼기 때문일 겁니다. 바이브코딩으로 코딩이 쉬워졌는데도, 여전히 "코딩"이라는 단어가 주는 어려움 때문인지 많은 디자이너들이 망설이고 있는 것 같습니다. 하지만 당신이 디자이너라면, 오히려 개발자보다 훨씬 좋은 결과물을 낼 수 있습니다. 왜 그런지 이야기해보겠습니다. 코딩은 이미 AI가 해결했습니다 바이브코딩이 등장하면서 판이 바뀌었습니다. Claude Code, Cursor 같은 AI 코딩 도구를 쓰면 코딩을 몰라도 앱을 만들 수 있습니다. 아이디어를 말로 설명하면 AI가 코드를 짜줍니다. 물론 코딩 지식이 전혀 필요 없는 건 아닙니다. 하지만 처음부터 다 알아야 하는 건 아니고, 만들어가면서 천천히 하나씩 배워가면 됩니다. 저는 11년 차 프로덕트 디자이너입니다. 웹 개발 경험은 어느 정도 있었지만 모바일 앱은 처음이었습니다. Claude Code로 iOS와 안드로이드 독서 기록 앱을 직접 만들어 양쪽 스토어에 출시했고, 지금도 계속 운영하고 있습니다. 구독 수익은 아직 크진 않지만 꾸준히 발생하고 있고, 계속 키워나가는 중입니다. "코딩을 못하면 개발을 못 한다"는 전제가 더 이상 유효하지 않습니다. 그렇다면 지금 1인 개발에서 진짜 어려운 건 뭘까요. 코딩이 아닙니다. "사람들이 실제로 쓰고 싶은 제품"을 만드는 것입니다. 아무리 기술적으로 완벽한 앱을 만들어도, 쓰기 불편하거나 첫인상이 별로면 아무도 다운로드하지 않습니다. 1인 개발자 수익은 기술력이 아니라 제품력에서 갈립니다. 바로 이 지점에서 디자이너의 UX 감각이 결정적인 차이를 만듭니다. 디자이너가 만들면 뭐가 다른가 비주얼: 디자이너의 손이 닿으면 다릅니다 비주얼이 좋은 앱은 누구나 좋아합니다. 앱스토어에서 처음 3장의 스크린샷을 보고 "이거 괜찮겠다"는 느낌이 다운로드를 좌우하죠. 요즘은 AI가 준수한 퀄리티의 이미지를 만들어주긴 합니다만 디자이너의 손이 닿은 결과물은 뭔가 다릅니다. AI는 "그럴듯한" 이미지를 만들 수 있지만, 의도를 가지고 사용자의 시선을 이끌고 브랜드의 톤을 일관되게 유지하는 건 디자이너만 할 수 있는 일입니다. 모든 디자이너가 그림을 잘 그리는 건 아니지만 보통 디자이너들은 눈이 높고, 좋은 시각물이 뭔지 알죠. 직접 못 만들면 AI에게 시키되, 디자이너의 높은 눈으로 디렉팅하면 됩니다. 의도를 가지고 AI가 낼 수 없는 것을 만들어낼 수 있는 것이 바로 디자이너죠. 사용성: 개발자와는 다른 감각이 있습니다 오랫동안 개발자들과 일해본 경험으로 말하자면, UX/UI에 관심이 많은 개발자가 만든 앱도 여전히 쓰기 불편한 경우가 꽤 있었습니다. 이유를 정확히 설명하기는 어렵지만, UX/UI 디자이너들은 시각적인 요소를 다루는 능력과 무언가가 결합되어 "사용하기 편리하고 직관적이다"라는 것에 대한 감각이 특별히 발달해 있는 것 같습니다. 온보딩 흐름, 버튼 위치, 정보 위계를 자연스럽게 설계하는 것. 사용자가 "어디를 눌러야 하지?"라고 고민하지 않게 만드는 것. 이런 게 몸에 배어 있습니다. 이 감각은 수년간 UX를 고민하면서 쌓인 것이라 AI가 쉽게 대체하지 못하는 부분입니다. 그리고 이 감각이 제품을 만들 때 정말 많은 영향을 끼칩니다. 같은 기능의 앱이라도 좋은 사용성 하나만으로 엄청난 경쟁력을 가진 앱이 될 수 있습니다. 사이드프로젝트 수익의 가장 큰 변수 중 하나가 이탈률인데, 앱을 설치했는데 쓰기 불편하면 삭제합니다. 쓰기 편하면 남습니다. 남아야 1인 개발자 수익이 생깁니다. 마케팅: 결국 시각물로 승부합니다 마케팅은 사실 개발이나 디자인과는 완전히 다른 방식으로 뇌를 써야 합니다. 사람들의 심리를 읽고, 관심을 사로잡는 스킬이 필요합니다. 하지만 결국 마케팅의 결과물은 시각물로 나옵니다. 랜딩페이지, SNS 홍보 이미지, 소개 영상 썸네일. 전부 눈으로 보는 것들입니다. 마케팅 감각은 키워야 하지만, 그 감각이 붙었을 때 누구보다 좋은 시각물로 좋은 성과를 낼 수 있는 사람이 바로 디자이너입니다. 바이브코딩 수익화, 디자이너에게 유리한 이유 디자이너 출신 1인 개발자가 노릴 수 있는 수익 모델은 크게 두 가지입니다. 1. 트래픽을 끌고 와서 광고로 벌기 무료 앱이나 웹서비스를 만들고 광고 수익을 받는 모델입니다. 물론 트래픽을 끌고 온다는 건 트렌드를 파악하는 능력, 기회를 포착하는 능력이 필요하고 이것도 훈련이 필요한 영역이긴 합니다만, 시행착오 끝에 얻은 이 능력에 원래 가지고 있는 비주얼 구현 능력이 더해지면 쉽게 차별화가 됩니다. 2. 좋은 사용성으로 유료 앱 만들기 앱스토어에서 유료 앱이나 인앱 결제로 직접 수익을 내는 모델입니다. 사용자가 "이 앱은 돈 낼 만하다"고 느끼려면 쓰기 편해야 합니다. 앞서 이야기한 디자이너의 UX 감각이 바로 여기서 빛을 발합니다. 좋은 사용성은 이탈을 줄이고, 이탈이 줄면 구독이 유지되고, 구독이 유지되면 수익이 쌓입니다. 두 가지 모델 모두 공통점이 있습니다. 디자이너의 강점이 수익과 직접 연결됩니다. 시각적 매력으로 사람을 끌고, 좋은 사용성으로 남게 하는 것. 전부 디자이너가 잘하는 일입니다. 코딩이라는 단어가 주는 심리적 장벽 때문에 시작하지 못하고 있다면, 거창하게 생각하지 마세요. Cursor, Claude Code, Google AI Studio 같은 도구들이 이미 많습니다. 작게라도 예쁜 계산기 하나부터 만들어보세요. AI가 만들어준 적당한 디자인을 보고 "이건 아닌데"라고 느끼는 순간이 올 겁니다. 그때 본인의 감각을 녹여서 직접 제품을 개선해보세요. 그 경험을 한 번 하고 나면 점점 생각하는 방식이 달라집니다. "나도 만들 수 있겠는데?"라는 감각이 생깁니다. 그동안 갈고닦은 디자인 능력이 가장 강력한 무기입니다. 1인 개발로 수익을 내기 위한 진짜 경쟁력은 이미 디자이너들 안에 있습니다. 디자이너라면 당장 개발 도구를 설치하고 나만의 것을 만들어보세요.
바이브코딩, AI가 문제 해결을 못할 때 해결 방법 4가지
바이브코딩, AI가 문제 해결을 못할 때 해결 방법 4가지
AI가 문제 해결에 막혔을 때 빠져나오는 4가지 방법 바이브 코딩을 하다 보면 AI와 함께 문제를 해결하는 과정에서 가끔 막히는 순간이 있습니다. AI에게 에러를 알려주고 "해결해줘"라고 했는데, 몇 번의 대화를 주고받아도 같은 답변만 반복하거나 이미 해결한 문제를 또 해결하려고 하는 상황이죠. 이런 '챗바퀴' 상황에서 벗어나는 실전 팁을 공유합니다. 일반적인 문제 해결 패턴 우리가 AI와 작업하는 방식은 보통 이렇습니다. AI에게 무언가를 요청한다 AI가 작성한 코드에서 에러가 발생한다 에러를 멘션하며 "해결해줘"라고 한다 몇 번의 대화 끝에 해결된다 하지만 4번 단계가 계속 반복되면서 문제가 해결되지 않을 때가 있습니다. 이럴 때 아래 4가지 방법을 순서대로 시도해보세요. 방법 1: 모델을 바꿔본다 Claude Sonnet 4.5로 풀리지 않는 문제가 GPT-5 (High reasoning)로는 해결될 수 있습니다. 단, 지금 사용하는 모델보다 더 성능이 좋은 모델로 바꿔야 합니다. 어떤 모델이 더 좋은지는 벤치마크 리더보드를 참고하면 됩니다. 방법 2: 디버그 로그를 상세히 출력한다 AI가 문제 파악에 어려움을 겪고 있다면, 더 많은 정보를 제공해야 합니다. "(@AI가 헤매고 있는 부분을 멘션하면서) 여기 문제를 제대로 파악하기 위해서 상세한 로그를 남겨줘" AI가 로그 코드를 추가해주면, 다시 에러를 발생시켜 터미널에 찍힌 로그를 확인합니다. 그 로그를 드래그해서 멘션하면서 "이제 원인이 뭔지 다시 파악해줘"라고 요청하세요. 더 많은 정보를 바탕으로 AI가 문제를 정확히 파악할 가능성이 높아집니다. 방법 3: 문제 없는 부분을 명확히 알려준다 AI가 같은 답변을 반복하면서 문제를 해결하지 못한다면, 문제 범위를 좁혀줄 필요가 있습니다. 예를 들어, 구글 로그인 구현 중 문제가 발생했을 때 AI가 계속 SHA 코드 얘기만 한다면, 내가 이미 SHA 코드를 제대로 확인하고 Google Cloud Console에도 정확히 입력했다는 것을 스크린샷으로 보여주면서 이렇게 말할 수 있습니다. "이 부분은 스크린샷에서 보듯이 확실하게 설정했으니 절대 문제가 아니야. 다른 원인을 파악해줘" AI가 다른 곳에서 문제를 찾을 수 있도록 가이드를 주는 것입니다. 방법 4: 코드에 대해 질문한다 1-3번을 시도했는데도 문제가 계속된다면, 코드를 더 깊이 들여다볼 차례입니다. 예를 들어 구글 로그인 버튼을 눌렀을 때 앱이 죽는 현상이 반복된다면, 구글 로그인이 구현된 함수를 찾아 멘션하면서 이렇게 질문하세요. "(@코드를 멘션하며) 이 코드가 정확히 어떤 일을 하는지 초등학교 3학년도 이해할 수 있을 정도로 상세하게 설명해줘" AI가 코드를 한 줄 한 줄 쉽게 설명해주면, 그 과정에서 문제의 실마리를 찾을 수 있습니다. 큰 문제에 막혀 앞으로 나아가지 못하고 있다면, 위 방법들을 하나씩 차근차근 시도해보세요!