사용 가능한 프리 이미지 사이트 


안녕하세요. 고코더 입니다.

오늘은 무료 이미지 사이트 중에 가장
대표적인 3곳을 소개 해드립니다.

홈페이지를 만들다 보니 
이렇게 무료로 이미지를 제공하는
사이트가 얼마나 고마운지요.

생각보다 이런 사이트가 많지만
퀄리티가 떨어지거나 갯수가 떨어지는 곳이 있죠.

그러나 아래는 이 두가지를 모두 충족 합니다.

1.픽사베이
가장 유명한 곳입니다. 많은 사이트가 보면
여기에 이미지를 많이 사용 합니다.

▼ 160만개가 넘는 무료 이미지가 존재 하고
장르별로 무한 합니다. 
그리고 이곳에서 이미지를 사용하면 일맥상통한 느낌을 주게 됩니다.




2.프리 큐레이션
픽사베이보다 조금 더 감각적이고 이쁜 이미지가 많습니다.

▼ 개인적인 느낌은 사이트에 활용하기엔 픽사베이가 좋고
여기 이미지들은 책 삽화 PPT 등에 사용하기 좋은 느낌의 사진이 많습니다.
그리고 올린이를 팔로우 하여 이미지를 확인 할 수도 있습니다.






3.프리픽 
위에 두 곳은 인물 풍경 실사 사진이 많았다면
여기는 편집 디자인들이 많습니다.

▼ 다양한 그래픽 소스를 제공 하기 때문에 이벤트 페이지를 만들거나
오프라인 팜플렛을 만들때등 편집을 위한 이미지 소스가 많습니다.
포토샵이나 일러스트로 작업하는 분들은 좋아 할만한 사이트 입니다.


4.올라우투
한국 사이트고 유명하진 않지만 자연 풍경 특히 국내 
풍경 무료 사진이 많은 사이트 입니다.

▼ 한국 풍경 사진이 가장 많고 외국 풍경 사진도 많은데
자연스러운 국내 자연 사진을 찾는다면 여기가 제격 입니다.
이미지 수는 위 대형 사이트보다 적지만
사이트 규모치고는 괜찮습니다.



이렇게 4군데 정도를 알아봤습니다.
혹시 이미지가 필요하면 이렇게 4개 정도 사이트를 기준으로
찾아보신다면 실망하지 않을거 같네요!



마무리


홈피 메인 슬라이드가 다른 사이트에도 똑같이 있을 수 있으니 
너무 인기 좋은 이미지보단 개성있는 이미지를 찾아보세요 


댓글을 달아 주세요


에버노트 노트 속에 이미지 그림판으로 해상도 용량 줄이기 


안녕하세요. 고코더 입니다.


에버노트를 오래 쓰다보면 용량이
기가 바이트 이상으로 늘어 납니다.

저 같은 경우는 이미지 파일이 대다수가 존재합니다.
사실 필요한 해상도이면 충분하지만

기록하다 보면 몇십메가 짜리 이미지 파일을 모르고
첨부하게 되죠

그래서 오늘은 이미 기록된 노트 안에 이미지 파일 용량을
간단하게 줄이는 방법을 알아보 겠습니다.

▼줄이고 싶은 노트의 이미지의 마우스 오른쪽 버튼을 눌러
열기 프로그램에서 그림판을 클릭 합니다.



▼ 그리고 그림판에서 크기조정 기능을 선택


▼ 원하는 만큼 해상도를 줄여보세요
저는 50프로~


▼그리고 저장을 누르면 이미지는 해당 해상도도 줄고 노트 용량도 줄어듭니다.
동기화만 다시 해주면 끝




마무리


미리 미리 용량 관리를 해놓으세요
나중에 저처럼 몇십기가 됩니다. 





댓글을 달아 주세요


여러개 이미지 합쳐주는 사이트 


안녕하세요. 고코더 입니다.

블로그를 하다보면 분할된 이미지를 하나로 만드는 경우가 있습니다.
저는 보통 그림판(구석기)으로 작업합니다.
빠르게 작업하기 좋은 툴입니다.

▼ 그런데 이 사이트에서는
그 합치기를 간단하게 제공 해주고 있습니다. 
https://e.jjalbox.com/?act=image_append

▼ 각 파일 선택으로 
이미지를 여러개 업로드 합니다. 


▼ 저는 7글자를 업로드 했습니다.
G.O.C.O.D.E.R 


