DesignMyself


'tip'에 해당되는 글 2건

  1. 2007.11.26 design tip. 플릭커 이미지 사용하기. 1
  2. 2007.11.05 css tip. FireBug 사용하기. 19

플릭커(www.flickr.com)는 온라인 사진 공유 커뮤니티로, 전 세계인들이 올리는 엄청난 양의 사진 데이타를 가지고 있는 사이트입니다. 방대한 양을 자랑하는 사이트 답게 둘러보다 보면 "지난 1분 동안 2,470장의 사진이 업로드 되었습니다." 같은 문구도 볼수도 있습니다. 정말 어마어마하지요.

자, 우리가 플릭커를 중요하게 봐야할건 저런 엄청난 데이타 양과 함께 이미지를 검색할때 CCL 옵션을 지원한다는 것입니다. 고급 검색 옵션에 CCL 라이센스 관련 조항이 있어 개인 블로그에 쓸 용도뿐만이 아닌 상업적인 이용에 무리가 없고 2차 저작물을 배포까지할수 있는 이미지를 검색할수 있습니다.

그럼 한번 블로그 스킨에 많이 쓰일법한 구름 사진을 한번 찾아보도록 하지요.
www.flickr.com에 접속한뒤 "cloud"로 검색을 합니다.
한국어 사이트가 서비스되고 있긴 하지만 영어권에서 강세인 사이트이기 때문에 검색어는 영어로 하는 편의 결과물이 훨씬 좋습니다.

사용자 삽입 이미지

결과물이 뿌려지는 화면에서 고급 검색 링크가 나타납니다. 클릭해서 고급 검색 옵션으로 넘어갑니다.
평소 검색엔진에서 보이는 모습과 대동소이한 고급검색 옵션들이 펼쳐집니다. 맨밑에 보면 CCL관련 옵션들이 보여집니다.

사용자 삽입 이미지

개인 용도로 사용하실 분들은 "Creative Commons 사용권이 있는 사진 내에서만 검색합니다." 옵션만 체크하고 검색하셔도 됩니다만, 저같은 경우는 배포용 스킨에도 쓰고 있기 떄문에, 또한 회사원 신분으로 쓰는 이미지이기도 해서 상업성을 띄고 있다고 할수도 있기 때문에 모든 옵션을 키고 검색합니다.



사용자 삽입 이미지

짜잔!


이렇게 CCL이 적용된 구름 사진을 293,608장 (대단하죠@_@) 검색할수 있습니다.
이제 적당한 이미지를 찾아낸후 스킨에 맞게 수정하고 사용하면됩니다.


사용자 삽입 이미지

중요합니다.


여기서 중요!
이렇게 검색한 이미지를 사용한 결과물에는 원저작자를 표기해야합니다.
저같은 경우 스킨에 Background Images from pbyrne 같은 형식으로 표기하고 있습니다.

또한 CCL이 걸린 재료로 저작물을 만들었다면 배포시에 저작자표시-동일조건변경허락하에만 배포하실수 있습니다.  (위와 같은 방법으로 검색한 이미지의 거의 대부분이 저작자표시-동일조건변경허락 조항을 따르지만 이미지에 따라 다른 라이센스 조약이 걸려있는 경우도 있을수 있으니 사용전에 확인이 필요합니다!)



사실, 외국계 서비스이기도 하고 대부분의 사용자가 개인이기 때문에 저런 조항들을 지키지 않더라도 큰문제가 없을수 있습니다. 대리인을 고용해서 고소한다던가 하는 일은 아마 없을지도 모릅니다.
하지만 CCL이란게 저작물을 좀 더 쉽게 이용할수 있고 바람직하게 공유해보자란 취지로 생긴 약속입니다.
이게 있기때문에 우리가 좋은 이미지를 손쉽게 검색해서 사용할수 있는것이니 꼭 지키도록 합시다.
저작권을 표기하는 것, 배포시에 CCL을 따르는것, 그렇게 어려운 일이 아니잖아요 :)

xhtml 코딩 작업물의 구조를 알아보기 쉽게 도와주는 파이어폭스의 확장기능인 파이어버그에 대해서 알아보겠습니다.

파이어버그를 쓰면 블로그 본문의 글자를 바꾸고 싶은데 어디를 바꿔야하는지, 제목의 색은 어디서 바꿔야할지, 본문의 넓이는 어디를 수정해야하는지 쉽게 알수있습니다. 일일이 구조를 확인하고 css파일을 뒤질 필요가 없이 간단하게 수정할 위치를 파악할수 있습니다.

일단은 파이어폭스의 최신 버전과 파이어버그를 다운로드 받아 설치하도록 합시다.

사용자 삽입 이미지
설치한 파이어폭스를 실행하고 구조를 파악하고 싶은 블로그로 이동한뒤
오른쪽 아래에 보이는 초록색 버튼을 더블크릭하면 파이어버그를 활성화 시킬수 있습니다.
메뉴가 꽤 많이 보이는데 우리에게 필요한건 간단한것 몇개 뿐이니 벌써부터 복잡해할 필요없어요.

파이어버그에 보이는 메뉴중 Inspect를 선택하면 마우스를 화면에 옮길때마다 푸른색 박스가 따라다니게 됩니다. 원하는 부분을 선택하면 해당 부분이 어떤 HTML로 구성되어있고 어떤 style로 디자인되어있는지 아래에 나타나게 됩니다.

사용자 삽입 이미지

요렇게~


우리가 필요로 하는건 Style탭에 나오는 정보들입니다.
'파피용.'이란 제목 부분에 어떤 CSS 속성들이 적용되었는지 어떤 css 파일의 몇번째 줄에 표기되어있는지 정보가 다 나오고 있습니다. 원하는 부분을 좀더 쉽고 빠르게 찾아내어 수정할수 있다는 얘기지요 :)

예시에선 마우스가 오버된 상황이라 a:hover 속성이 적용되어있으며, a:link, a:visited 속성이 덮여버린것을 확인하실수 있습니다.
제목 부분의 색상과 크기를 수정하고 싶으시다면 style.css 파일을 열어 17번째, 19번째 줄을 수정하면 되는겁니다.


비슷한 기능을 지원하는 IE Dev Toolbar도 있습니다만 firebug 쪽이 좀더 구체적으로 css속성과 속성이 어디에 위치하는지 보여주기 때문에 이쪽을 더 추천합니다.
아주 유용하고 완성도 높은 툴인데 무료!입니다. 멋진 세상이에요. :)
1 
블로그 이미지 qwer999

공지사항

최근에 올라온 글

최근에 진행된 튜토리얼