'Tech develop'에 해당되는 글 73건

아두이노 기초 ───

1장 아두이노 개요

    1.1 아두이노 소개

    1.2 아두이노의 종류 및 특징

3장 시리얼(serial) 통신

    3.1 시리얼 통신 개요

    3.2 시리얼 통신 예제들

    3.2 시리얼 통신으로 (3핀)초음파 센서를 이용한 거리 측정값 표시하기
    3.3 4핀 초음파 센서와 NewPing 라이브러리로 거리 측정하기

    3.4 초음파 센서로 근접 장애물 경고하기

4장 인터럽트(interrupt)

    4.1 인터럽트의 개념

    4.2 터치센서를 이용한 인터럽트 실험

    4.3 택스위치와 디바운싱 (falling edge) (part 1/2)

    4.4 디바운싱 (rising edge, changing edge, low state) (part 2/2)

    4.5 volatile 지시자

5장 아날로그 입력

    5.1 아날로그핀(AD변환기) 개요

    5.2 아날로그핀의 기준 전압 설정

    5.3 아날로그핀을 디지털 핀으로 사용하는 방법

    5.4 온도 센서를 이용한 아날로그 입력 실험

    5.5 광량 센서를 이용한 아날로그 입력 실험

하나의 프로젝트가 완성되기까지 우리는 선택이라는 과정을 반복해서 겪게 됩니다. 그때의 상황에 맞는 논리와 경험을 토대로 무언가를 결정을 하게 되죠. 그러나 때로는 개척하지 못한 황무지 같은 길을 걸어야 할 때도, 이미 닦아져 있는 길을 의심해야 할 때도 있습니다. 이런 경우라면 어떤 논리나 경험을 통하더라도 결과가 원하는 방향으로 나오지 않을 때가 많습니다. 그리고 그 선택이 큰 리스크를 안겨줄 수도 있고요. 이런 일들을 미리 방지하기 위해 가설을 세우고 최소한의 경험만으로 리스크도 줄이면서 값진 정보를 얻어 낼 수있는 방법이 있습니다. 이것을 우리는 프로토타이핑이라고 합니다.

프로젝트를 진행하다보면 프로토타이핑의 필요성을 느낄 때가 많이 있습니다. 어떤 선택을 해야하는 상황에서 기준이 될 수 있는 테스트를 하고 싶은데, 시간과 비용이라는 문제에 부딪혀 정작 진행하기는 쉽지 않습니다. 상대적으로 대부분의 디자이너들에게는 더 어려운 일이기도 하죠. 그러다보니 이런 문제를 개선하기 위해 많은 프로토타이핑 툴이 만들어지고 공개되어 왔습니다. 누구나 쉽고 빠르게 프로토타이핑을 할 수 있도록 말이죠. 그런데 여기서 문제가 하나 발생합니다. “뭘 써야하지?” 많은 툴이 나와있지만 나에게 맞는 툴이 뭔지, 현 상황에서 어떤 툴을 써야할지 알기가 쉽지 않다는건데요. 대부분의 프로토타이핑 툴들은 친절하게 데모영상 뿐만 아니라 트라이얼 버전을 제공하기 때문에 시간을 조금만 투자하면 툴에 대한 성격을 어렵지 않게 파악할 수 있습니다. 그러나 많은 이들이 “특정 상황”이 주어지지 않은 이상 대부분은 관심만으로 끝나는 경우가 많습니다. 저 또한 그랬구요. :) 저는 우연찮게 그런 상황이 주어졌고 다양항 툴들을 경험하게 됐습니다. 그리고 그 내용들을 간략하게 공유하고자 합니다.

Flinto

모바일전용 프로로타이핑 툴로 화면간의 이동을 확인함으로써 시나리오 검증에 최적화되어 있습니다. 대부분의 기능을 10분이면 학습이 가능하고 10분이면 하나의 프로토타입을 완성시킬 수 있습니다. 화면에 터치 영역을 지정하고 이동할 화면을 선으로 연결한 뒤 트렌지션 효과만 정해주면 간단한 화면간 이동 효과가 만들어집니다. 다만 제공하는 기능이 단순하다는 것이 아쉬운 부분인데, 공식블로그에는 추가적인 디자인 도구를 넣지 않는 이유에 대해 설명하며, 자신들의 아이덴티티를 명확히 하고 있습니다. 복잡한 인증절차를 거치지 않고바로 회원가입이 가능하며, 이후 30일간 무료로 사용하 실 수 있습니다.

