반응형

간단한 앱개발 어플리케이션 제작하기


이번 시간에는 전화걸기 및 인터넷 접속하기 기능의 간단한 어플제작을 해보겠습니다.
해당 포스팅은 이어지는 내용이므로 아래 이전 포스팅을 순서대로 학습한 뒤에 진행바랍니다.


지난번 시간에는 간단한 버튼을 생성해서 버튼 클릭시 메시지를 출력하는 것을 실습해보았습니다.
이번에는 여러분이 만든 앱을 통해서 간단한 전화걸기나 인터넷 접속을 해보는 예제를 만들어 보도록 하겠습니다.

실습 진행 순서는 다음과 같습니다.
먼저 이클립스를 실행한 뒤에 Graphical Layout에서 전화걸기 버튼과 인터넷 접속 버튼을 생성합니다. activity_main.xml 에서 자동으로 생성된 xml 소스를 확인합니다. xml 소스 확인 뒤에는 java 프로그램에서 버튼 클릭시에 이벤트 처리부분을 작성하도록 하겠습니다.

Grahpial Layout은 activity_main.xml 소스부분이 사용자가 이해하기 쉽게 만들어놓은 일종의 GUI(Grahpic User Interface) 입니다.


그래픽 사용자 인터페이스(영어: graphical user interface, GUI)는 컴퓨터를 사용하면서, 그림으로 된 화면 위의 물체나 틀, 색상과 같은 그래픽 요소들을 어떠한 기능과 용도를 나타내기 위해 고안된 사용자를 위한 컴퓨터 인터페이스이다.


어플리케이션 버튼 만들기


왼쪽 화면에서 

Button 부분을 마우스로 드래그 해서 오른쪽 Layout 화면으로 이동합니다.



마우스를 드래그하는대로 오른쪽 화면으로 옮기면 버튼이 생성됩니다. 마우스로 위치를 버튼의 크기를 적절하게 조절한 뒤에 버튼의 이름을 전화 걸기와 인터넷 접속하기로 변경하겠습니다.





버튼 이름 변경하기


버튼 이름을 변경하기 위해서 하단 부분에 activity_main.xml 탭을 클릭새서 소스를 열어보면 아래와 같이 Button이 자동으로 생성되어 있음을 확인 할 수 있습니다.





activity_main.xml 소스에서 버튼에 보이는 이름은 android:text 부분입니다. 이 부분이 Graphical Layout에서 Button으로 생성되어 있습니 여기에 각각 전화 걸기와 인터넷 접속하기를 입력합니다.
입력이 끝나면 Grahpical Layout 탭으로 이동해서 버튼의 이름이 변경되었는지 확인합니다.



Grahpical Layout 탭을 클릭하면 아래 화면과 같이 전화걸기와 인터넷 접속하기 버튼이 생성되었음을 볼 수 있습니다. 그럼 이제는 버튼에 각각 전화를 거는 이벤트와 인터넷 접속하는 이벤트를 만들어서 실제 버튼 클릭시에 동작이 되도록 만들어보도록 하겠습니다.



조금 전 작업을 Grahpical Layout에서 진행해도 됩니다. 그렇지만 Grahpical Layout 편리하기는 하지만 실제 현장에서 레이아웃 설계를 할 때는 간단한 화면 Layout보다는 복잡한 경우가 많습니다.
조금만 복잡해져도 Grahpcial Layout으로는 실제 단말에서 화면이 깨지거나 activity_main.xml 소스를 직접 수정해야하는 경우가 다반사입니다. 따라서 Grahpcial Layout은 참고용으로 사용을 하고 실제는 activity_main.xml 소스를 직접 수정하는 습관을 들이는 것이 좋습니다.


버튼 클릭 이벤트 만들기


이제 각 버튼에서 Java 소스 코드를 참조해서 버튼을 눌렀을 때 동작이 되도록 만들어 보겠습니다. 
전화걸기 부분의 소스를 다음과 같이 작성합니다. 여기서 Intent 라는 객체를 사용하는 것을 볼 수 있습니다.
Intent는 안드로이드 스마트폰 앱에게 뭔가를 지시하고자하는 의도하는 자바객체라고 생각하면 됩니다. 즉, 안드로이드에게 전화를 걸게하거나, 인터넷을 접속하게 하기위해서 일종의 명령을 내리는 것입니다.




전화걸기 소스코드 작성이 끝나면 인터넷 접속하기 소스를 다음과 같이 작성합니다.


     
       

완성된 전체 소스코드는 아래와 같습니다. 



제작한 앱개발 어플리케이션 실행하기


소스코드 작성이 끝났으면 Ctrl+F11을 눌러서 간단히 제작한 앱개발 어플리케이션을 실행합니다.
기본적으로 안드로이드 애뮬레이터는 구동시켜놓아야 합니다.

애뮬레이터가 실행되면 전화 걸기버튼과 인터넷 접속하기 버튼이 나타납니다. 그럼 전화를 걸어보겠습니다. 전화걸기 버튼을 클릭합니다.



가상 단말이 실행되어서 전화 걸기를 수행합니다. 이번에는 MENU 버튼 옆의 BACK 버튼을 클릭해서 원래 화면으로 돌아온 뒤 인터넷 접속하기 버튼을 클릭해 보도록 하겠습니다.



아래 화면과 같이 다음사이트가 브라우징 되는 것을 확인할 수 있습니다. 사전에 Intent 객체에서 입력한 인터넷 주소로 인터넷 브라우징되는 것입니다.



반응형

'IT & Programming > 안드로이드 프로그래밍' 카테고리의 다른 글

안드로이드 프로젝트 폴더 구조 이해하기  (1) 2016.02.22
실무에서 안드로이드 프로그래밍 앱개발은 이렇게  (0) 2016.02.20
안드로이드 버튼 만들고 자바에서 ID로 객체호출하기  (0) 2016.02.19
안드로이드 HelloAndroid 소스 수정해보며 이해하기  (0) 2016.02.19
안드로이드 프로그래밍-첫번째 프로젝트 HelloAndroid 만들기  (0) 2016.02.18
반응형

첫번째 안드로이드 프로젝트 만들기


