Korea Blind Alley-어쩔수

Posts

Showing posts with the label KoreanArticle

구글 블로그 스팟에 카카오 애드핏 삽입하는 방법

March 09, 2021

이 구글 블로그에 애드핏을 삽입하려다가 실패했습니다. 보류가 되었는데요. 보류 사유를 살펴보니 이렇네요. "해당 매체는 콘텐츠 부족으로 보류되었습니다. 콘텐츠 보충 후 재심사를 요청하여 주시기 바랍니다. AdFit 광고 스크립트가 게시글에 설치되어 있어 보류되었습니다. 광고 스크립트는 스킨 또는 플러그인을 통해 설치하신 후 재심사를 요청하여 주시기 바랍니다." 이상 두 가지의 이유로 보류되었습니다. 그렇다면 하나씩 해결 방법을 찾아봐야겠지요. 우선, 첫 번째 이유인 콘텐츠 부족은 20개 이상의 글 발행으로 해결할 수 있을 것 같습니다. 콘텐츠 부족이라는 사유를 보고 나서 카카오의 블로그 서비스인 티스토리의 카카오 애드핏 신청 기준을 찾아보았습니다. 그랬더니 개설 후 30일, 콘텐츠 적어도 20개의 조건이 있더라고요. 저는 이번 글을 작성하면 17번째 글이니, 이 글 이후로 3건만 더 발행하고 나면 바로 카카오 애드핏 승인에 재도전 하려고 합니다. 두 번째 사유는 광고가 게시글 안에 삽입되었기 때문입니다. 이 문제는 블로거의 레이아웃 섹션에 들어가서 해결할 수 있었습니다. 이 사실을 알기 전에는 광고를 일일이 게시물 안에 넣었었는데요. 보류 사유를 보고 나서는 이미 글 안에 들어간 코드 일일이 지우느라 애 먹었습니다. 이 글을 읽는 여러분은 저 같은 실수 하지 않으시길 바랍니다. 그럼 두 번째 문제인 광고 삽입 문제의 구체적인 해결 방법을 알아보겠습니다. 우선, 구글 블로거에 접속하면 왼쪽 메뉴 중에 '레이아웃'이라는 항목이 있습니다. 여기를 클릭합니다. 레이아웃 메뉴는 블로그의 가젯 구성, 위치 설정 등을 할 수 있는 메뉴입니다. 레이아웃에 들어오셨으면 '가젯 추가' 버튼을 눌러줍니다. 가젯 추가 버튼을 누르면 아래 캡쳐 화면과 같은 팝업 창이 뜰텐데요. 이 중 "HTML/자바스크립트" 버튼을 눌러줍니다. 클릭 후 나오는 텍스트 입력 창에 카카오 애드핏에서 발급 받은 광고 스크립트를 복사 붙여

웹사이트를 만들고 나서 디플로이(deploy)부터 광고 붙이기까지 나만의 일 처리 순서

March 09, 2021

최근 웹사이트를 몇 개 만들었는데 웹사이트를 만들고 나서 디플로이(deploy)부터 SEO 최적화까지의 과정을 거치면서 헷갈리거나 놓치는 순간들이 있었다. 그래서 블로그에 이 과정을 정리해두고 업무 순서도처럼 참고하려고 한다. 1. 검색 엔진 최적화 (SEO 최적화)에 필요할 태그들 미리 추가하기 html 파일을 작성할 때 주로 <!DOCTYPE html> 양식으로 작성을 한다. 이 때 자동으로 생성되는 메타 태그들도 있지만, 네이버 SEO 최적화를 진행하기에는 부족하다. 그래서 웹사이트 개발을 완료하면 아래의 다섯 개 태그를 추가한다. 페이지 설명과 Open Graph 관련 태그들이다. 선호 URL을 정하는 태그도 있다. < meta name = "description" content = "사이트 설명" > < meta name = "keywords" content = "검색 키워드들, 쉼표로 구분" > < meta property = "og:title" content = "오픈그래프 제목" /> < meta property = "og:description" content = "오픈그래프 설명" /> < link rel = "canonical" href = "https://선호URL/" > 2. 위의 태그들이 추가되면 deploy한다. 요새는 조코딩JoCoding 유튜브 채널을 통해 알게 된 netlify에 사이트들을 업로드하고 있다. 무료지만 100GB까지 사이트들을 업로드할 수 있어 매우 유용하고 편리하다. 다만, 무료 버전을 사용할 시 사이트 Url이 "https://자신이 정한 주소.netlify.app/"이 되고 .com 도메인을 쓰려면 유료 결제를

