평범한 게 제일 어렵다

기존에 구글 이미지 검색에서 특정 이미지를 누르면, 해당 이미지를 바로 볼 수 있는 '이미지 보기(view image)' 버튼이 있었다. 그런데 언제부턴가 그 버튼이 안 보이기 시작했다. 사라져버린 '이미지 보기(view image)' 버튼 구글 검색팀 공식 트위터에 따르면, 저작권 관련 문제로 해당 기능을 삭제했다는 소식이 있었다. (https://twitter.com/searchliaison/status/964226180776845312 참조) 구글 이미지 검색 결과에서 타 사이트에 있는 이미지를, 그것도 썸네일이 아닌 원본 이미지를 아무런 제한 없이 가져갈 수 있는 부분이 문제였던 모양이다. 예전에는 구글 이미지 검색 → 타 사이트의 원본 이미지 접근 가능 이런 식이었다면, 현재는 구글 이미지 검색..

php와 텔레그램 api를 사용하여 푸시 알림 받기 홈페이지에 문의가 등록되면 핸드폰으로 알림이 오는 기능이 필요했습니다. 알림톡이나 문자 알림 등의 서비스가 있지만, 저는 평소에 텔레그램 메신저를 자주 사용하기 때문에 텔레그램 푸시를 검색하다가 발견한 정보입니다. 유용한 듯하여 정리해서 포스팅합니다. 포스팅 내용은 알림(psuh)에 사용될 텔레그램 봇(bot) 생성 → 생성된 봇의 token 발급 → 알림 메시지 발송에 필요한 message_id 알아내기 순서가 되겠습니다. PC에서 설정을 해야 하므로, 텔레그램 PC 버전을 설치하고 알림을 받을 텔레그램 아이디로 로그인해 둡니다. 완료하셨다면 https://telegram.me/botfather 주소로 접속합니다. Telegram Link 열기를 눌러..

[JavaScript] 디바운스(debounce) 에 대하여 간만에 자바스크립트 관련 쓸만한 기능을 발견해서 포스팅 해봅니다. 디바운스(debounce)를 쉽게 설명해본다면, '과도한 이벤트 중복 실행 방지' 정도가 되겠습니다. (지극히 개인적인 생각입니다. 정확한 정의는 구글 검색을 참조해 주세요 ^^;) 예를 들면 중복 알림 방지 같은 기능 구현시 요긴하게 쓸 수 있을 것 같습니다. 그럼 본격적으로 한번 살펴보겠습니다. 아래는 먼저, 일반적인 상황의 예시입니다. 1234567function test(){ console.log(1);} window.addEventListener('resize', test);Colored by Color Scriptercs 이 소스에 따르면, 해당 페이지는 resize ..

이번 포스팅에서는 무료 반응형 웹 템플릿 사이트들을 소개해 드리겠습니다. 직접 사이트들을 찾아보니 템플릿이 올바로 작동하지 않거나 유행에 뒤처지는 것들을 모아놓은 곳이 많았고, 광고성으로 무료처럼 해놓고는 유료 구매를 해야 제대로 된 템플릿을 제공하는 곳도 있었습니다. 그런 사이트들은 제외하고 나름대로 추려서 무료이면서 괜찮은 사이트들을 골라보았습니다. 제가 고른 베스트 5를 포스팅해봅니다. ※ 무료로 템플릿을 다운로드할 수는 있지만, 기본적으로 무단 수정 + 재배포나 판매 등은 금지하고 있는 것으로 보입니다. 라이센스 부분을 잘 살펴보고 사용하시기를 바랍니다. 저는 간단한 테스트용 개인 사이트 제작, 디자인 참고용으로 무료 템플릿들을 사용하고 있습니다. 1. https://templated.co/ 디자..

- 2020. 11. 11 - 페이스북 글 가져오기를 최신으로 업데이트 하였습니다. 아래 포스팅에서 확인 가능합니다. https://tonhnegod.tistory.com/248 - 2019. 09. 04 추가 - 포스팅 내용을 조금 수정하였습니다. 테스트 결과 포스팅 내용을 따라하면 페이스북 게시물이 제대로 출력되고 있습니다. - 2018. 05. 31 추가 - 현재 페이스북 api 정책 변경으로 해당 포스팅의 페이스북 Graph api 사용법이 제대로 동작되지 않습니다. 개발자 페이지 (https://developers.facebook.com/apps) 에 접속해보니, 덧글 달아주신 'Meshmason' 님 말씀대로 앱 검수 받는 과정이 추가된 것으로 보입니다. 테스트 후 올바로 동작이 되는 방법을 ..

- 2020. 11. 08. 추가 드디어 페이스북 계정 문제를 해결하고, 정상적으로 작동하는 인스타그램 api 테스트를 마쳤습니다. 최신 버전으로 업데이트 된 방법은 아래 링크에서 보실 수 있습니다. https://tonhnegod.tistory.com/245 현재 해당 포스팅의 방법으로는 인스타그램 api를 사용할 수 없게 되었습니다. 사용할 수 있는 방법을 찾게되면 업데이트 하겠습니다. 그때까지는 https://developers.facebook.com/docs/instagram-api 이 링크를 참조하여 시도해보시는 것을 추천드립니다. - 2020. 8. 25. 추가 여러군데 검색해보니, 이제 인스타그램 api도 페이스북을 통해서(페이스북 계정이 있어야) 해야됩니다. 그런데 빌어먹을 페이스북 계정이..

책, 'Three.js로 3D 그래픽 만들기 2/e'무려 3만 원이 넘는 거금을 들여 구입하였다. 보통 사람들이 '웹사이트' 라는 것을 생각하면 아무리 화려하고 멋진 사이트라도, 혹은 아무리 구조가 복잡한 사이트라도그냥 브라우저상의 화면에 출력되는 평면적인 웹사이트 화면만을 생각할 것이다. 하지만 꽤 오래전부터 webGL 이라고 하는, 웹에서 3D를 구현할 수 있는 기술이 있었고이제 웹에서 3D로 구현한 결과물을 무리 없이 구동할 수 있는 환경이 대다수의 사용자에게 갖추어졌다. 굳이 웹사이트에 3D가 필요할까? 물론 그렇게 생각할 수도 있겠다. 하지만 나 개인적으로는, 3D 기술을 접목하여 제작된 사이트들을 구경하고 나니 생각이 많이 달라졌다.이때까지 내가 너무 우물 안 개구리가 아니었나 하고. 내가 구..

이번에 소개해 드릴 사이트는 과거 웹사이트의 모습을 살펴볼 수 있는 곳입니다. 사실 유용한 정보까지는 아닌 것 같고 재미삼아 한 번씩 방문해볼 만한 사이트인 것 같네요. 사이트의 이름은 Wayback Machine 입니다. 우선 사이트에 접속해봅니다. 중앙에 있는 주소창에 과거 모습을 보고 싶은 웹사이트의 주소를 입력하면 아래와 같이 연도별로 히스토리가 나옵니다. 여기서 검은색 바가 무엇을 뜻하는지 확실치는 않지만 제 생각으로는 트래픽 발생량 또는 방문자 수가 아닐까 짐작이 되네요. 저는 예시로 티스토리를 한번 입력해보았습니다. 티스토리의 최초 저장된 과거의 모습은 2006년부터 입니다. 하늘색 원으로 표시된 날짜에 과거 사이트의 모습이 조회 가능합니다. 그럼 2006년 12월 30일의 티스토리의 모습을..

이번에 알려 드릴 추천 정보는 구글 크롬 속도 + 움짤 로딩 속도 향상법입니다. 개인적으로 웬만한 것들은 그닥 체감이 없었는데 이 방법들은 체감이 확실하여 포스팅을 하게 되었습니다.그럼 적용 방법을 살펴보겠습니다.간단한 움짤 속도 향상법부터 알려드리겠습니다. 1. 움짤 속도 향상법크롬 브라우저 주소창에 chrome://flags/ 를 입력합니다.GPU rasterization 을 검색창에 입력합니다. GPU rasterization 항목을 Enabled 로 변경한 뒤, 브라우저를 재시작 해줍니다.브라우저 재시작 후에 웹서핑을 해보시면 움짤 로딩 속도가 개선된 것을 확인할 수 있습니다. 2. 크롬 속도 향상법크롬 브라우저 주소창에 chrome://gpu 를 입력합니다. 먼저 Graphics Feature ..

(지난 글 보기 : 혼자 만들어본 그누보드 게시판 반응형 스킨) 이번에 올리는 스킨은 이전에 포트폴리오 카테고리에 올렸던 게시판 스킨의 갤러리 버전입니다. 리스트 페이지의 게시글 관련 디자인만 바뀌었고, 나머지 부분은 동일합니다. 제목 - 그누보드 갤러리 게시판 반응형 스킨 간략 소개 - 개발자의 디자인 실력 한계를 보여주는 갤러리 게시판 스킨입니다. 항상 심플함을 추구... 주요 정보 (일반 게시판 반응형 스킨과 거의 동일하여 간략하게 적습니다)- 무료로 배포된 반응형 갤러리 스킨들을 여럿 참고하여 작업함. - 일부 디자인과 기능을 위해 부트스트랩, Font Awesome 사용- 반응형 각 화면 크기별로 게시물이 딱 맞아떨어지게끔 출력하려면 12의 배수로 출력 해야 함. - 크롬, 파이어폭스, 오페라,..