첫번째 프로젝트를 만들어보겠습니다. 자바 프로그래밍을 공부하다보면 언제나 만나는 단어는 Hello 입니다. 안드로이드 프로그래밍도 자바 프로그램입니다. 첫번째 안드로이드 프로젝트의 이름은 HelloAndroid 으로 만들겠습니다.
이클립스의 File > New > Other 메뉴를 클릭하거나 단축키인 Ctrl+N 를 누릅니다.




다음과 같은 팝업이 나옵니다. 여기서 Android > Android Application Project를 클릭합니다.




Next 버튼을 클릭해서 다음 단계로 진행합니다.




Application Name에 HelloAndroid 라고 입력을 하면 Project Name과 Package Name이 자동 생성되는 것을 알 수 있습니다.

화면에 디스플레이 되는 항목은 중에서 위에 세 가지는 다음과 같습니다.
Application Name : 앱 사용자에게 보여지는 앱 사용자를 위한 이름입니다.
Project Name : 패키지 구분을 위한 개발자를 위한 이름입니다.
Package name : 안드로이드 시스템이 이해하기 위한 안드로이드 시스템을 위한 이름입니다.




그런데 Package Name 항목에 경고 아이콘이 보입니다. com.example 은 접두어로 적합하지 않다는 것입니다.
com.example을 com.ex로 변경하도록 하겠습니다.
com.ex로 변경 후 경고표시가 없어진 것을 알 수 있습니다. 

Minimum Required SDK 항목은 SDK 호환성 부분입니다.
Minimum Required SDK은 자신이 만든 앱이 구동되는 최소한의 안드로이드 버전으로 사용자가 최소한 이정도 되는 사양의 스마트폰 단말기를 사용해야 제작한 앱을 구할 수 있는 것입니다. Next 버튼을 클릭해서 다음 화면으로 이동합니다.






안드로이드 버전별 사용 현황


잠시 안드로이드 버전별 사용 현황을 확인해보고 다음 단계를 계속 진행하겠습니다.
SDK 호환성부분을 보다보면 현재 전세계에서 안드로이드 스마트폰에 어떤 OS를 가장 많이 사용하는지 궁금하게 됩니다.
안드로이드 개발자 사이트는 안드로이드 버전별 사용현황 통계치를 실시간으로 보여줍니다. 아래 사이트에 들어가면 확인할 수 있습니다.


아래 화면과 같이 현재는 안드로이드4.4 KitKat 버전이 점유율 35.5%로 가장 많이 사용하는 버전입니다.




 

프로젝트 환경 설정


이 화면은 프로젝트의 환경 설정을 하는 부분입니다.
아래 화면과 같이 Create custom launcher icon은 해제하고 Next 버튼을 클릭합니다.



앱의 첫화면 설정하기


앱의 첫화면을 설정하는 화면입니다. 각각을 클릭해보면 앱 화면이 변경되는 것을 알 수 있습니다.
여기서는 간단한 Black Activity를 선택하고 Next 버튼을 클릭합니다.



만들고자 하는 앱 첫 화면의 소스화일 이름을 설정하는 화면입니다.
디폴트로 MainActivity가 기입되어있습니다. 입력되어 있는 값을 그대로 두고 Finish 버튼을 클릭합니다.



공란이었던 이클립스 편집기 화면에 자동으로 소스가 생성된 것을 볼 수 있습니다.





소스의 가독성을 높이기 위해서 간단을 작업을 하도록 하겠습니다.
가독성 높은 폰트를 사용하는 것은 아래 포스팅을 참고 바랍니다.


가독성이 높은 Dejavu San Mono 폰트를 적용하면 다음과 같은 가독성 높은 화면으로 변경됩니다.



에뮬레이터 구동하기


이번에는 에뮬레이터를 구동해보도록 하겠습니다. 에뮬레이터는 실제 물리적인 스마트폰을 가지고 있지 않아도 컴퓨터에서 가상의 스마트폰을 만드는 것입니다.
그럼 이클립스 화면 메뉴에서 

 아이콘을 클릭합니다.

에뮬레이터가 구동되기 위해서는 AVD라고 하는 Android Virtual Device를 설정해주어야 합니다. Create 버튼을 클릭합니다.



힙메모리와 AVD 설정하기


AVD 설정 화면을 다음과 같이 입력하고 세팅합니다. 세팅이 완료되면 OK버튼을 클릭합니다.
VM Heap 은 64MB 입력합니다. VM 힙의 크기가 작으면 앱이 동작하지 않고, 너무 크면 메모리 부족이 발생할 수 있습니다.
테스트 해본결과 64MB 가 적정 힙사이즈인 것 같습니다. 입력후 OK 버튼을 클릭합니다.



AVD Name이 Android4x로 생성된 AVD가 보입니다. Start 버튼을 클릭해서 가상 디바이스를 구동합니다.



Start 버튼을 클릭하면 시작 옵션팝업이 뜹니다. Launch 버튼을 클릭해서 구동을 진행합니다.



에뮬레이터가 시작되고 있습니다.


구동되는데 시간이 소요됩니다.



구동이 완료된 가상 스마트폰 화면입니다.

현재 인텔i5 프로세서를 사용하고 있는 제 경우 1분10초 정도가 소요되었습니다.
VGA800 모드일때 1분10초였지만, 해상도가 높은 WXVGA800으로 구동시에는 훨씬더 많은 시간이 소요됩니다.




가상 스마트폰에서 한글 설정하기


가상 스마트폰인 에뮬레이터에서 설정부분을 클릭합니다.



아래 화면과 같이 Custom Locale 아이콘을 클릭합니다.



Custom Locale 아이콘을 클릭하면 아래와 같이 언어를 설정하는 화면이 나타납니다. 현재 영어로 되어있기 때문에 모든 언어가 영문으로 나타납니다. 



아래쪽으로 내리다보면 한국어인 ko 로케일이 있습니다. ko-Korean을 선택하고 선택버튼을 클릭합니다.



한국어를 선택하자 언어 설정부분이 모두 한글로 변경되는 것을 확인할 수 있습니다. 오른쪽 키패드에서 홈키를 클릭해서 스마트폰 홈화면으로 이동합니다.



홈화면으로 이동하면 영문으로 되어있던 카메라가 한글로 변경된 것을 확인할 수 있습니다.


반응형