학습 : 쉬움.
프로토타이핑 속도 : 빠름.
인터렉션 구현정도 : 제한적임.
홈페이지 : https://www.flinto.com/

Invision

Flinto와 마찬가지로 시나리오 검증에 최적화되어 있는 툴이며, 나와있는 툴 가운데 Flinto와 함께 가장 빠른 프로토타이핑을 할 수 있습니다. 제공하는 기능 또한 다양한데, 모바일 환경에서 발생하는 대부분의 터치 인터렉션과 트렌지션을 제공하며, sms로 url을 전달 할 수 있어서 간편하게 완성된 프로토타입을 디바이스에서 확인해 볼 수 있습니다. 모바일 뿐만 아니라 웹과 와이어프레임 제작도 지원하며, 회원 가입 후 30일 동안 무료로 사용하실 수 있습니다.

학습 : 쉬움
프로토타이핑 속도 : 빠름
인터렉션 구현정도 : 보통
홈페이지 : http://www.invisionapp.com/

Oven.io

다음 카카오에서 제공하는 프로토타이핑 툴로서 발사믹을 대체할 수 있는 유용한 툴입니다. 내부에서 제공하는 컴포넌트가 다양하기 때문에 준비된 리소스가 없어도 프로토타이핑이 가능하다는 장점이 있습니다. 복잡한 기능을 제공하지 않기 때문에 학습에 어려움이 없으며, 현재 베타버전으로 공개중이라 제한없이 무료로 사용 하 실 수 있습니다. 다만 트렌지션 효과에 대해서는 지원하지 않기 때문에, 결과물에 밋밋한 느낌이 없지 않아 있습니다.

학습 : 쉬움
프로토타이핑 속도 : 보통
인터렉션 구현정도 : 매우 제한적임
홈페이지 : https://ovenapp.io/

Proto.io

개인적으로는 다른 툴과 비교했을때 가장 폭 넓게 활용이 가능한 툴이 아닐까 합니다. 플린토나 인비전처럼 준비된 화면이 있으면 빠르게 인터렉션만 추가해서 프로토타이핑을 할 수 있으며, 오븐처럼 기본적으로 제공되는 컴포넌트가 있기 때문에 이를 활용한 프로토타이핑도 가능합니다. 또 위의 툴들과는 다르게 화면 단위 프로토타이핑 아니라 개별 오브젝트마다 인터렉션을 줄 수 있어 다양한 인터렉션 디자인이 가능하고요. 다만 복잡한 인터페이스와 기능때문에 학습에 적지 않은 시간을 들여야 한다는 단점이 있습니다. 위의 툴들은 혼자 학습하는데 어려움이 없으나, Proto.io는 제공하는 튜토리얼을 한번은 거쳐야 사용할 수 있습니다. 그래도 학습을 위한 페이지가 잘 갖춰져 있는편이라 이 단계만 넘어가면 현재 나와 있는 툴들 가운데 가장 접근이 용이한 툴이 아닐까 생각합니다. Proto.IO는 가입 후 15일간 무료로 사용하실 수 있습니다.

학습 : 보통
프로토타이핑 속도 : 보통
인터렉션 구현정도 : 좋음
홈페이지 : https://proto.io/

Origami

페이스북에서 애플의 비주얼 개발 툴인 쿼츠컴포저에 플러그인을 설치하여, 프로토타이핑에 적합한 기능을 제공하는 무료 툴입니다. 페이스북 서비스인 페이퍼를 이 툴을 써서 프로토타이핑 했다고 해서 유명해졌습니다. 패치라고 하는 각각의 기능을 가진 박스들을 선으로 연결하여 하나의 프로그램을 완성시키는 형태이며, 인터렉션 프로토타이핑을 하는데 최적화되어 있습니다. High-Fidelity툴 중에서는 비교적 접근하기 쉬운 툴이긴 하나 적지 않은 시간을 들여야하고, 쿼츠컴포저가 Mac OS에서 제공되는 플랫폼이기 때문에 사용환경이 제한적입니다. 게다가 비쥬얼개발 툴에 기반을 두고 있어 PC 하드웨어 사양이 낮으면 사용하기 어렵습니다. 2.0으로 업데이트되며 프로토타이핑한 내용의 코드를 Export시켜 확인 할 수 있으나, 실제 개발코드로 적용하기에는 어려움이 있습니다. 

학습 : 어려움
프로토타이핑 속도 : 느림
인터렉션 구현정도 : 좋음
홈페이지 : https://facebook.github.io/origami/

Framer

