qr코드 디자인 [ 나만의 QRcode 디자인 하기 _3nd ] by_ normalstory

사설

QRcode 라는 기술이 나온 것은 이미 10년도 넘었습니다. 원천 제작 기술 또한 이미 무료로 공개된 상태입니다. 하지만 QRcode 에 대한 활용도가 높아지면서 불합리한 상업적 거래 행위가 늘고 있습니다. 

어정쩡한 디자인을 해놓고 인식률 또는 픽셀아트 디자인 등등의 이유로, 터무니 없이 부풀려진 가격으로 거래가 되고 있습니다. 유용한 기술이 쓸모없이 잊혀지거나 일시적 유행에 그치지 않도록 개인적으로 연구한 방법을 공유해봅니다.


mobile web application qr code design
 

나만의 QR코드 디자인 하기  ( by_normalstory )

(주)AIT UI/UX 연구원

noraml story 변찬수

everpresent@hanmail.net

 

 

안녕하세요. qrcode 디자인에 관한 글입니다. 

부족하더라도 처음 시작하시는 분들에게 조금이나마 도움이 되었으면 좋겠습니다. 감사합니다.

 

- 목차 -

1.QRcode 알아보기

2.디자인 준비하기 

3.QRcode 디자인 시작하기

1.QRcode 알아보기

QRcode란? 종류? 특징 구조? 적용 분야? 등의 내용은 이미 많은 분들이 말씀하셨고 인터넷에 이미 상세히 나와있기 때문에
중복되는 설명은 최대한 줄이면서 관련URL을 소개해 드리겠습니다.

   미리 알아두면 좋은 사이트 정보

1. QRcode는 이미지코드에 일부이라는 내용 부터 설명하고 있는 사이트입니다.http://www.ubiu.net/imagecode/index.htm?PHPSESSID=5b88298ee9926fa80362d8ce4abf586d

1. QRcode 를 처음 개발하여 저작권을 무료로 공개한 일본 DENSO사의 한국어 싸이트입니다.http://www.denso-wave.com/qrcode/ko/index.html

1. 국내에서 활동중인 꾀 유명한 솔루션 제작업체입니다.http://must.or.kr/ko/research/qrcode/
2. http://www.scany.net/

 

   =>  상기 ULR 첨부:QRcode_왼쪽에서부터 1 , 2 , 3(1), 3(2)  

 

   QRcode 디자인을 하기 앞서 알아 두어야 할 것들

1. 디자인을 시작하기 앞서 가장 먼저 생각해야할 부분은 만들어진 QRcode를 얼마만큼 내가 원하는 부분을 사용할 수 있는가
   입니다. 많은 blog와 site에서 언급하듯, 사용자가 (훼손?) 활용, 할 수 있는 영역은 다음과 같습니다.
   
   
   • level L  : 대략 7%나, 그 이하의 오류가 수정될 수 있습니다.
   • level M  : 대략 15%나, 그 이하의 오류가 수정될 수 있습니다.
   • level Q  : 대략 25%나, 그 이하의 오류가 수정될 수 있습니다.
   • level H  : 대략 30%나, 그 이하의 오류가 수정될 수 있습니다.

1. 하지만 문제는 일반적으로 공개되고 있는 국내 싸이트 툴에는 레벨값을 조절할 수 있는 목록은 찾기 힘들거나 유료로
   되어있습니다. 하지만, 아래의 싸이트를 찾아가시면 무료로 레벨 값을 조절할 수 있습니다. 영어 또는 일본어로 되어있어 불편하시다면,
   브라우저를 구글크롬을 사용하시면 자동으로 해석해 주는 옵션이 있으니 참고하시면 됩니다..
   
   1) 구글에서 개발자를 위해 만들어 운영중인 페이지.
   
   2)일본벤쳐?회사로 다양한 어플을 개발하고 배포하고 있습니다.
2. http://micono.hp.infoseek.co.jp/
3. http://code.google.com/intl/ko-KR/apis/chart/docs/gallery/qr_codes.html

 

   =>  상기 ULR 첨부:QRcode _왼쪽에서부터 1) , 2)  

2.디자인 준비하기

1. 구글에서 만드는 방법 입니다.
   먼저 아래와 같이 구글 코드 사이트에 방문하셔서 A요소를 잘 읽어보시면 어떠한 옵션이 있는지 상세히 알 수 있습니다.
   다만 영어로 되있어서 보기 힘드신 분께서는 앞서 말씀드렸던 국내 사이트에 접속하시면 한글로 되어있는 내용을 확인하실 수
   있습니다.각 요소를 확인한 후,
   URL에 B요소에 넣어주시고 엔터를 누르시면 브라우저에 아래와 같이 QRcode를 생성해서 보여주게 됩니다.