'IT & Programming > 안드로이드 프로그래밍' 카테고리의 다른 글

안드로이드 버튼 만들고 자바에서 ID로 객체호출하기  (0) 2016.02.19
안드로이드 HelloAndroid 소스 수정해보며 이해하기  (0) 2016.02.19
이클립스 소스코드 자동 정렬 및 프린트 안내선 설정하기  (0) 2016.02.18
안드로이드 프로그래밍-전화걸기 및 인터넷 접속기능 구현  (0) 2016.02.17
안드로이드 프로그래밍-버튼 이벤트 실습하기  (0) 2016.02.17
반응형

안드로이드 프로그래밍 - 버튼 이벤트 실습 선수과정


이번 시간에는 스마트폰 화면에 버튼을 만들고 버튼을 클릭할 때 이벤트를 발생하는 것을 실습하겠습니다.
이전 강좌와 이어지는 내용이므로 실습을 제대로 진행하기 위해서 이전 포스팅 내용을 확인하고 진행바랍니다.


스마트폰에 출력하는 텍스트 문구 변경해보기


지난시간에 아래 화면과 같이 가상의 안드로이드 스마트폰에 Hello World 라는 문구를 출력하는 것을 학습하였습니다.
버튼을 생성하기에 앞서서 이전에 실습했던 어플리케이션(Application)에서 입력하지도 않은 Hello world!라는 문구가 어디에서 설정되어 있는지 소스를 찾아서 확인해보겠습니다.



이클립스에서 MainActivity.java 소스를 열어보겠습니다. 
아래 소스를 살펴보면 Java의 표준 문법에서 보이는 Java의 시작을 알리는 main() 함수가 존재하지 않습니다.
그렇다면 어디서 Hello world!라는 문구를 표시하게 하는 것일까요?

아래 setContentView(R.layout.activity_main); 함수 부분을 보겠습니다. setContentView() 함수에 인자로 쓰인 R.layout.activity_main 부분에 열쇠가 있습니다.



왼쪽 네비게인션 화면의 HelloJava 프로젝트의 res폴더를 펼쳐 보도록합니다. res > layout 폴더를 열면 activity_main.xml 이라는 화일이 있습니다. activity_main.xml 화일을 클릭해 보도록 하겠습니다.  클릭하면 오른쪽 화면에 디자인 설계를 하는 Graphical Layout 화면이 나타납니다. Graphical Layout 탭옆의 activity_mail.xml 탭을 클릭합니다.


activity_main.xml 탭을 클릭하면 아래 화면과 같이 activity_main.xml에 대한 소스 화면이 보입니다. xml소스안에도 Hello world라는 문구는 보이지 않습니다.

그렇다면 실제 텍스트 문구를 나태내는 String 문자에 대한 정의를 해두는 곳이 있을 것입니다.
<TextView /> 태그안을 살펴보면 @string/hello_world 부분이 있습니다. 이곳이 String 문자를 별도 정의한 부분입니다.



res/values 폴더를 클릭합니다. 이곳에 strings.xml과 styles.xml 화일이 존재합니다.



strings.xml 화일을 클릭하면 오른쪽에 다음과 같은 화면이 나타납니다.



오른쪽 화면에서 hello_world (String) 항목을 클릭하면 Value값에 Hellow world! 라는 문구를 찾을 수 있습니다
하단의 Resources 탭옆에 strings.xml 탭을 클릭합니다.



조금전 Resource 탭에서는 UI 형태로 값을 입력할 수 있지만 strings.xml 탭을 클릭하면 xml 소스코드를 그대로 볼 수 있습니다.
소스안의 hello_world라는 string 태그안에 Hello world!라는 String 문자를 발견할 수 있습니다.

문자가 출력되는 소스의 연결고리를 정리해보면 /res/values/strings.xml 소스의 hello_world는 /res/layout/activity_main.xml 안의 @string/hello_world와 연결되어 참조되고 activity_main.xml 는 /src/MainActivity.java 안의 setContentView(); 함수에 R.layout.activity_main 라는 파라미터로 전달되어짐을 알수 있습니다.




그러면 string 문자를 다음과 화면과 같이 안녕 Java라고 변경하고 어플리케이션을 재실행시킵니다. 재실행 단축키는 Ctrl + F11 입니다.



안드로이드 어플리케이션을 재실행 시키면 에뮬레이터인 가상의 스마트폰에서 실행결과가 나타납니다. 아래 화면과 같이 출력 문구가 변경되는 것을 확인할 수 있습니다.




스마트폰에 버튼만들기


버튼을 만들기 위해서 이번에는 activity_main.xml 화일안의 <TextView> 태크를 <Button>이라는 이름의 태그로 변경합니다.
변경된 소스를 저장한 뒤 어플리케이션을 재실행(Ctrl + F11) 합니다


어플리케이션이 재실행되고 나니 텍스트였던 부분이 버튼으로 변경된 것을 확인할 수 있습니다.



버튼 클릭 이벤트 발생시키기


이번에는 버튼을 클릭했을때 버튼 클릭 이벤트를 발생시키도록 하겠습니다.
버튼 클릭 이벤트를 발생시키기 위해서는 두 가지 작업을 진행하면 됩니다.

첫번째는 xml 화일인 activity_main.xml에 정의된 버튼의 ID를 추가합니다.
이벤트 발생을 시키려면 <Button> 태그안의 속성에 ID 속성을 추가해야합니다.
ID속성은 @+id 을 표기하여 지정합니다. 
 
형식 : @+id/정의하려는 이름
사용예) @+id/startBtn



두번째는 Java 화일인 MainActivity.java에 정의된 버튼의 이벤트 처리 코드를 추가합니다.

onCreate() 메소드 안에 Button 클래스를 생성하고findViewById() 함수로 xml에 정의되 startBtn ID 값을 매핑시킵니다.


Button 클래스의 setOnClickListener() 메소드를 활용해서 클릭이벤트를 Listening 합니다.



클릭시에 필요한 onClick() 메소드를 활용합니다.


메시지를 보여주기 위해서 Toast 클래스를 사용합니다.

            
완성된 소스 코드는 다음과 같습니다.



어플이케이션을 실행해서 버튼을 클릭하면 버튼 클릭이벤트가 아래 화면과 같이 제대로 동작하는 것을 확인할 수 있습니다.