▼ 그리고 해당 이미지 옵션을 조정 후에
이미지 합치기를 했습니다. 



▼ 결과물은 정말 간단하게 나오네요



전문적인 작업 말고
정말 아주 간단하게 이미지만
위 아래로 붙일 생각이라면
사용 하기 좋아 보입니다.


마무리

만들어 볼만 한 기능 사이트네요


댓글을 달아 주세요


개발 소스 비교 사이트 


안녕하세요. 고코더 입니다.


틀린 글자 찾기, 틀린 그림 찾기
문서가 잘못됐거나 소스코드가 틀렸을 경우에
원본과 현재 수정중인 데이터를 비교해봐야할 경우가 있습니다.

이럴땐 우린 매직아이를 시도하게 됩니다.

하지만 IT 익스프레스 구독자들은
그럴 필요가 없습니다

▼ 바로 이사이트가 있기 때문입니다.



▼ 접속하면 Text 비교 영역이 있습니다
여기에 한번 데이터를 넣어보았습니다.



▼ 네 이전에 XML 개발 강의때 사용한 소스코드인데
몇가지 수정을 한후에 비교해보니
정확히 틀린곳을 하이라이트로 보여주네요



▼ 이미지도 가능합니다.
대신 이미지는 왼쪽 오른쪽 이동 가능한슬라이드를 
이용해서 두이미지를 눈으로 비교 가능하도록 해놓았습니다.


▼ PDF도 가능한데요
PDF를 업로드하면 text만 추출해 비교를 해줍니다.



이제 텍스트의 변경을 빠르게 파악하고 싶으면
이 사이트를 이용하면 될거 같네요


마무리


뭔가 불안하다 싶으면 !
바로 비교해보세요.




댓글을 달아 주세요


youtube 이미지 다운로드


안녕하세요. 고코더 입니다.

▼유투브에 접속해보면
각 영상마다 대표 썸네일이 존재합니다.


이 이미지가 필요해서 캡쳐해서 편집해서 사용한적이 있었는데

▼유투브에서는 썸네일 API를 제공하고 있었습니다.
아래 URL을 확인해보시면 

▼ 이렇게 우리형 썸네일이 보이고 자유롭게 다운로드 가능 합니다. 



▼ 사용법은 이렇습니다. 해당 URL 가운데 동영상 고유 코드를 넣으면 됩니다.
그리고 뒤어 jpg 앞에 0부터 숫자를 넣으면 됩니다. 
https://img.youtube.com/vi/[동영상코드]/[0~].jpg

▼ 동영상 코드는 영상 상세 들어가면 나오게 되는 제일 뒤 파라미터 입니다.




마무리


일반 사용자에게도 편리하게 썸네일을 제공하네요 





댓글을 달아 주세요



이미지가 화면에 올때 로딩 되게 하기


안녕하세요. 고코더 입니다.




오늘은 동적으로 이미지를 호출하여
페이지 로딩은 빠르게 하고 고객이 원하는 곳에 갔을 때만
해당 이미지를 볼 수 있도록 만들어 보려고 합니다. 
모바일을 많이 사용하는 환경에서 이젠 동적 호출은 기본이 되어가고 있습니다.

오늘 써볼 플러그인은 lazyload() 입니다.

▼홈페이지는 아래와 같습니다.

공식적인 API 의 내용은 읽어보셔서 참고 하시길 바랍니다.

저는 좀 더 익스프레스 하게 알려드리기 위해 샘플을 코딩 해보았습니다.

▼ 아래 내용을 참고해주세요
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<html>
<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    <script type="text/javascript" src="jquery.lazyload.js"></script// 플로그인 참조
    <script type="text/javascript">
        $(function(){
            $('img.gocoder').lazyload({        // 이미지를 동적으로 호출 하도록
                placeholder : 'loading.gif',    // 로딩 이미지
                threshold: 0,                 // 접근 ~px 이전에 로딩을 시도한다.
                load : function(){              // 로딩시에 이벤트
                    $(this).attr('alt',$(this).attr("data-original"));
                }
            });
        });
    </script>
</head>
<body>
    <Table>
        <tr>
            <td><img data-original="img (1).jpg"  class="gocoder" width="300"></td>
            <td><img data-original="img (2).jpg"  class="gocoder" width="300"></td>
        </tr>
        <tr>
            <td><img data-original="img (3).jpg"  class="gocoder" width="300"></td>
            <td><img data-original="img (4).jpg"  class="gocoder" width="300"></td>
        </tr>
    </Table>
