티스토리 뷰

XWidget 은 휑~한 테스크탑을 꾸미도록 도와주는 위젯 프로그램입니다. 윈도우 비스타부터 추가된 '사이드바'와 같이 바탕화면에 시계나 달력, 사진, 날씨 등의 정보를 띄워서 볼 수 있도록 해주는 프로그램들 중 하나입니다.
소개해드릴 XWidget 은 제가 접해봤던 다른 위젯 프로그램들과 달리 아주 가볍고, 매우  단순해서 누구나 쉽게 자신의 원하는 형태로 바꿔서 쓸 수 있는 장점이 있습니다.

이러한 장점은 XWidget 자체에서 지원하는 '비주얼 에디터(Visual Editor)' 덕분에 마우스 클릭 몇번으로 금방 위젯 하나를 만들 수 있습니다.
아래에 직접 소개할 위젯은 현재 사용하는 CPU 사용량을 보여주는 위젯으로, XWidget의 가장 기초적이면서도 핵심만 담고 있어서 아주 쉽게 개념을 이해하는데 도움이 될겁니다.


  1. 위젯 생성

    XWidget을 설치하면 트레이에 있는 XWidget 아이콘에 오른쪽 버튼을 눌러 'Create Widget' 을 선택합니다.


  2. 위젯 설정

    비주얼 에디터가 실행되면서 기본적인 위젯 이름과 폴더명, 기본 템플릿을 설정할 수 있습니다.
    각각 이름을 정해주고, 템플릿은 기본으로 선택하고 확인을 누릅니다.


  3. 초기화

    'Blank'를 선택했지만 기본 텍스트박스가 하나 있어서 이걸 지워줍니다.


  4. CPU 코어 추가하기

    이제 완전히 비어버린 위젯에 코어를 추가 해야합니다.
    코어는 XWidget에서 핵심적인 사항이고 모든 위젯에 반드시 들어가야 하는 녀석입니다. 그래서 코어에 대해서는 확실하게 이해를 하고 넘어가야 합니다.

    코어는 위젯에서 핵심적인 사항들을 모두 처리해주는 컴퓨터 같은 녀석입니다. CPU 사용량을 알기 위해서 위젯을 만드는 사용자가 프로그래밍해서 CPU가 얼마 사용되고 있고 이걸 백분률로 다시 계산하고 할 필요가 없습니다. 마찬가지로 GMail 계정에 새로운 메일이 몇개 왔는지 확인하려고, 해당 계정 접속하고 로그인 하고 메일 정보를 가져와서 내용을 분석 해서 새로운 메일이 몇개인지 알아내는 프로그램 코드를 짜지 않아도 일련의 작업을 코어가 다 처리 해 주기 때문에 우리는 코어가 주는 정보만 표시하도록 하면 됩니다. (물론 원하는 위젯으로 작동하게 하려면 다소의 프로그래밍이 필요하긴 합니다. 버튼 동작 등)

    이 예제에서는 CPU 상태의 사용량을 표시하기 위해, CPU 상태를 활용할 수 있도록 CPU Core를 추가 합니다.
    추가하려면 CpuCore를 더블클릭 합니다.


  5. 텍스트박스 추가하기

    CPU의 사용량을 표시하기 위해 텍스트 박스를 추가 합니다.
    Componetns 에서 Text 항목을 드래그&드롭으로 끌어다 적절한 위치에 놓습니다.


  6. CPU 코어 바인딩[각주:1]

    두번째 핵심 포인트!
    텍스트 박스에 CPU 정보를 표시하기 위해 CPU Core 를 바인딩 해줘야 합니다.
    아래 사진처럼 코어는 cpucore1 을 선택하고, 내용에는 CPU: %Percent% 를 입력합니다.

    프로그래밍 하시거나 눈치 빠르신 분은 눈치 채셨겠지만, %Percent 이 단어는 예약어로 CPU코어에서 CPU상태를 분석해서 CPU 사용량을 백분률로 나타낸 값으로 %Percent 라는 글자와 해당 값이 치환 됩니다. 물론, %Percent 앞 뒤의 글자들은 예약어가 아니기 때문에 텍스트 박스에 글자 그대로 표시 됩니다.
    다른 예약어를 보시려면 'Add tag' 를 클릭해보세요.


  7. (선택) 폰트 색상 변경하기

    폰트 색상을 하얀색으로 설정합니다. 보통 배경화면이 어두운 색상이 많기 때문에 배경화면 위에 떠 있어야 하는 위젯으로서 검은색 글자는 배경과 같이 뭍혀서 안보이기 때문에 색상을 변경합니다.
    물론! 자신의 배경이 밝은색이라면 검은색으로 해야겠죠.

    비주얼 에디터를 살펴보면 아시겠지만, 각각 항목들을 클릭해서 스타일과 효과를 다르게 적용할 수 있습니다.


  8. 프로그래스바 추가

    텍스트로 표시하는것도 좋지만 눈으로 알기 편하게 움직이는 그래프로 표시하는 것도 좋겠죠?
    그걸 위해서 프로그래스바를 추가 합니다. 마찬가지로 드래그&드롭으로 가져다 놓고 적절하게 위치와 크기를 설정 합니다.

    또한 텍스트와 마찬가지로 바인딩 설정을 해줘야 하는데, 프로그래스바의 경우 텍스트박스처럼 다른 글자를 적으면 안됩니다.
    왜냐면 프로그래스바는 말 그대로 수치를 가지고 그래프를 조절하기 때문에 %Percent 테그만 추가 합니다.

    (참고로, 프로그래스바의 경우 백분율을 기준으로 100일 경우 프로그래스바가 가득찬 상태이고 0 일 경우 비어있는 상태 입니다.)


  9. (선택) 프로그래스바 색상 변경하기

    이 부분도 마찬가지로 배경의 색상에 뭍히지 않기 위해 설정 해줍니다. 프로그래스바의 경우 배경과 전경색을 바꿀 수 있습니다. 각각 설정해 줍니다.


  10. 실행

    'Run' 버튼을 클릭하면 실제 모습을 확인할 수 있습니다. 



다른 여러가지 설정을 만져보면서 자신만의 위젯을 만들어 보세요~


  1. 바인딩(Binding) : 프로그래밍 용어로 어떤 대상에 등록 또는 연결하는 식으로 '구속' 시키는 것을 추상적으로 일컫는 용어 입니다. 기본적으로, 대리인을 내세우듯이, A 대상에 B 를 바인딩 시키면 A는 B와 동일 하게 여겨져, B의 값이 변하면 A의 값도 변하는 것이죠. XWidget에서는 코어를 바인딩해서 코어의 상태가 변하면 해당 바인딩 된 대상(텍스트박스나 프로그래스바)의 내용도 변하게 되는 것입니다. [본문으로]
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
«   2024/03   »
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 30
31
글 보관함