유용한 이클립스 단축키 Tip)
Ctrl + Shift + O : 이클립스가 필요한 자바 Class를 자동으로 import 해줍니다.


반응형

'IT & Programming > 안드로이드 프로그래밍' 카테고리의 다른 글

이클립스 소스코드 자동 정렬 및 프린트 안내선 설정하기  (0) 2016.02.18
안드로이드 프로그래밍-전화걸기 및 인터넷 접속기능 구현  (0) 2016.02.17
안드로이드 프로그래밍으로 앱개발 시작하기  (0) 2016.02.16
가독성 좋은 폰트로 개발을 편리하게  (0) 2016.02.16
안드로이드 에뮬레이터 사용하기  (2) 2016.02.15
반응형

이클립스(eclipse)에서 톰캣(tomcat) 연동하기


자바 웹어플리케이션 개발 환경을 구성하기 위해서는 이클립스에서 톰캣을 연결하고 설정해야합니다.
톰캣 서버를 설치하는 것은 아래 포스팅을 참조바랍니다.




톰캣 서버의 폴더 구조


톰캣을 설치하고 나면 톰캣 디렉토리가 생성됩니다. 톰캣 서버가 어떻게 구성되었는지는 아래 톰캣 폴더 구조를 확인하면 알 수 있습니다. 톰캣 서버 폴더의 구조를 이해하는 것만으로도 서버에 대한 이해도가 높아지는 좋은 공부가 됩니다.

 폴더

설명 

 bin

톰캣 실행과 과련된 배치 파일이나 스크립트 파일 

 conf

톰캣 서버의 환경 설정 파일 

 lib

톰캣 서버 자바 라이브러리 파일 

 logs

톰캣 서버의 실행 상태를 기록한 로그 파일 

 temp

 톰캣 서버가 실행 중에 사용하는 임시 폴더

 webapps

 웹 애플리케이션을 배치하는 폴더

 work

 JSP를 자바 서블릿 소스로 변환한 파일이 들어 있음



이클립스에 톰캣 서버 정보 등록하기


이클립스에서 만든 자바 웹애플리케이션을 테스트하려면 아래의 과정을 거쳐야합니다.
과거에는 이런 방식으로 개발을 진행, 하루에도 수십번 복사 및 서버 적용 작업 반복했습니다. 

톰캣의 홈 디렉토리인 webapps 폴더에 웹 애플리케이션 복사
웹 애플리케이션 복사 뒤 테스트를 위해서, 톰캣 서버의 shutdown 및 startup을 수행

프로그램을 작성 -> 애플리케이션 복사 -> 서버 shutdown -> 서버 start

이런 이런 불편점 해소를 위해서, 이클립스는 WTP(Web Tools Platform) 플러그인 제공합니다.


이클립스 WTP(Web Tools Platform) 플러그인


WTP 플러그인은 다음과 같은 기능을 가지고 있어서 개발 및 빌드 테스트 시간을 줄일수 있습니다.

톰캣 서버 시작 및 종료 기능
톰캣의 webapps에 웹 애플리케이션을 복사하지 않고 사용


이클립스에 톰캣 서버 정보 등록하기


이클립스 화면에서 Window > Preference 를 선택합니다.
Server > Runtime Environments 화면에서 오른쪽 Add 버튼을 클릭합니다.




서버 등록창에서 Apache Tomcat v7.0 노드를 선택한 뒤 Next 버튼을 클릭합니다.




Browse 버튼을 클릭해서 톰캣이 서버의 홈 디렉토리를 찾아서 선택합니다.
선택한 뒤에 Finish 버튼을 클릭해서 설정을 완료합니다.



설정을 완료하면 조금전 열었던 Server Runtime Environments의 화면에 톰캣 서버가 등록된 것을 확인할 수 있습니다.




이클립스 톰캣 실행환경 구성하기


조금전 톰캣 서버 정보를 이클립스에 설정하였습니다. 이제는 WTP에서 톰캣을 실행할 수 있도록 톰캣 설정 파일을 복사하고 임시 배치 폴더를 준비해야 합니다.

이 작업을 하기 위해서 이클립스에 Servers뷰가 있어야 합니다. Window > Show View > Servers 를 클릭합니다.




이제는 톰캣서버를 등록해야 합니다. 오른쪽 아래의 서버탭에서 No server are .. 부분을 클릭합니다.



모든 설정은 디폴트로 상태로 둔 뒤에 Next 버튼을 클릭합니다.



새로운 서버를 추가하고 삭제할 수 있는 화면이 나타납니다.
왼쪽은 웹 애플리케이션 프로젝트 목록을 보여주고 오른쪽은 톰캣 서버에 배치된 웹 애플리케이션 목록을 나타냅니다.

아직 웹 프로젝트를 만들지 않았으므로 양쪽 모두 공백 화면입니다. Finish 버튼을 클릭해서 등록을 완료합니다



이제 이클립스 화면에서 Server 프로젝트가 보입니다.



Project Explorer 뷰에서 보면, Servers 폴더를 클릭하면 Servers 프로젝트 아래에 톰캣 실행 환경 이름으로 폴더가 생성되어 있습니다.
이 폴더에는 톰캣 홈 디렉토리의 conf 폴더에서 복사해온 설정 파일들이 들어있는 것을 확인할 수 있습니다.  


반응형

'IT & Programming > 자바 웹개발 프로젝트' 카테고리의 다른 글

톰캣 Tomcat 설치하기  (4) 2016.02.13
자바 이클립스(eclipse) 설치하기  (2) 2016.02.12
자바 Java JDK 설치하고 환경변수 설정하기  (0) 2016.02.12
반응형

색체체계 색상환


색상환의 각 지점에 위치한 색상은 명도와 채도의 변화에 따라 다양한 톤으로 변화됩니다. 색의 수는 수천 가지로 확장될 수 있으며 여러 색채 학자들의 이론에 근거한 기본의 색의 수와 명도나 채도의 전개 범위에 다라 각기 다른 색체 체계로 표현할 수 있습니다.



