회사일을 위해서 회사일에 도움되는 좋은 컨텐츠를 발견할 때마다 개인적으로 스크랩을 하는데, 스크랩이 쌓이는 것을 그냥 놔둘 수는 없으므로(하도 많으니 정기적으로 정리하는 것이 필요합니다.) 이 블로그에 관련 내용을 기재한 다음, 자주 쓰이지 않는 정보들은 스크랩 목록에서 지우는 것이 필요해 보입니다.


그래서 지금까지 어떤 정보들을 스크랩했는지 여러분께 보여드리겠습니다. 저와 비슷한 업종에서 일하신다면 도움이 많이 될 것입니다.




1. GDWEB 2015 / DBCUT


http://www.gdweb.co.kr/


http://www.dbcut.com/bbs/index.php

http://www.dbcut.com


잘나가는 웹에이전시들이 작업한 홈페이지들의 목록을 한곳에 모아서 보여주는 사이트들입니다. 특히 쟁쟁한 대기업 등 잘나가는 기업들의 홈페이지들이 많은 것이 특징입니다. 하지만... 우리 회사에서 이런 홈페이지 제의를 받으려면 우리회사가 지금보다 훨씬 더 잘나가서 프론트엔드, 백엔드 프로그래머들을 더 뽑아야 하겠죠? 프론트엔드 분야에 종사하는 사람은 회사에서 사실상 저 한명밖에 없고, 백엔드 프로그래머는 전혀 없는 우리 회사의 특성상... 아직까지 이런 사이트들을 따라하는 것은 시기상조라는 생각입니다.




2. Theme Forest


http://themeforest.net/?ref=myrthosster&ref=myrthosster&clickthrough_id=367627375&redirect_back=true

http://themeforest.net


홈페이지 디자인 소스들을 가져다 쓸 수 있는 Themeforest입니다. 여러모로 참 유용하고 우리회사도 회사차원에서 꽤 많이 쓰는 곳이기도 합니다. 특히 워드프레스 유료 플러그인 등 기술적인 난제를 해결하는 기능적인 부분들도 좀 있어서 백엔드 프로그래머가 없는 우리 회사 입장에서 도움이 많이 됩니다.




3. SASS 관련 링크


http://webdesign.tutsplus.com/articles/quick-tip-working-with-sass-and-bootstrap--webdesign-9153


http://pivotallabs.com/sass-with-bootstrap/


한때 부트스트랩이 포함된 테마 중에 SASS로 이루어진 파일이 있어서 공부를 했는데, 지금은 거의 쓰이지 않으므로 일단 이 페이지들과 관련된 스크랩은 없애고 나중에 봐야겠습니다. 또한 이 페이지들은 영어이기도 해서 그냥 읽어보기 좀 어렵기도 하구요...




4. 부트스트랩 - 커스터마이즈


http://getbootstrap.com/customize/


부트스트랩 공식 홈페이지에 있는 기능이므로 굳이 스크랩을 하지 않아도 쉽게 찾을 수 있습니다만, 회사에서 부트스트랩을 사용하게 되면 종종 사용될 기능으로 보여서 이 것도 지금은 스크랩을 없애고 나중에 정말 필요할 때 다시 사용해야 할 것으로 보입니다.




5. 부트스트랩 - 무료 테마 다운로드 사이트


http://startbootstrap.com/template-categories/all/

http://startbootstrap.com/


http://www.bootstrapzero.com/bootstrap-template/portal

http://www.bootstrapzero.com/


http://bootswatch.com/


부트스트랩으로 구축한 여러 템플릿들을 다운로드 받을 수 있으며(1, 2번째 링크), 부트스트랩 기본 테마 자체의 색상을 변형한 부트스트랩 템플릿(3번째 링크)을 받을 수도 있는 사이트들입니다.


검색으로 찾기가 비교적 어려운 사이트들이므로, 이 목록들은 정말 잘 가지고 있다가 나중에 부트스트랩과 관련하여 꼭 필요할 때 써야겠습니다.