</body>
</html>
cs

예제만 보시면 대부분 이해가 될거라 생각이 듭니다.
그래도 조금 더 자세히 설명을 드리면

1. lazyload() -> 7번째 줄
$('img.gocoder').lazyload()
- 해당 기능을 호출합니다. 이렇게만 쓰셔도 옵션 없이 정상 작동합니다.

2. placeholder -> 8번째 줄
placeholder : 'loading.gif'
- 호출 전 이미지를 지정합니다. 보통 로딩 gif가 올거 같네요. img 태그의 src의 주소를 매칭하여 사용할 수 있습니다.

3. threshold -> 9번째 줄
threshold: 0,
- 호출 할 시점을 입력합니다. 숫자가 높을 수록 먼저 로딩을 하고 있습니다. 

4. load -> 10~12번째 줄
load : function()
- 호출 시점에 이벤트를 실행 할 수 있습니다. 파일명을 이미지 속성 alt에 입력 되게 해보았습니다.

▼ 이처럼 필요시기에 이미지를 불러 옵니다.
(로딩에 맞춰 캡쳐하기 힘드네요)



이 밖에 이펙터 같은 옵션이 더 있으나 실무에서 거의 사용하지 않는 부분이라
필요한 부분만 코딩 하였습니다. 그리고 아직 플러그인이 완성됐다는 느낌은 안들어서
기본 기능만 사용하시는걸 추천드립니다.



마무리

좋은 플러그인이 많네요. 자신만의 레퍼런스를 만들어서 빠르게 사용하세요



댓글을 달아 주세요



사이트 이미지 퍼오기 확장 프로그램 image Picker


안녕하세요. 고코더입니다.


사이트를 둘러보다 이미지를 다운로드 하고 싶을때가 있습니다.
방법은 다양합니다. 우클릭 제한을 해제 해서도 가능하고 사이트 저장 후에 이미지를 골라 내도 됩니다. 그런데 숨겨진 이미지부터 감각적이고 직관적으로 이미지들을 다운로드 받을 수 있는 방법이 있어 이를 알아 보려고 합니다.

크롬에 이미지를 맵으로 제공하는 프로그램이
Image Picker를 소개해드릴려고 합니다.

▼크롬에서 해당 URL을 접속합니다.
그리고 크롬 추가를 누르면 설치가 완료됩니다.
http://bit.ly/2Kb9GVI


▼브라우저 오른쪽 맨위를 보니 사진기 모양의 아이콘이 생겼습니다.
사이트에 접속해 이 버튼을 누르면 


▼ 제 블로그로 이동해서 해당 버튼을 누르니 
이처럼 이미지들이 맵 형태로 보여집니다. 클릭하면 바로 다운로드가 됩니다.
크기도 상대적으로 알 수 있고 숨겨진 이미지까지 끌고 오니 좋네요.
보니간 제 마크 이미지가 크네요. 줄여야겠네요


직관적인 UI가 매력적인 이미지 다운로드 확장 프로그램이었습니다.
이제는 기능 만큼 직관적인 인터페이스가 중요한거 같습니다.



마무리


직관적인 UI를 만들 수 있을려면?
1. 많이 써본다.
2. 고민 한다.
3. 만들어 본다




댓글을 달아 주세요



ASP 상에서 이미지 사이즈 알아내기


ASP 언어에서 서버에 있는 이미지 파일의 높이 넓이를 알아내는 방법입니다.
의외로 필요한 경우가 많습니다. 

이미지 사이즈에 맞게 view를 한다거나
유효성 체크 할때도 있죠.

자바스크립에서도 가능한 방법이지만
서버에서 우선 이미지 사이즈를 알아 낼 수 있기 때문에

자주 사용하는 방법입니다.

1
2
3
4
5
6
7
8
9
10
11
<%
 
  imagePath="D:\이미지주소.jpg"
  set imageSize=LoadPicture(imagePath)
 
  img_width = CLng(CDbl(imageSize.Width)*24/635//'픽셀단위로 변경
  img_height = CLng(CDbl(imageSize.Height)*24/635
 
  set imageSize=nothing
 
%>
cs






마무리


한번쯤은 사용하게 될 방법이죠



댓글을 달아 주세요