미술이나 디자인에 대해서 전문적으로 배우지 않았어도 색상환에 대해서 알아두는 것은 색에 대한 감각을 익힐 수 있는 좋은 공부가 될 것입니다.
색상환에는 여러가지가 있으지만 대표적으로 먼셀표색계에 대해서 알아보겠습니다.


먼셀표색계


모든 사물을 디자인 하는데 색의 배색은 가장 중요한 요소중의 하나입니다. 배색을 잘하기 위해서는 색깔의 위치를 어느정도 알고 있어야합니다. 그래서 색상환을 알고 있는 것이 중요합니다.



먼셀의 표색계는 미국 화각 멘셀에 의해서 고안된 체계입니다. 먼셀의 색상은 레드, 엘로우, 그린, 블루, 퍼플의 R, G, B, Y, P 다섯까지 색상을 기본으로하며 10등분해서 100가지 색상으로 분할합니다.

우리가 RGB라고 부르는 것도 다섯가지에서 중요한 세 가지 색상인 레드(R), 그린(G), 블루(B)을 골라낸 것입니다.

[ 자료 참조 : 위키피디아 ]



먼셀 방식은 색의 삼요소라고 부르는 색상(Hue), 명도(Value), 채도(Chroma)를 사용해서 HV/C 방식으로 색을 표기합니다.

예를 들어서 5Y 8/10(HV/C)라고 표기하면 대표색 5번색인 노란색을 5Y로 표기한 것이며 명도는 8이고 채도는 10이라는 의미입니다.
명도의 경우에 숫자가 높을수록 명도가 높다고 이야기합니다.

색상(Hue)


색상은 레드, 엘로우, 그린, 블루, 퍼플이 기본색이 10등분 되어서 100가지 색상을 나타냅니다.
기본색이 레드(R), 엘로우(Y), 블루(B), 그린(G), 퍼플(P)이라면 중간색의 표기는 GY, RP와 같이 표기합니다.

명도(Value)


명도는 빛의 반사율에 따른 색의 밝고 어두운 정도를 표기합니다. 가장 이상적인 흑색은 0이며 백색은 10입니다.

채도(Chroma)


채도는 색의 순하고 탁한 정도를 나타냅니다. 무채색은 0이며 순수한 색상일수록 채도값은 올라갑니다.
무채색은 명도만 가지고 채도와 색상을 가지고 있지 않은 것을 이야기 합니다.




반응형

'IT & Programming > 디자인 일반' 카테고리의 다른 글

자료와 정보 그리고 지식에 대해서  (0) 2016.02.10
반응형

워드프레스 콘텐츠 작성시 페이지(Page)와 글(Post)을 구분해서 사용하자


워드프레스를 사용해서 글을 작성할 때 워드프레스 콘텐츠 타입을 크게 본다면 두 가지로 생각할 수 있습니다.
두 가지는 하나는 페이지(Page)이고 하나는 글(Post)입니다.
일반적으로 페이지(Page)는 회사 소개등 정적인인 내용을 구성할 때 사용하고, 동적인 블로그성 내용은 글(Post)로 작성하는 것이 좋습니다.




페이징 기능이란?


페이징 처리 기능은 아래 그림을 보면 바로 이해가 갈 것입니다. 페이징 처리 기능은 구글 화면과 같이 클릭을 해서 다음 페이지로 넘어가는 기능을 이야기합니다. 페이징 처리기능이란 용어는 페이지 네비게이션으로 IT 업계에서는 명명하기도 합니다.




요즈음에는 여러 블로그 시스템에서 페이징 기능을 특정 아이콘이나 이미지를 클릭해서 페이징 기능을 두는 대신에 스크롤을 내리면 동적으로 다음 블로그 내용들이 보여지는 방식으로 서비스를 구현하고 있습니다.


워드프레스 페이징 기능 적용의 묘(妙)


워드프레스의 페이징 기능은 여러가지 상황을 고려해 보아야합니다. 워드프레스의 버전과 어떤 테마를 사용하는지에 따라서 페이징 기능을 적용하는 방법이 다르기 때문입니다.

워드프레스의 태생은 작은 블로그 프로그램에서 시작이 되었습니다. 태생이 블로그이기 때문인지 과거 워드프레스 버전에서는 기본적으로 페이징 처리 기능이 페이지번호가 보이는 방식이 아니라 이전, 이후 정도의 페이지 기능 정도만 제공하고 있었습니다.

그래서 숫자가 보이는 페이징 기능을 구현하기 위해서는 페이징 플러그인으로 유명한 WP-PageNavi 플러그인을 설치해서 사용하는 경우가 많았습니다.
전세계적으로 백만건이상 설치된 WP-PageNavi 플러그인은 지금도 워드프레스에서 페이지 네비게이션 기능을 구현할 때 가장 많이 사용하는 플러그인입니다.




그렇지만 아래 화면과 같이 WP-PageNavi 플러그인을 설치한다고 해서 모든 일이 해결되는 것은 아닙니다.
WP-PageNavi 플러그인을 설치한 뒤에 자신의 워드프레스 테마 소스에서 functions.php 나 index.php 등 php 소스를 뒤져서 next_posts_link() 함수를 찾아서 아래 그림과 같이 변경해 주어야 했습니다.





테마가 변경될 때마다 페이징 소스를 수정해야하는 번거로움


워드프레스 설치시 기본적으로 제공되는 TwentyThiteen, TwentyFourteen 테마가 있습니다.
TwentyThiteen 테마까지는 그래도 아래 화면과 같이 next_posts_link 로 검색해서 찾으면 function.php 화일에 동일한 함수명으로 존재를 하였으나
TwentyFourteen 테마에서는 함수 이름마저 변경되었을 뿐아니라 작동 방식이 변경되었습니다.

[ TwentyThiteen 테마 fuctions 소스 ]





TwentyFourteen 테마에서는 functions.php 안에 페이징 기능의 소스가 있는 것이 아니라 template-tags.php 라는 별도의 파일로 inc 폴더안에 존재하게 됩니다. 



소스코드나 함수명도 변경되었습니다.



페이징 기능은 워드프레스 4.2.2와 TwentyFourteen 테마 조합으로


워드프레스 버전을 4.2.2이상 사용하고 기본 테마인 TwentyFourteen 테마를 사용한다면 WP-PageNavi나 별도의 페이징 플러그인을 설치하거나 PHP 소스코드를 수정하지 않아도 간단하게 설정이 가능합니다.