코드베이스에 프로토타이핑 툴입니다. Coffee Script 라고 하는 개발언어를 사용하며, 내부 라이브러리가 잘 구축되어 있어 기본 문법만 이해하면 예제는 금방 따라 가실 수 있습니다. 코드 베이스이기 때문에 높은 퀄리티의 프로토타입을 제작 할 수 있으며, 자유도 또한 높은 편입니다. 예를 들면 다른 툴의 경우는 제공되는 기능 외에는 구현이 불가능하거나 복잡한 방법으로 우회적으로 접근을 해야하지만, Framer는 내부에서 기능을 제공하지 않더라도 직접 개발이 가능하죠. 하지만 이 부분이 제가 생각하는 가장 큰 단점인데요. 난이도 있는 프로토타이핑을 하기에 디자이너에게는 어렵고, 개발자에게는 자신에게 익숙한 언어로 개발을 하는게 낫기 때문입니다. 그럼에도 불구하고 많은 것을 할 수 있기 때문에 인기있는 프로토타이핑 툴입니다. 아직 Mac OS X 버전만 출시되었고, 윈도우 버전은 준비중에 있으며, 30일간 무료로 사용할 수 있습니다.

학습 : 어려움
프로토타이핑 속도 : 느림
인터렉션 구현정도 : 좋음
홈페이지 : http://framerjs.com/

마무리하며

최근 몇 년 사이 프로토타이핑에 대한 관심이 급격히 늘었음을 느낍니다. 물론 이전부터 프로토타이핑의 필요성은 꾸준히 제기되어 왔지만, 플랫한 그래픽 디자인이 주를 이루기 시작한 시점에서 인터렉션이 중요해지고, waterfall 에서 Agile 이나 Lean UX Process로 조금씩 변화해가는 과정 중에 프로토타이핑이 더욱 중요해졌죠. (전 개인적으로 LeanUX의 MVP를 Minimum Viable Prototype로 정의해야 한다고 생각합니다.)

Apple, Ideo, You Tube등 몇몇 회사의 디자이너들을 75%가 프로토타이핑 툴을 사용한다는 통계도 있습니다.

이미지 참조 : http://www.slideshare.net/cmccann77/design-research-prototyping

프로토타이핑에 있어 가장 중요한 포인트는 목적을 분명히 하는 것입니다. 그 목적은 툴을 선택하는 가이드가 됩니다. 제 생각에 프로토타이핑의 가장 큰 목적은 두가지인데, 시나리오에 대한 검증과 인터렉션에 대한 느낌 확인이죠. 물론 뒤에 대상이 추가됨에 따라 목적이 추가 되기도 합니다. 중요한 것은 필요에 따라 적합한 툴을 선택하는 것인데,  시나리오 검증을 하는데는 쉬우면서 빠른 low-fidelity 툴이 적합하고, 인터렉션에 대한 부분을 확인하고자 했을 때는 느리고 어렵지만 기능이 강력한 mid, high-fidelity 툴이 적합합니다. 어느 정도 퀄리티를 높이면서 빠르게 프로토타이핑을 하고 싶다면 툴보다는 개발자를 고용하는게 좋을 것 같고요.
몇 가지 툴들을 간략하게나마 소개 해드렸는데, 툴은 선택함에 있어 고민을 덜어드리는데 도움이 되길 바랍니다.

출처: http://story.pxd.co.kr/1069

기존 Android SDK 버전에서는 설치 시 해당 앱에 설정 된 permission을 물어보고 동의를 해야만 설치가 가능했다. 하지만, Android 6.0(SDK 23)이상의 버전에서는 설치 시에 묻는게 아니라 해당 기능이 permission을 필요로 할 때, permission을 활성화 해줘야 사용가능하다. 따라서 기존 6.0미만의 버전에서 개발했던 어플리케이션은 6.0이상의 폰에서는 정상적으로 작동하지 않을 수 있다.

따라서, 각 기능이 필요한 시점마다 권한을 받아야 한다.

이곳에 들어가면

 https://github.com/henryJung/android_runtime_permission 

자세히 확인 할 수 있다.

런타인 퍼미션을 적용해야 할 퍼미션 목록이다. 

DB object를 만들 때는, 

RealmObject 를 반드시 상속 시켜줘야 합니다.

한글이 모두 ???로 나오는 문제가 발생했습니다. 메뉴나 저장소의 파일에 있는 한글들은 이상이 없었지만 DB에서 꺼내온 이슈종류의 이름이나 저장소의 커밋 메시지에 있는 한글의 경우는 모두 ???로 나타났는데 다른 인코딩 설정으로 해결이 안되는 것으로 보아 MySQL의 인코딩이 맞지 않는 문제로 보였습니다. 

