평범한 게 제일 어렵다

웹페이지(html)에, 혹은 내 웹사이트에 PPT 파일 뷰어 기능을 넣고 싶다면 어떻게 해야 할까요? 이번 포스팅에서는 웹페이지에서 PPT 파일을 출력하는 방법을 알아보겠습니다. 웹 개발 관련 커뮤니티를 돌아다니다 발견한 정보인데, 유용한 것 같아서 정리해봤습니다. 해당 방법은 마이크로소프트사의 웹 오피스(파워포인트) 기능 + HTML 아이프레임 태그를 기반으로 동작합니다. (마이크로소프트 온라인 오피스 사이트에서는 반드시 로그인을 해야 오피스 기능이 사용 가능하나, 해당 포스팅 내용의 웹 PPT 파일 출력은 별도의 과정이 필요 없습니다) 정말 쉽습니다. 핵심 소스는 딱 1줄입니다. 1 cs https://view.officeapps.live.com/op/embed.aspx?src=PPT파일경로에서 PP..

오늘은 웹페이지에 PDF 파일을 보여줄 수 있는 방법을 알려드리겠습니다. 웹페이지에서 특정 버튼 클릭 시 PDF 파일을 새창으로 출력하고 싶은 경우, 게시판에서 게시글과 함께 PDF 첨부 파일을 출력하고 싶은 경우, 그밖에 웹페이지(웹사이트)에서 필요한 상황에 응용하여 사용할 수 있습니다. 소개해드릴 방법은 총 3가지입니다. PDFObject.js / PDF.js / iframe 태그 먼저 3가지 PDF 뷰어 기능을 적용했을 때, 총 5가지의 웹 브라우저에서 어떻게 출력되는지 비교해보도록 하겠습니다. 1. 크롬 크롬에서는 어떤 것을 사용해도 문제없이 PDF 파일이 출력됩니다. 굳이 js를 사용할 필요 없이 iframe 태그를 사용해도 될 것 같습니다. 2. 파이어폭스 파이어폭스 또한 PDF 파일이 문제없..

이번 포스팅에서는 Adobe XD에서 이미지 선택 영역 자르는 방법을 알려드리려고 합니다. 디자인 툴을 어느 정도 다룰 줄 아시는 분이라면 보실 필요가 없을 것 같습니다. 저같이 디자인 툴에 서투르거나, 가끔씩 사용하는 분들에게 조금이나마 도움이 될까 하여 올리는 글입니다. 저는 웹 개발자 및 퍼블리셔로 일하고 있는데요. 이미지 편집 (이미지 자르기 정도) 할 때가 잦은 편인데, 주로 그림판이나 포토샵을 이용합니다. 간단한 단축키 Ctrl + C / Ctrl + V, Ctrl + Shift + C / Ctrl + V 정도로도 어떤 이미지든 잘라 쓰는데는 문제가 없었습니다. 그런데 얼마 전에 난관에 부딪혔습니다. 디자인을 XD 파일로 전달 받아서, 부랴부랴 Adobe XD를 설치했는데... 포토샵에서 하던..

얼마 전 PC가 고장 나서 포맷을 하다가, 실수로 오랫동안 쌓아온 자료들을 모두 날려버렸습니다. 이제 중요한 자료들은 꼭 블로그에 기록 해두리라 다짐했습니다... 오늘 포스팅에는 제 크롬 즐겨찾기 목록에 살아남은 웹 디자인 참고 사이트를 정리해보았습니다. 1. 디비컷 (https://www.dbcut.com/) 최근 오픈, 리뉴얼된 사이트들이 지속적으로 업데이트됩니다 외국 사이트, 모바일 웹, 반응형 웹, 워드프레스 등 다양한 사이트를 참고할 수 있습니다. 국내에선 가장 방대한 양의 자료가 있는 곳이라 생각됩니다. 2. Korea Web Design (http://koreawebdesign.com/) 활성화가 잘 되는 곳은 아니지만, 앞서 소개드렸던 디비컷에는 없는 사이트가 이곳에는 등록되어있는 경우가 ..

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

이번 포스팅에서는 무료 반응형 웹 템플릿 사이트들을 소개해 드리겠습니다. 직접 사이트들을 찾아보니 템플릿이 올바로 작동하지 않거나 유행에 뒤처지는 것들을 모아놓은 곳이 많았고, 광고성으로 무료처럼 해놓고는 유료 구매를 해야 제대로 된 템플릿을 제공하는 곳도 있었습니다. 그런 사이트들은 제외하고 나름대로 추려서 무료이면서 괜찮은 사이트들을 골라보았습니다. 제가 고른 베스트 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일의 티스토리의 모습을..