6. 워드프레스용 무료 부트스트랩 테마 모음


http://hwangc.com/wordpress-twitter-bootstrap-themes-10/


사실 워드프레스에서 쓸 수 있는 테마는 무료 테마들도 반응형이 지원되는 경우가 많아서 꼭 부트스트랩 테마를 쓸 필요는 없습니다만, 웹 퍼블리싱의 편의성을 생각하면 이런 테마들을 사용하는 것이 종종 도움이 되기도 합니다. 다만 디자인적으로 예쁘지 않다는 것이 함정이긴 하네요.




7. 부트스트랩으로 디자인하라 책 예제 소스


http://www.roadbook.co.kr/134


우리나라에서 몇 안되는 부트스트랩 관련 서적에 포함된 예제 소스입니다. 꽤 중요하고 업무적으로도 이 소스코드들을 가끔씩 사용하므로 도움이 많이 됩니다만, 한번 다운로드 받으면 계속 쓸 수 있는 소스코드들이기 때문에 최근에 이 사이트들에 들러본 경험은 거의 없습니다. 하지만 컴퓨터 바이러스 등으로 해당 예제소스 파일들이 없어질 가능성도 있으므로 원본 사이트의 목록은 가지고 있을 필요가 있겠습니다.




8. 워드프레스 - 공짜 워드프레스 테마 모음


http://thedesignblitz.com/25-best-free-wordpress-portfolio-themes/


여기 수록된 테마들은 눈으로 보기에도 상당히 좋은 테마이긴 하지만, 워드프레스 공짜 테마는 워드프레스를 직접 설치하고 검색하면서 직접 설치해보면 전부 알 수 있는 부분들인지라... 그냥 직접 설치하는 것이 더 낫다고 생각합니다.




9. 워드프레스 - Kboard


http://www.cosmosfarm.com/products/kboard


워드프레스로 게시판을 사용할 수 있게 해주는 플러그인입니다. 다만 직접 해봤는데 설치가 잘 안되더군요. ㅠㅠ

워드프레스로 게시판 사용하는 것은 아직 안되는건지... 우리나라 웹사이트에 게시판은 거의 필수적이지 않습니까...(클라이언트가 그걸 원하니까...;;; 게시판 제대로 관리하지도 않을거면서... 쩝...)




10. 워드프레스 카테고리,태그,검색 리스트 목록 페이지 구현하는 방법


https://www.youtube.com/watch?v=8q0haUVsW4g


나중에 필요할 수도 있겠지만 이미 제대로 작동하는 스킨 가져다 써서 차일드테마로 만드는 것이 우리회사의 일반적인 워드프레스 개발방법인지라... 웬만하면 필요 없을 듯한 방법입니다.




11. 워드프레스 - 커스텀 메뉴 만들기


http://dinoegg.co.kr/custom-menus/


워드프레스는 코드로만 메뉴 얹을 부분을 구현하는 게 아니라 따로 워드프레스 시스템에서 설정하는게 좀 필요합니다. (물론 티스토리 등 다른 블로그 서비스들, 기타 CMS도 마찬가지입니다.) 그래서 여기에 나온 방법들은 좀 쓰일일이 있을 듯 합니다. 일단 정독해보고 나중에 활용해봐야 할 부분인 듯 합니다.




12. 워드프레스 - 차일드 테마 적용하기


http://vinylmansion.com/library/%EC%9B%8C%EB%93%9C%ED%94%84%EB%A0%88%EC%8A%A4-child-theme/


여기있는 내용이야 뭐 굳이 이 내용이 아니더라도 회사에서 자주 쓰는 것이다 보니 이제는 차일드테마 적용하는 방법을 거의 확실히 익혔습니다. 회사에서 많이 쓰는 부분이긴 하지만 이젠 여기 있는 내용을 많이 참고하진 않을 듯 합니다.