페이징 처리 실습하기


페이징 기능 실습환경은 워드프레스 버전은 4.2.2이상이고 테마는 TwentyForteen 로 구성하였습니다.
페이징 기능 사용을 위해서 관리자 화면의 왼쪽 사이트바 메뉴에서 설정 > 읽기 메뉴를 클릭합니다.



읽기 메뉴를 클릭하면 읽기 설정 화면이 나타납니다. 전면 페이지 표시 항목은 전면 페이지를 표시할 때 최근 글의 리스트를 보여주거나 정적인 페이지를 선택하는 기능입니다. 일단 테스트를 위해서 최근 글 항목에 체크합니다.

페이지당 보여줄 글의 수 항목은 기본적으로 10으로 세팅되어 있습니다. 한 페이지에서 몇 개의 블로그 글(POST)를 보여줄 것인지 설정하는 것입니다. 여기에 입력하는 숫자에 따라서 해당 숫자만큼의 글(POST)를 보여주고 나머지는 자동으로 페이징 표시가 화면에 디스플레이됩니다.




전면 페이지 표시 항목은 최근 글로 선택한 상태에서 페이지당 보여줄 글의 수 항목을 1로 변경하고 저장버튼을 클릭합니다.



저장버튼을 클릭한 뒤에 슈만의 웹사이트로 접속하면 아래와 같이 페이징 처리 기능이 나타나는 것을 확인할 수 있습니다.





가입형 워드프레스에서는?


현재 기준으로 확인하였을 때에 가입형 워드프레스 서비스인 워드프레스닷컴에서는 TwentyFourteen 테마에서 아래와 같이 동일하게 설정하지만 나타나는 페이징 결과는 다르게 나타납니다.

아래 화면은 설치형 워드프레스와 동일하게 페이지당 보여줄 글의 수를 1로 설정한 상태입니다. 페이지당 보여줄 글의 수를 1로 설정했기 때문에 페이지당 한 개의 블로그만 나타날 것입니다.



아래 화면을 보면 가입형에서는 설치형 워드프레스에서 나타난 것과 같이 페이지 번호는 나타나지 않고 이전글 버튼이 나타나는 것을 알 수 있습니다. 머지않아 가입형 워드프레스인 워드프레스 닷컴의 경우에도 버전업이 된다면 페이징 기능이 구현될 것입니다.






설치형 워드프레스 4.2.2 버전과 기본테마 TwentyThirteen의 조합은?


워드프레스 4.2.2 버전과 TwentyThirteen 테마의 조합으로는 페이징 기능이 다음과 같이 나타납니다.
여기에서는 페이지당 보여줄 글의 수를 2개로 설정하였습니다.



기본테마인 TwentyThirteen 테마 역시 페이징 기능이 페이지 번호로 출력되지 않고 이전 글로만 나타납니다. 이렇게 페이징 기능은 워드프레스 버전과 테마와 관계가 있습니다.





마지막으로 쓰는 비장의 방법은?


요즈음 개발되는 테마는 페이지 기능이 내장되어 있는 것도 있습니다.
그렇지만 자신의 워드프레스 버전과 테마가 지원을 하지 않는다면 플러그인을 설치하거나 소스코드를 수정해야 합니다.
플러그인 설치가 필요하다면 아래 플러그인을 설치해서 사용합니다.

WP-PageNavi과 WP PageNavi Style 플러그인


플러그인을 설치하기 위해서 워드프레스 관리자 화면의 왼쪽 사이드바에서 플러그인 추가하기 메뉴를 클릭합니다.


플러그인 검색화면에서 wp pagenavi를 입력하고 플러그인을 검색합니다. 검색된 플러그인에서 두 개를 설치할 것입니다.
첫번째 플러그인인 WP-PageNavi는 페이징 네비게이션 기능에 대한 플러그인이고, 두번째 WP PageNavi Style은 페이지 네이게이션의 모양 즉, 스타일을 바꾸는 플러그인입니다. 두 개를 모두 지금 설치하기 버튼을 클릭해서 설치해서 사용하면 됩니다.


WP-PageNavi 플러그인은 설정 > 페이지네비 메뉴에서 설정할 수 있습니다. 페이지네비 메뉴를 클릭합니다.




페이지 네비게이션 옵션에서 한 페이지에 보여줄 글(포스트)의 갯수를 정할 수 있습니다. 물론 이곳에서 설정을 저장한다고 WP-PageNavi 플러그인의 페이지 기능이 동작하지는 않습니다. 추가적으로 테마 소스를 수정해야 합니다. 테마 소스 수정은 아래 워드프레스 공식사이트 플러그인 설명 내용을 참고하여 수정바랍니다.





스타일은 WP PageNavi Style 플러그인에서


페이지네비의 스타일을 변경하려면 WP PageNavi Style 플러그인을 활성화해야 합니다.
플러그인을 활성화하면 왼쪽 사이드바에 PageNavi Style 메뉴가 생성됩니다. PageNavi Style을 클릭합니다.



이곳은 페이지 네이게이션의 스타일을 설정하는 화면입니다. 어떻게 사용자에게 보여지도록 하는지 디자인하는 곳이라 생각하면 됩니다.




스타일을 아래와 같이 변경해 보겠습니다. CSS3 PURPLE 항목을 선택했습니다.



아래 화면과 같이 변경된 것을 확인할 수 있습니다.




반응형

'워드프레스 > 워드프레스 플러그인' 카테고리의 다른 글

워드프레스에 구글 애드센스 광고 넣는 방법  (0) 2016.04.07
워드프레스 KBoard 게시판이 깨질때 조치방법  (4) 2016.01.26
트리 구조로 페이지 관리를 쉽게 Admin Menu Tree Page View 플러그인  (1) 2015.12.29
스팸 IP 주소 차단, IP Blocker Lite  (0) 2015.12.22
MailPoet으로 고객에게 뉴스레터 보내기  (0) 2015.12.14
반응형

세상의 변화, 그리고 스마트워크