MySQL에 접속(sudo mysql -p)하여 MySQL에서 캐릭터셋에 대해서 조회(show variables like 'c%';)를 해보면 아래와 같이 latin1으로 나타납니다. MySQL같은 경우는 기본적으로 latin1 캐릭터셋을 사용하도록 설치가 되더군요.(이유까진 잘 모르겠습니다.)

Redmine의 디비설정 파일인 /etc/redmine/default/database.yml 에 encoding을 UTF-8로 설정을 해놓았기 때문에 MySQL의 인코딩 타입과 맞지 않아서 발생한 문제인듯 합니다. MySQL의 인코딩인 latin1으로 맞출수도 있지만 장기적으로 생각해 보았을 때는 이왕 해결할 때 UTF-8로 맞추는 것이 더 나은 해결책으로 생각되었습니다. 인코딩을 맞춰주기 위해서 일단 MySQL의 인코딩을 UTF-8로 맞추어 주어야 합니다. /etc/mysql/my.cnf 파일에서(OS에 따라 my.ini일수도 있습니다.) 각 부분에 아래의 내용을 추가해 줍니다. my.cnf에 이미 다른 설정들이 있으므로 각 부분에 맞게 추가해 주기만 하면 됩니다.

이렇게 설정하면 이제 MySQL에 관련된 캐릭터셋은 UTF-8을 사용하지만 이미 latin1으로 생성된 디비는 바꿀수가 없기 때문에 삭제후에 다시 생성해야 합니다.(디비명이 redmine이라고 가정하고 이 경우는 데이터가 전혀 없기 때문에 그냥 지우고 다시 생성하였지만 이미 사용하던 데이터가 있을 경우에는 백업하고 복구하여야 합니다. redmine디비를 사용하도록 바꾸고 캐릭터셋을 조회하면 대부분은 UTF-8로 바뀌었지만 데이터베이스 부분은 여전히 latin1로 되어 있는 것을 볼 수 있습니다.)

drop database redmine;
create database redmine COLLATE utf8_general_ci;

이렇게 다시 생성하고 다시 해당 디비의 캐릭터 셋을(use redmine후에 하여야 합니다. 디비마다 설정이 다르기 때문에)을 하면 아래처럼 모두 UTF-8로 된것을 볼 수 있습니다.

이제 UTF-8로 설정된 데이터베이스가 생겼으므로 Redmine에서 사용할 테이블과 기본적인 데이터를 생성해야 합니다. 다행히도 Ruby on Rails에는 migration기능이 들어있기 때문에 Redmine이 설치된 루트에서 아래의 간단한 명령으로 테이블 생성 및 기본데이터를 다시 추가할 수 있습니다.

rake generate_session_store
RAILS_ENV=production rake db:migrate
RAILS_ENV=production rake redmine:load_default_data

이제 redmine디비를 조회해보면 각 테이블및 데이터가 들어간 것을 확인할 수 있고 Redmine페이지에 접속해 보면 아까 깨져서 나오던 한글데이터들이 모두 정상적으로 출력되는 것을 확인할 수 있습니다.

출처: http://blog.outsider.ne.kr/526

유지보수나 신규개발을 할때 당면할 수 있는 문제중에 다른 페이지에 onload 함수가 중복이 될 수 있다.

중복이 되면 나중에 호출되는 onload 함수만 호출이 된다. 이런 문제들을 아래와 같은 방법으로 해결 할 수 있다.

첫번째로 호출되는 onload 함수

1. window.onload = function() {
   

   firstFunction();

   }

두번째로 호출되는 onload 함수

1. var prevOnload = window.onload;
   
2. window.onload = function() {
3. prevOnload();
4. secondFunction();
5. }

우선 기존에 존재하는 mysql 설정파일을 백업해둔다.

이후 vim으로 해당파일을 열어 [mysqld]아래에 내용을 추가한다.

이후 재시작

출처: http://j4ckp4rd.tistory.com/60

IE 8 이하에서는 indexOf 메소드가 안먹힌다.

따라서 직접 구현해주어야 하는데 

코드는 다음과 같다.

if(!Array.indexOf){
	    Array.prototype.indexOf = function(obj){
	        for(var i=0; i<this.length; i++){
	            if(this[i]==obj){
	                return i;
	            }
	        }
	        return -1;
	    }
	}