13. 워드프레스 - 파일 업로드 제한 사이즈 늘리는 방법


http://www.wpbeginner.com/wp-tutorials/how-to-increase-the-maximum-file-upload-size-in-wordpress/


이 부분에 대해서는 제가 이 블로그에 포스팅을 한번 하기도 했습니다.


http://blog.koyeseul.net/517


하지만 위의 북마크 시킨 정보는 제가 공개한 것과는 조금 다른 방법입니다. 여튼 현재 상황에서 제 포스팅에 가장 보완이 필요한 부분은 htaccess 파일을 이용한 방법인데, 실제 서버에 올려서 워드프레스 홈페이지를 서비스하는 과정에서 활용하게 되었으므로, 이 부분을 이 블로그에 별도의 포스팅으로 올리도록 하겠습니다.




14. 워드프레스 - 상단에 자동적으로 출력되는 페이지 목록 숨기는 방법


http://www.blogtyrant.com/how-to-hide-pages-from-your-wordpress-navigation-menu-video/


결론적으로 말하면 exclude pages 라는 플러그인을 사용하는 방법입니다. 실제로 회사 업무 하면서 도움을 좀 받았습니다만, 간단한 방법이고 이제는 이 방법을 숙지 했으므로 더이상 볼 일은 거의 없을 듯 합니다.




15. 워드프레스 - 필수적으로 사용하는 워드프레스 플러그인 리스트


http://juotte.net/?p=7227


개인홈페이지에서 워드프레스를 사용한다면 이 리스트가 거의 맞을 것입니다만, 업무적으로 워드프레스를 사용해야 한다면 이 리스트는 효용성이 크게 없습니다. 업무적으로 쓴다면 클라이언트의 요구에 맞춰줘야 하므로 이 리스트에 없는 플러그인이 필요하기도 하고, 이 리스트에 있는 플러그인이 필요없기도 하거든요.




16. 워드프레스 - Conditional Tags 쓰는 방법


http://docs.woothemes.com/document/conditional-tags/


http://www.remicorson.com/list-woocommerce-products-by-tags/


지금은 해결된 사안이지만, 워드프레스의 태그를 토글하여 검색할 수 있도록 보여주는 기능을 찾아야 했는데, 무료 플러그인으로는 도저히 찾아지질 않아서 제가 직접 구현해야 하나? 라는 정말 무리수인 생각을 가진 적이 있습니다. 결국은 유료 플러그인을 구해서 해결했지요. 직접 구현하지 않아도 되어 다행입니다.




17. 워드프레스 - 커스텀 로그인, 회원가입 추가


http://blog.usefulparadigm.com/archives/113


이것도 결국은 플러그인을 사용하는 방법입니다. 워드프레스 무료 플러그인 찾는 검색창 내에서 custom login 이라고 하면 잘 안찾아지고, 구글에서 따로 검색해야 합니다. TML 이라는 플러그인인데, 이 플러그인의 특징은 이 플러그인만 단독으로 사용해서는 절대 원하는 예쁜 모양이 안나온다는 겁니다. 결국 테마에서 커스터마이징이 필요한 부분이지요. 결국 상당한 노가다가 필요하다는 뜻이 되겠습니다. ㅡㅡ;




18. 페이스북 - 페이스북 API로 특정 페이지의 뉴스피드를 가져오는 방법


http://blog.naver.com/PostView.nhn?blogId=pergy486&logNo=220262988864


회사 차원에서 SNS를 종종 사용하므로, SNS의 글을 홈페이지에 가져오는게 필요할 것 같아서 북마크를 해 두었습니다만, 솔직히 그냥 딱 봐도 꽤 어려워서 제 실력으로 가능할까 싶긴 합니다.




19. html/css - <select> 내부 <option> 태그에 link 기능 넣기


http://stackoverflow.com/questions/2000656/using-href-links-inside-option-tag