요즈음에는 실버층이나 초등학생의 경우에도 대부분 모든 사람의 손에 기본적으로 스마트폰이 있습니다. 필요한 사람에 따라서는 몇 개의 스마트 디바이스를 들고 다니는 시대입니다. 아이폰 등장이후 스마트폰은 몇 년안에 세상의 풍경을 바꾸어 놓았습니다.

회사의 업무 또한 고정적인 장소에서 업무를 보는 시대를 넘어서 스마트워크 시대로 향하고 있습니다. 공공기관이나 정부가 스마트워크 시대를 위해서 여러가지 스마트워크 업무장소를 준비하고 있는 것도 앞으로의 미래의 상황을 준비하고 있는 것일 것입니다.



속도의 시대


하루가 다르게 시스템은 첨단을 향해 달리고 있고 기기는 소형화 지능화되고 있습니다. 실제 우리의 삶은 과거 시대보다 빨라졌고 속도감 또한 훨씬 빠릅니다. 예전에는 은행을 가서 줄을 서서 기다리다 은행 업무를 보았고 주식 투자를 하려고 해도 증권사에 가거나 집에서 PC를 켜고 홈트레이딩을 해야 했습니다.




그렇지만 지금은 스마트폰을 들고 다니면서 은행업무를 보고 스마트폰으로 주식거래를 합니다. 속도의 측면에서 본다면 혁신적인 발전입니다. 그런데 실제 과거보다 시간은 더 없어보입니다. 실제 삶에서 과거와 같은 삶의 여유는 없는 것이 사실입니다.


일의 우선순위


특히 회사에서 업무를 보거나 자신의 사업을 하는 사람들의 경우에는 집중해야하는 업무시간에도 여러가지 일들이 떠오르거나 생기기도 합니다. 하다못해 각종 카드대금, 고지서 납부, 동기모임 장소 예약하기, 영화예매하기 등의 일들은 나의 우선순위상에서 중요한 일들을 밀어내고 자리를 차지하기도 합니다.

이런 일들은 꼭 해야하는 일이지만 우선순위에서는 중요도에서는 밀리는 일들입니다. 일에 있어서 우선순위는 현재 자신이 하고 있는 업무가 되거나 미래를 위해서 자신이 준비하고 있는 그 무엇을 위한 시간이 될 것입니다.
그런데 이런 일종의 잡무(잡무라고 표현 한 것이 너무한 것 같기도 합니다.)들이 중요한 일을 하는 중간중간에 끼여들면서 하루라는 시간을 놓고 살펴보면 잡무때문에 일의 효율성이 떨어지는 경험을 여러번 하곤 했습니다.

특히, 중요한 일을 하고 있을때 갑자기 떠오른 꼭 필요하지만 중요도는 낮은 잡무는 어딘가에 기록해놓지 않으면 잊어버리기도 합니다.


메모와 기록의 힘


인간의 두뇌는 한번에 한 가지 생각밖에 못하는 특징을 가지고 있습니다. 따라서 무언가에 집중하고 있을 때 일종의 잡무에 대한 생각이 떠오른다면 집중하고 있는 일을 그르치게 됩니다. 따라서 이 때는 어디엔가 기록해 두는 것이 현명한 방법입니다.
잡무로 복잡해진 머리를 해방시키는 방법은 기록하는 것입니다.

저도 느끼는 것이지만 어디엔가 기록해두면 머리가 편안해지는 경험을 자주하곤 합니다.



그렇다면 어디에 기록할 것인가?


그렇다면 어디에 메모나 기록하는 것이 좋을 것인가 생각을 해보고자 합니다. 일단 노트와 펜만 있다면 손으로 적어서 기록하는 방법이 가장 간단하고 편리한 방법입니다. 인간이 손에 펜을 들고서 무언가를 쓸때, 손으로 쓰는 행위는 뇌의 신경을 자극해서 기억력을 향상시킵니다. 그래서 초서라는 학습법은 시대를 막론하고 유행하고 있는 것입니다. 중국의 모택동은 초서를 통해서 책을 써가면서 공부했다고 하니, 손을 움직여서 쓰는 행위는 훌륭한 학습법중에 하나일 것입니다.




노트와 펜을 이용한 아날로그적인 기록도 좋지만 요즈음에는 IT 기술을 활용한 여러가지 훌륭한 메모와 기록도구들이 있습니다. IT 기술을 활용한 프로그램으로된 기록 도구의 장점은 부피나 무게가 나가지 않으며 자료가 많이 쌓여있을 때 검색과 확인이 쉽다는 점입니다. 비록 노트에 글을 적는 것은 아니지만 결국 손을 움직이기 때문에 뇌에 좋은 자극을 주는 것은 동일할 것입니다.


에버노트와 구글독스 그리고 구글킵

IT 기술을 활용한 대표적인 기록 도구로는 에버노트가 있습니다. 에버노트는 고정적이 유료 사용자가 많을 정도로 사용자들이 선호하는 프로그램입니다. 근래에 에버노트의 상징인 코끼리는 기억력을 상징하기도 합니다. 에버노트는 코끼리는 절대 잊지 않는다(An elephant never forgets) 속담에서 착안을 해서 실리콘밸리의 필리빈이 창업한 회사입니다.



에버노트와 함께 구글독스도 훌륭한 기록 도구중에 하나입니다.



그렇지만 근래에 런칭한 구글킵(Google Keep)은 간편성 때문에 요즈음 제가 선호하는 프로그램중의 하나가 되었습니다.

저의 경우에는 기록의 내용의 분량이 많은 경우에는 에버노트와 구글독스를 사용하고 있고, 간단하게 떠오르는 생각을 메모하거나 간단한 기록 작업은 구글킵을 활용하고 있습니다.


스피드에 중점을 둔 앱 구글킵(Google Keep)


에버노트와 구글독스도 훌륭한 메모와 기록의 도구이지만 오늘의 할일등 간단한 메모용도로 사용하기에는 구글킵이 가장 적합한 도구라는 생각합니다.



그 이유는 구글킵을 사용해보면 알 수 있지만, 구글킵은 신속성과 간편성에 바탕을 두고 개발된 앱처럼 꼭 필요한 기능만을 넣어서 바로 사용할수 있도록 구성되어있기 때문입니다.
별도의 절차없이 그저 스마트폰에서 구글킵을 실행하면 바로 입력이 가능합니다.
구글킵은 구글 계정만 있다면 바로 사용할 수 있는 도구입니다.