2.  



3. 

1. QRcode의 "컬러 인식범위 알기
   바코드의 형태가 흑과 백으로 이루어진 까닭은 그 색상의 차이로 데이터를 구분하고 인식하기 때문입니다.
   따라서 디자인을 하기에 앞서 바코드로 인식될 수 있는 색상을 파악하고 활용 가능한 범위 내에서 색을 선정하고 용도에 맞게
   사용하는 것이 좋습니다.
   우선 포토샵의Top menu->Select->Color Range를 실행하시면 창이 뜨고 동시에 마우스의 커서가 스포이드로 바뀝니다. 그 스포이드를 이용해 QRcode의 검정 부분을 클릭하시고 ok를 누르시면 검정부분만 선택되는 걸 확인할 수 있습니다.
   왼쪽 툴바를 이용해서 색상을 선정한 후 Art+Del키를 이용해 선택영역에 색을 입힙니다.
   
   ( HSB의 값 중 "H" 값 샘플 사진 )
   
   

   

   ( HSB의 값 중 "S" 값 샘플 사진 )
   
   

   

   ( HSB의 값 중 "B" 값 샘플 사진 )
   
   
   포토샵의 Color Picker를 보면 HSB값을 볼 수 있습니다.
   (자세한 설명은 구글링을 하면 쉽게 찾아볼 수 있있는 내용이라 생략하겠습니다.)
   상기 해당하는 영역의 색상을 선택해서 진행하면 됩니다. 
2.  
   (위 그래프는 H,S,B값의 순으로 나와 있습니다. QRcode에 인식되기 위해서는 다음의 세가지 해당 영역 중 하나 이상만 만족하면 실행이 됩니다.)



3.  
4. 
   ( 참고로 Fuzziness의 값을 이용해 선택범위를 정할수있으니 다른 작업에서도 유용하게 사용하시길 바랍니다)
5.  
6.  

1. QRcode의 "영역 인식범위 알기QRcode리더기가 인식할 수 있는 포지셔닝의 범위를 먼저 알고 있어야 합니다.
   활용 가능한 영역을 알아보았으니 
   이번엔 그 영역을 자르고 붙여서 형태를 만들고 앞서 언급한 컬러 요소를 적용하여 QRcode에 변형을 주어 간단한 디자인을 해보겠습니다. 
   
   

   

   
    (본인의 경우,
   디자인인 요소를 최적화하여 접근하고자 30%의 활용이 가능한 QRcode “H”값을 기준으로 위의 예제를 만들어 보았습니다.)
2.  

 

 

3.QRcode 디자인 시작하기

QRcode는 흑과 백의 픽셀 단위들이 불규칙한 배열로 모여 박스의 형태를 이루고 있다.
이러한 단순한 속성을 갖고 있는 까닭에 디자인을 위한 접근방식을 크게 색상, 아이콘, 테두리, 이미지 조합으로 생각할 수 있다.

1. QRcode에 색을 입히다.
   

캘빈클라인의 경우 복잡한 거리와 오래된 건물 외벽을 이용해 자칫, 딱딱하거나 기술적으로만 접근하기 쉬울 수 있는
QRcode를 보다 효율적으로 디자인과 마케팅적 요소에 활용한 사례가 있습니다.

1.  

아래 첨부된 동영상을 보면 주변환경을 이용하면서 디자인 설계해 나갔는지 유추해 볼 수 있습니다.

1.  

 

1.  

Calvin Klein Jeans QRCODE Billboard in New York City:

1. http://www.youtube.com/watch?v=c_N559yMLZc&feature=player_embedded

다소 딱딱한 형태와 불규칙한 배열 그리고 단색으로 이루어져있는 QRcode형태를 디자인하는 대부분의 경우들을 보면 원본의 흑백의 파일에 본인이 원하는 이미지를 고르거나 만들어 오류가 나지않는 만큼 줄여가며 끼워넣기 정도에 그치고 있는 것을 볼 수 있다. 이는 생성된 QRcode가 이루고 있는 형태 하나 하나가 바코드 인식과 같은 기능적 역할을 하기 때문에 오류에 대한 우려 또는 인식률에 대한 가변성 때문이라고 생각합니다.
하지만 캘빈클라인의 사례에서 알 수 있듯이 단순히 오류가 일어나지 않는 추측된 크기의 어울리지 않는 이미지를 끼워넣는 식의 디자인은 다소 어색한 느낌을 줄 수 있다. 보다 주변환경을 고려한 세심한 컬러 선정 하나만으로도 충분히 디자인적인 요소와 마케팅적인 요소를 갖을 수 있다는 것을 알 수 있습니다. 