[자바스크립트] 입력 창 안의 텍스트 클립보드 복사 기능 구현하기

March 08, 2021

입력 창 안의 텍스트를 사용자가 클립보드에 복사할 수 있게 하는 기능은 매우 유용합니다. 가장 대표적인 목적을 예로 들자면, 자신의 웹사이트 이용자에게 웹사이트 공유를 부탁하며 링크를 편하게 복사할 수 있도록 해줄 수도 있습니다. 제가 만든 웹사이트의 경우, 사용자가 직접 입력 창을 필요한 문자로 채우고 이를 복사해서 필요한 곳에 사용할 수 있게 하였습니다. 아래 캡쳐 화면을 보시면 이해가 쉬울 것입니다. 나열된 문자 중 필요한 문자를 클릭하면 상단의 입력 창에 모여서 글 복사 버튼을 누르면 알림이 뜨는 방식입니다. 포스팅 내에 입력 창과 이 입력 창 안의 텍스트를 복사할 수 있도록 하는 버튼을 직접 구현해 보겠습니다. 코드는 그 아래에 적어 놓을테니 마음에 드신다면 가져 가서 쓰시면 되겠습니다. 복사 버튼을 활용하는 데에는 대표적으로 두 가지 경우가 있을 것 같습니다. 입력 창이 비어져 있어서 웹 사용자가 직접 입력 창을 채우고 복사해 가는 경우, 그리고 개발자가 미리 입력 창에 원하는 텍스트를 채워 놓고, 사용자는 이 텍스트를 그대로 복사해 가는 경우. 전자의 경우를 먼저 알아 보겠습니다. 글 복사 버튼 입력 창 안에 원하는 텍스트를 직접 입력하고 글 복사 버튼을 클릭해 보세요. 버튼 안의 텍스트도 직접 정할 수 있습니다. 위 기능의 코드는 아래와 같습니다. .html 파일 <input id="something" name="Subject" size="40" type="text" /><br /><br /><button onclick="myFunction()"> .js 파일 function myFunction() { var copyText = document.getElementById("something"); copyText.select(); copyText.setSelectionRan

내가 구글 블로그 블로그스팟도 하는 이유 (Blogspot)

March 08, 2021

나는 원래 네이버 블로그에 주력하고 있었다. 2020년 5월에 구글 블로그를 시작하긴 했지만 괜히 힘과 시간이 분산되어 애매해진다는 판단을 하고 네이버 블로그에 집중했다. 하지만 결국, 네이버 애드포스트의 적은 수입에 지쳐 네이버 블로그보다 이제 구글 블로그 스팟에 좀 더 큰 힘을 쏟아야겠다는 생각이 들었다. 네이버 블로그의 대안으로 구글 블로그 스팟을 선택한 이유를 말하자면 왜 티스토리로 가지 않았는지부터 설명해야 할 것 같다. 첫째로, 글로벌 독자를 찾아 나서기 위함이다. 나도 검색할 때의 내 모습을 돌이켜 보면 어쩔 수 없이 도메인 이름을 보고 신뢰성이 떨어지기도 한다. 과거에 티스토리에 대해서 잘 몰랐을 때는 나도 티스토리라는 도메인 이름을 보고 이건 뭐하는 사이트 이름인가 하고 생각했던 적이 있었다. 하물며 해외의 독자 층에게는 티스토리가 더 낯설 것이라고 생각한다. 나는 장기적으로 영어 글과 한국 글을 번갈아 써가며 넓은 세상을 타겟으로 하는 블로그를 만들어 보고 싶다. 두 번째 이유는 좀 더 간단하다. 구글 블로그 스팟을 하는 사람이 티스토리를 하는 사람보다 적은 것 같았기 때문이다. 조금이라도 더 특이한 걸 선택해야 블로그 소재도 더 많아지고, 검색 유입도 더 좋을 것이라고 예상하였다. 이제는 네이버보다 구글 블로그 스팟의 좋은 점에 대해서 알아보자. 가장 큰 장점은 html 편집이 가능하다는 것이다. 요새 프로그래밍에 흥미를 붙이고 열심히 하고 있다. 자연스레 블로그에도 프로그래밍 관련한 글을 많이 작성하고 있다. 예를 들어 최근에는 네이버 지도 API를 사용하는 방법에 대한 포스팅을 작성했는데, 네이버 블로그에는 단조롭게 사용하는 방법에 대해서 밖에 쓸 수 없었다. 반면, 구글 블로그에도 네이버 지도 API를 사용하는 방법을 적었는데, 이 때는 직접 포스팅 안에 네이버 지도 API를 넣어가며 글을 작성해서 좀 더 역동적으로 글을 쓸 수 있었다. 쓰는 나도 더 재미가 있고, 읽는 사용자도 더 큰 도움이 될 것이라고 생각한다. html 편집

내가 만든 웹사이트에 카카오 애드핏 넣어보기_매우 간단

March 08, 2021

안녕하세요? 어쩔수입니다. 최근에 웹사이트를 세 개를 만들었고, 2개는 승인이 됐고, 1개는 반려가 됐습니다. 우선, 반려 사유는 한 페이지에 동일 광고 단위로 2개 이상의 광고를 삽입했기 때문입니다. 이 이야기는 글 말미에 자세히 이야기하기로 하고 일단, 카카오 애드핏 광고를 넣는 과정을 알아보겠습니다. 1. 카카오 애드핏에 로그인한 뒤 이용약관에 동의합니다. 그럼 아래 같은 화면이 나오는데, 광고 관리에 커서를 대면 '광고 관리' 탭이 나옵니다. 이 광고 관리를 클릭합니다. 2. 다음에 나오는 화면에서는 '+새 매체'를 클릭합니다. 클릭 후 나오는 화면에서는 매체명과 매체URL을 입력하면 되는데요. 매체명은 자신이 구별할 수 있는 이름을 자유롭게 지어주면 됩니다. 사이트 이름으로 정하는 것이 무난합니다. 매체 URL에는 자신의 웹사이트의 링크를 정확하게 입력해줍니다. 이 글을 작성하는 김에 이 구글 블로그스팟을 카카오 애드핏에 등록해보겠습니다. 광고 단위명에도 간단히 이름을 지어줍니다. 원하는 광고 유형을 선택합니다. 현재 다음과 같은 광고 유형들이 있습니다. 다양한 배너 모양이 있네요. 배너를 선택했으면 '스크립트/SDK 발급'을 클릭합니다. 3. 이제 가장 중요한 과정입니다. 발급 받은 스크립트와 SDK를 원하는 위치에 입력하여 줍니다. 저는 이 문장 바로 아래에 삽입해 보겠습니다. 꼭 광고가 승인되어 여러분이 이 글을 볼 때 쯤이면 광고가 보이는 중이었으면 좋겠습니다. 알고보니 게시글 안에 광고가 삽입이 되면 안 된다고 합니다. 블로거의 레이아웃 섹션에서 html, 자바스크립트 설정을 통해 삽입해야 합니다. 앞서 말씀드린대로 저는 한 페이지에 동일한 광고 단위의 광고가 2개 이상 들어가면 승인이 보류됩니다. 두 개 이상의 광고를 한 페이지에 넣고 싶다면 꼭 다른 광고 단위를 발급 받아야 한다는 것을 유념하시기 바랍니다.

자바 스크립트 입문자가 매우 간단한 영어 가상 키보드를 만든 방법

March 07, 2021

안녕하세요? 어쩔수입니다. 저는 자바 스크립트를 배우기 시작한 지 아직 한 달이 되지 않은 자바 스크립트 입문자입니다. 비록 초보인 제가 만들어서 미흡한 점이 많지만 다른 초보들이 간단한 가상 키보드를 만드는 데에 작은 도움이 될 수 있을 것 같아 만든 방법을 공유하려고 합니다. 저도 방법을 찾느라 많이 찾아보고, 헤맸거든요. 다만, 영어 버추얼 키보드라서 한글 키보드를 만드시려는 분께는 큰 도움이 안 될 것 같습니다. 위의 캡쳐 화면이 제가 만든 가상 온스크린 키보드입니다. 버튼 클릭을 통해 인풋 박스에 입력되면 복사 버튼을 눌러서 클립보드에 복사하는 프로그램입니다. 프랑스어, 스페인어 등 악센트 마크가 있는 알파벳이 포함된 언어를 사용하는 국가에 있는 사람들이 키보드에 악센트 마크가 없을 때 간단히 복사 붙여 넣기 할 수 있도록 만든 사이트입니다. 통화 기호를 모아 놓은 페이지도 있습니다. 웹에서 직접 보고 싶으신 분은 링크를 타고 들어가 주세요. https://accentmark.netlify.app/ 제가 위의 사이트에서 사용한 코드 중 일부를 여기에서 이 페이지에 직접 구현해보겠습니다. 아래의 '감사합니다' 버튼을 눌러보세요. 감사합니다 아래는 제가 쓴 코드입니다. .js 파일 function addText1() { var input = document.getElementById('something'); input.value = input.value + '감사합니다'; } .html 파일 <button id="URGENT" onclick="addText1()" type="button"><h2>감사합니다</h2></button>

남이 볼 것 같은 나, 남이 봐 줬으면 하는 나 - 성향 테스트

March 06, 2021

안녕하세요? 어쩔수입니다. 새로운 성향 테스트를 만들게 되어 소개하려고 합니다. 링크는 글 맨 아래에 첨부하겠습니다. 요새 유행하는 MBTI 등의 심리/성향 테스트는 주로 '내가 생각하는 나의 모습'을 물어보고 답하는 테스트가 많지요. 그래서 저는 궁금해졌습니다. 내가 예상하는 남이 생각하는 나의 모습과 내가 생각하는 나의 모습은 얼마나 일치할까? 중요한 것은 꼭 객관적일 필요 없다는 것입니다. 실제로 남이 나에 대해 어떻게 생각하는 지가 정확히 반영될 필요는 없습니다. '내가 생각하기에 남들은 나를 이렇게 생각할 것 같다' 하는 모습을 골라주시면 됩니다. 여기에 추가로, 남이 봐 줬으면 하는 나의 모습을 답할 수 있습니다. 테스트가 끝나고 나면, 내가 보는 나의 모습, 남이 이렇게 보지 않을까 하는 모습, 남이 이렇게 봐 주었으면 좋겠다 하는 모습을 한눈에 볼 수 있습니다. 조금 복잡하죠? 이 테스트를 진행할 '마시우리'라는 캐릭터가 있는데요. 이 캐릭터에게 추가 설명을 맡기겠습니다. 마시우리 두두둥장 (icons made from flaticon) 안녕들 하신가. 나는 마시우리라네. 상대방의 마음을 꿰뚫는 마법의 책이지. 왜 세 권의 책이 있냐고? 내가 분신술로 두 권의 책을 더 만들어 냈다네. 분신술인데 왜 모습이 다르냐고? 마법이 잘못된 것이 아니냐고? 하하 그렇게 생각할 수 있네. 하지만 위의 모습은 내가 생각하는 나의 모습, 아래 왼쪽의 모습은 남이 생각할 것 같은 나의 모습, 오른쪽 모습은 남이 봐 줬으면 하는 나의 모습이라네. 내 분신들의 이야기도 들어 보게. 왼쪽 아래 (남이 생각할 것 같은 나의 모습): 나는 상대방의 마음을 꿰뚫는 일을 하는 만큼 사람들이 나를 차가운 책이라고 볼 것이라고 생각하네. 그리고 말하는 책이 흔하지 않아서 가끔 나를 신기하게 보는 사람들이 있는데 그럴 때는 사람들이 나를 우리에 갇힌 구경거리로 생각하지 않을까 싶기도 하네. 오른쪽 아래 (남이 봐 줬으면 하는 나의 모

재밌는 성향 테스트 소개 - 나와 비슷한 위인 찾기 (심리/성향 테스트)

March 06, 2021

안녕하세요? 어쩔수입니다. 제가 성향 테스트를 하나 만들어서 소개해 드리려고 합니다 한국어와 영어 두 가지 버전이 있습니다. 마시우리 '나와 비슷한 위인 찾기' 링크: 안녕하세요? 어쩔수입니다. 제가 성향 테스트를 하나 만들어서 소개해 드리려고 합니다. 한국어와 영어 두 가지 버전이 있습니다. 마시우리 '나와 비슷한 위인 찾기' 링크: https://masiurimbti.netlify.app/index.html 테스트 소개 위 캐릭터의 이름은 '마시우리'입니다. 마시우리는 마법의 책으로서 사람들의 마음을 꿰뚫어 봅니다. 이번에 마시우리는 여러분에게 12개의 질문을 통해 당신과 비슷한 위인을 찾아주려고 합니다. 마시우리의 실력이 의심되나요? 마시우리는 최고의 마법 학교인 호그와트에서 기숙사를 배정하는 마법의 모자에게서 배운 수제자입니다. 마법의 모자님은 워낙 유명해서 여러분도 많이 알고 계실 거라고 생각합니다. 영어도 할 줄 아신다면, 영어 버전도 한 번 해 보는 것이 어떨까요? 마시우리는 가끔씩 상대방이 사용하는 언어에 따라 다른 결과를 내주기도 하거든요. 유튜브 영상 소개 설명이 너무 길어서 지루하신가요? 그렇다고요? 우와 솔직하시군요. 좋습니다. 솔직한 분일수록 이 테스트에서 정확한 결과를 얻기가 수월하거든요. 아래 링크는 제가 만든 마시우리 테스트 '나와 비슷한 위인 찾기' 홍보 영상입니다. 글로 된 설명보다 흥미로울 것입니다. https://www.youtube.com/watch?v=n8VCTSP7LU4 이제 더 이상 붙잡지 않겠습니다. 아래에 다시 한 번 '나와 닮은 위인 찾기' 링크를 올려 드리겠습니다. 재밌게 즐겨주세요! https://masiurimbti.netlify.app/index.html 새로운 마시우리 시리즈로 돌아오겠습니다.

웹사이트를 네이버 SEO 최적화 실습해 보기

March 05, 2021

안녕하세요? 어쩔수입니다. 웹사이트를 만들고 나면 접근성이 좋아야 많은 사람들이 이용하기 편해지겠죠? 이를 위해 꼭 해야 할 것이 바로 SEO 최적화입니다. 검색 엔진에서 나의 웹사이트를 찾아내기 위한 최적의 조건을 갖추게 해주는 과정입니다. 차례대로 자세하게 알아보겠습니다. 1. 네이버 서치 어드바이저의 '웹 마스터 도구'에 접속합니다. https://searchadvisor.naver.com/console/board 자신의 사이트 URL을 등록합니다. URL이 등록되면 소유 확인 절차가 필요합니다. 아래, HTML 태그를 선택하고 메타 태그를 복사한 뒤 사이트의 홈페이지 HTML에 삽입하고 Deploy 해줍니다. Deploy가 완료된 후 소유 확인 버튼을 클릭하면 소유가 확인되었다는 안내와 함께 다음 페이지로 넘어갑니다. 2. robots.txt 생성하고 폴더에 넣기 (유의사항: robots.txt가 최상단 폴더에 위치하게 할 것) 왼쪽 메뉴 중 '검증'을 클릭하면 robots.txt 항목이 있습니다. 이를 클릭하고 넘어간 페이지에서 아래로 스크롤을 내리면 'robots.txt 간단 생성' 항목이 있습니다. '모든 검색 로봇 수집을 허용합니다.'로 설정한 뒤 다운로드 합니다. 이렇게 다운로드된 robots.txt는 웹사이트 폴더에 넣어줍니다. (꼭 최상단 폴더에! 하위 폴더에 넣으시면 안됩니다.) robots.txt가 들어간 폴더를 다시 한 번 Deploy 합니다. Deploy 후에는 다시 robots.txt를 생성하던 화면으로 돌아옵니다. 다시 스크롤을 올리면 robots.txt 정보 섹션이 있습니다. '수집 요청' 버튼을 클릭합니다. 수집 요청 버튼을 클릭하고 몇 초 뒤에 수집된 정보가 비어 있던 화면 위에 자동으로 작성될 것입니다. 여기까지 되면 robots.txt 검증 작업은 완료되었습니다. 3. 이제 웹 페이지 최적화가 필요합니다. robots.txt와 마찬가지로 '

네이버 지도 API, Web Dynamic Map 사용 방법 - 실습해 보자 (Naver map API)

March 05, 2021

위의 네이버 지도 API - Web Dynamic Map이 삽입된 것이 보이시나요? 네이버에는 프로그래머들이 유용하게 활용할 수 있는 API가 여러 가지 준비되어 있는데요. 저는 네이버 지도, 그 중에서도 Web Dynamic Map을 HTML에 삽입하는 것을 직접 차례대로 자세히 실습해 보겠습니다. 1. 우선 네이버 클라우드 플랫폼에 접속합니다. https://www.ncloud.com/product/applicationService/maps 서비스의 Application Service 중 Maps 에 들어가서 이용 신청하기를 클릭합니다. 이용 신청하기를 클릭하면 로그인 화면이 나올 겁니다. 네이버 아이디가 있더라도 클라우드 플랫폼에는 따로 회원 가입이 필요합니다. 회원 가입 이후에 계정 관리에서 네이버 아이디를 연동해 주면 다음 로그인부터는 네이버 아이디로 간편하게 로그인 할 수 있습니다. 일단은 회원 가입을 진행합니다. 2. 회원 가입이 완료되면 다음 화면으로 넘어가고, 결제 수단을 입력하라는 안내가 나옵니다. 제가 사용할 Web Dynamic Map은 월 1천만 회의 무료 이용 한도가 있어, 사실상 무료나 다름 없습니다. 걱정하지 않고 결제 수단을 등록해 줍니다. 결제 수단까지 등록하고 나면 네이버 클라우드 플랫폼 웹사이트 우측 상단에 Console 버튼이 있습니다. 위의 캡쳐 화면에서도 Console 버튼의 위치를 확인할 수 있습니다. 여기를 클릭합니다. 그러면 아래 캡쳐 화면처럼 콘솔에 들어가게 되는데요. 왼쪽 메뉴들 중 Products & Services를 클릭한 뒤 나오는 상세 메뉴들 중 AI, NAVER API를 클릭합니다. 3. 그 후 나오는 화면에서는 Application 등록을 클릭합니다. Application 이름에는 자신이 서비스를 분간할 수 있는 이름을 정합니다. 웹사이트 이름을 적는 것이 무난합니다. Web 서비스 URL에는 사이트 URL을 정확하게 기입합니다. URL을 추가한 뒤 다음으로 넘어가면 인증 정보를 발