회사에서 작업하면서 이 기능을 요구해서 넣었습니다만, 솔직히 쇼핑몰이라서 넣은 기능이고 웹 접근성에 위배되는 방법입니다. 장애인 웹 접근성을 지켜야 하는 대부분의 웹에이전시에서는 이 방법을 사용하지 않을 것을 권장드립니다. 무엇보다 <select> 태그에 이 기능을 요구하는 것 자체가 '난 장애인 웹 접근성 따위 상관 안할거야' 라는 무뇌충 인증입니다.




20. html/css - CSS를 이용한 로딩 애니메이션


http://story.pxd.co.kr/922


정확히 말하면 'html5와 css3를 이용한 로딩 애니메이션' 입니다. css3가 아니면 여기 나온 기능들은 구현이 불가능하죠. animation- 속성을 쓰는 것 자체가 css3가 아니면 불가능하지 않습니까... 여튼 이런 건 소스코드로 검색해서 잘 찾아지지 않으므로 검색으로는 찾기가 좀 어려우니, 이 블로그에 적어놓은 링크로써 기억해둬야 할만한 정보입니다.




21. html/css - online less compiler


http://winless.org/online-less-compiler


회사에서 구매한 유료 템플릿에 less라는 녀석이 들어 있었는데, 모바일에서 제대로 작동을 하지 않는 문제가 있어서 이 온라인 less 컴파일러를 통해 css로 변환한 다음에 쓰기 위해 사용했습니다. 사실 회사 차원에서는 일반적인 개발에 less를 좀처럼 사용하지 않으므로 웬만하면 안쓰일 것 같기는 합니다.




22. html/css - 구버전 IE를 위한 여러 플러그인


http://naiyumie.tistory.com/1199


여기 있는 모든 정보가 회사 일하면서 쓰일만한 건 아니고, 1, 2, 5번 항목이 좀 쓰일만 합니다. 특히 1번은 잘못쓰면 클라이언트들에게 욕쳐먹으니 잘 써야 합니다. ㅡㅡ;;;




23. html/css - div로 table 만들기


http://studio5ing.tistory.com/78


가끔 float을 남발하면 반응형에서 제어가 힘들어지는 문제 뿐 아니라, Cafe24 쇼핑몰 솔루션 등에서 태그를 만들 때 익스플로러 구버전에서 대응하기 위한 갤러리 리스트를 만드는게 어려워지기도 합니다. 좀 그지같은 상황입니다만 카페24의 쇼핑몰 모듈이라는게 float을 마구마구 쓴다고 제대로 작동하는게 아닌지라... ㅡㅡ;




24. jQuery plugin - fancybox


http://fancyapps.com/fancybox/


fancybox 공식 홈페이지입니다. 물론 구글에서 검색하면 쉽게 찾아집니다만 그래도 자주 쓰니까 북마크로...




25. 10 jQuery Mobile Slider Plugins


http://www.jquerybyexample.net/2014/03/10-jquery-mobile-responsive-slider-plugins.html


이것도 사실 쉽게 찾아지는 정보입니다만 실무에서 많이 쓰이므로 북마크로...


사실 오늘도 여기 있는 정보는 써야 하는데... 서둘러야겠습니다.




26. 10 jQuery Mobile Menu Plugins


http://www.jquerybyexample.net/2014/02/mobile-menu-jquery-plugins-and-tutorial-list.html


위의 25번 항목(Mobile Slider Plugin)보다는 좀 덜쓰이지만 이것도 자주 쓰는 편입니다.




27. Fullpage.js / One Page Scroll


http://www.alvarotrigo.com/fullPage/


http://www.thepetedesign.com/demos/onepage_scroll_demo.html


http://blog.koyeseul.net/548 에서 따로 설명한 부분이니 참고 바랍니다.






사실 북마크 목록은 더 많은데, 워낙 좀 많아서 2~3개로 나눠서 포스팅해야 할 것 같습니다.



댓글을 달아 주세요

티스토리 툴바