1.  

  

(주변이 공사중이면서 허름하고 소란스런 빈티지한 분위기와 딱딱 끊어지는 QRcode 의 특성이 서로 조화를 이루게 하기 위해 포스터 좌우로 페인트의 질감을 표현했고 활용된 색상은 해당건물의 색과 주변의 커다란 포스터 표지판 등의 색상들과 어울리면서도 배경을 흰색으로 함으로서 깨끗한 주목성을 동시에 얻을 수 있었습니다.)

1.  

1.  

 

1.  
2. QRcode 사진을 나만의 액자에 걸어두기딱딱한 QRcode태두리에 변화를 주기 단순히 제작한 QRcode를 그대로 방치하기보단 일정장 모양이나 형태의 이미지와 조화를 이룰 수 있도록 설정을 하면 보다 설득력을 얻어낼 수 있습니다.

3. 

   
   
   
   

1. QRcode에게 아이콘 친구 소개시켜주기
    
   그런 과묵한 QRcode에게 조금만 다정하게 다가간다면 보다 많은 사람들에게 긍정적인 영향력 또는 전달력을 줄 수 있지 않을까 합니다.
    
    
   예제 1)

   

   
   

   -> 간단한 별 모양을 만들어 픽셀에 색을 입히고 약간의 모호한 형태를 구분 시켜주기 위해 별에 희색 태두리를 추가해 보았습니다.

    

   예제 2)
   

   

   
   
   

   ->실제 생활에 쓰여질 만한 기호를 사용하고 더불어 문자를 기록함으로서 QRcode만 보아도 어떤 기능을 하는지 알 수 있도록 하였습니다.

    

   예제 3)
   

   

   
   

   QRcode를 이용해 이미지를 전달함으로서 QRcode가 단순히 스마트폰에 의해 읽히는 수동적 바코드가 아닌, 그 자체로도 의미전달 뿐만 아니라 보다 포괄적인 의사전달 기능 또한 할 수 있도록 디자인 하였습니다.

2. 단순히 픽셀로 이루어진 사각의 박스는 최첨단의 디바이스를 기반으로 최신의 정보과 간편한 자료의 공유가 가능하도록 세상을 바꾸고 있습니다. 하지만 스마트폰이 없는 사람들에게 는 과연 어떤 느낌으로 다가 올까요? 거다란 건물에 막연히 세겨진 검정의 박스는 누군가에겐 신기한 눈요기일지 몰라도 누군가에겐 (비록 소수의 인원이라도) 공해일 수도 있을 거라는 생각을 조심스럽게 해보았습니다.

1. QRcode 디자인 ?

QRcode 이용해서 회사의 이미지 또는 로고 담아내기.

조그만한 픽셀 상자를 어떻게 하면 특이하고 개성있게 만들까? 하는 고민도 물론 중요하지만 기업 또는 그 회사의 BI와 CI가 확실한 경우 다음과 같이 색상만으로도 자신만의 로고를 만들어 낼 수 있습니다. 

그것은 다만 QRcode뿐만이 아닐 것 이라는 개인적인 코멘트를 남깁니다.

 

 

 

 

 

-> 글 그림 연구 작성자. 변찬수

everpresent@hanmail.net

 

 

 

 

denso, DESIGN, Mobile, QRCODE, QRcode만들기, qrcode프로그램, QRdesign, 댄소, 모바일, 이미지태그, 큐알코드, normalstory, by normalstory, 큐알코드 디자인, 픽셀아트, 튜토리얼, 큐알코드 튜토리얼,

denso, DESIGN, Mobile, QRCODE, QRcode만들기, qrcode프로그램, QRdesign, 댄소, 모바일, 이미지태그, 큐알코드, normalstory, by normalstory, 큐알코드 디자인, 픽셀아트, 튜토리얼, 큐알코드 튜토리얼,QR코드디자인, qr디자인, 디자인qr,QR코드디자인, qr디자인, 디자인qr,QR코드디자인, qr디자인, 디자인qr,