스마트워크에 비서가 된 구글킵


저는 구글킵을 비서로 활용하고 있습니다. 구글킵은 업무중에 떠오르는 아이디어를 적는 기록의 공간이 되기도 하고, 또한 꼭 처리해야하는 잡무들이 있을 때는 집중하던 일을 멈추지 않고 구글킵 비서를 불러서 할 일을 비서에게 맡겨버립니다.
물론 비서인 구글킵이 일을 처리하지는 않습니다. 그렇지만 비서에게 맡겨놓으면 집중하고 있는 일에 집중할 수 있는 효과를 볼 수 있으며, 집중하는 일을 마친뒤에 비서를 불러서 맡겨둔 일을 처리하면 됩니다.

일반적으로 비서를 채용하려면 비싼 비용을 지불해야하지만 구글킵은 비용을 요구하지도 않습니다. 스마트워크를 하는 사람이라면 꼭 채용해야하는 무료 비서인 셈입니다.     





클라우드 환경을 지원하는 구글킵



또한 구글킵의 편리한 기능 중의 하나는 클라우드 환경에서 동작을 하기 때문에 작업의 동시성이 확보된다는 점입니다. 스마트폰에서 작성을 해도 노트북이나 아이패드에서 동일한 내용을 바로 확인할 수 있습니다. 구글은 구글 계정에 가입한 사용자에게 Gmail등 구글 계정 관련된 프로그램에 15GB 용량을 무상으로 제공합니다. 만약에 부족하다면 금액을 지불하고 용량을 증설하면 됩니다. 그렇지만 일반인에게 15GB나 되는 용량은 증설하지 않고도 사용하기에 충분한 용량입니다.

그럼, 다음 시간에는 본격적으로 실제 구글킵을 설치하고 활용하는 방법에 대해서 공부해보도록 하겠습니다.


반응형

'블로그, SNS > 구글' 카테고리의 다른 글

구글앱스 for Work 스마트워크 알아보기  (0) 2016.02.23
구글 애널리틱스 웹로그분석 설치 및 사용법  (0) 2016.01.21
구글 애드센스 가입 및 광고 만들기  (4) 2016.01.19
구글 트렌드로 검색 관심도 및 점유율 알아보기  (0) 2016.01.15
구글 계정 보안 강화는 구글 OTP 2단계 인증으로  (0) 2016.01.12
반응형
지난 시간에 티스토리에서 사이트맵 화일인 sitemap.xml 화일을 생성하는 방법을 배웠습니다. 이번 시간에는 생성된 사이트맵 화일을 티스토리에 첨부해서 사이트맵 첨부화일일 sitemap.xml 의 티스토리내에 경로를 확인해서 구글 웹마스터 도구에 제출하는 방법을 알아보도록 하겠습니다.

관련 포스팅



티스토리에서 사이트맵 주소 알아내기


이제 생성된 sitemap.xml 화일을 티스토리에 파일로 첨부하고 구글 웹마스터 도구에 제출할 티스토리 sitemap.xml의 화일 경로를 알아낼 차례입니다. 티스토리에 글을 작성하는 본문 편집기 화면에서 파일 버튼을 클릭합니다.



파일찾기 버튼을 클릭해서 sitemap.xml 화일을 아래 화면과 같이 첨부한 뒤에 등록 버튼을 클릭해서 티스토리 글본문에 첨부합니다.



아래와 같이 글 본문에 첨부된 것을 확인할 수 있습니다.




이제 티스토리 본문 편집기 오른쪽 상단에 있는 HTML 보기에 체크를 합니다. HTML 체크를 하면 글 본문이 HTML 형식으로 변경될 것입니다.



파일을 첨부한 곳으로 편집기 화면을 이동하면 티스토리 상에서 sitemap.xml 화일 경로가 아래와 같이 나타날 것입니다. 경로중에서 cfile이후부터 .xml까지 복사해둡니다.



즉 아래 경로에 붙이면 첨부화일의 전체 URL이 됩니다.

http://shuman.tistory.com/attachment/복사한경로를 여기에 붙입니다.

구글 웹마스터 도구에서 사이트맵 제출시 사용할 경로는 => attachment/복사한경로 입니다.



구글 웹마스터 도구에 티스토리 사이트맵 제출하기

 
이제 남은 작업은 구글 웹마스터 도구에 접속해서 티스토리 사이트맵을 제출하는 일입니다. 구글 웹마스터 도구 Search Console 화면에 접속합니다. 아직까지 사이트맵이 제출되지 않았습니다. 오른쪽에 Sitemaps 메뉴를 클릭합니다.





크롤링 > Sitemaps 관리 화면에 들어왔습니다. 오른쪽에 SITEMAP 추가/테스트 버튼을 클릭합니다.


URL을 입력할 수 있는 입력창이 뜹니다. 이제 이곳에 티스토리에 첨부한 sitemap.xml 첨부화일 경로를 입력하면 됩니다. 




미리 복사해둔 티스토리 사이트맵 경로를 attachment부터 붙여넣은 뒤에 Sitemap 제출 버튼을 클릭합니다.



사이트맵을 제출했다는 메시지가 나옵니다. 페이지를 새로고침합니다. 링크를 클릭합니다.


페이지가 새로 고침 되면서 티스토리 사이트에서 웹페이지 2,669 개를 제출한 현황 화면이 나타납니다. 아래 화면에서와 같이 제출에 처리된 날짜가 표시되면 사이트맵이 정상적으로 제출된 것입니다. 아직 색인 생성은 접수중에 있습니다. 시간이 지나고 구글 색인 로봇이 색인을 생성할 것입니다.




반응형

'블로그, SNS > 티스토리' 카테고리의 다른 글

티스토리에서 구글 애널리틱스 사용하기  (0) 2016.02.04
티스토리에 구글 애드센스 광고 게재하기  (0) 2016.01.20
Check-Domains의 XML Sitemap Generator로 사이트맵 만들기  (0) 2015.12.27
A1 Sitemap Generator로 티스토리 사이트맵 만들기  (6) 2015.12.24
티스토리를 구글 웹마스터 도구에 등록하기  (0) 2015.12.23

+ Recent posts

티스토리툴바