gnome-devel-docs master - en to ko translation catalogue (1983 entries)

note: (itstool) path: info/desc
en: Learn how to lay out UI components, like Images and Labels.
ko: 그림과 레이블 같은 사용자 인터페이스 구성요소를 어떻게 배치하는지 알아보겠습니다.

note: (itstool) path: page/title
en: 2. Welcome to the Grid
ko: 2. Grid를 쓰러 오셨어요?

note: (itstool) path: synopsis/p
en: This tutorial will show you how to create basic widgets, or parts of the GNOME user interface, like Images and Labels. You'll then learn how to arrange them all in a Grid, which lets you put widgets exactly where you want them.
ko: 이 따라하기 지침서에서는 기본 위젯 또는 그림 및 레이블 같은 그놈 사용자 인터페이스 일부를 만드는 방법을 보여드리겠습니다. 그 다음, 해당 위젯을 놓고 싶은 곳에 정확히 놓게 하는 그리드로 정돈하는 방법을 알아보겠습니다.

note: (itstool) path: note/p
en: Have you taken <link xref="hellognome.js">the first tutorial in this series</link> already? You'll want to do so before continuing.
ko: <link xref="hellognome.js">이 시리즈의 따라하기 첫번째</link>를 해보셨쥬? 계속 진행하기전에 해보는게 좋아요.

note: (itstool) path: section/title
en: Going native
ko: 네이티브로 갑시다

note: (itstool) path: section/p
en: In the last tutorial, we created what was basically a GNOME window frame for a web app. All the GNOME-specific code we needed to learn revolved around putting the WebView -- the widget containing our application -- into an ApplicationWindow, and telling it to display. The application itself was written in HTML and JavaScript, just like most pages on the web.
ko: 이전 따라하기에서, 웹 앱용 그놈 기본 창 프레임을 만들었습니다. 우리가 배울 모든 그놈 코드는 ApplicationWindow의 WebView 주변에 두고 표시하게 했습니다. 프로그램 자체는 웹의 대부분 페이지처럼 HTML과 JavaScript로 작성했습니다.

note: (itstool) path: section/p
en: This time, we're going to use only native GNOME widgets. A widget is just a thing, like a checkbox or picture, and GNOME has a wide variety of them to choose from. We call them "native" widgets to distinguish them from things like the button and header in the web app we wrote. Because instead of using web code, these are going to be 100 percent GNOME, using GTK+.
ko: 이제 자체 그놈 위젯을 사용하겠습니다. 위젯은 그냥 확인 상자 또는 그림 같은거고, 그놈에는 선택해 볼 수 있는 다양한 위젯이 있습니다. 우리가 작성했던 웹 앱의 단추 및 헤더 같은걸 따로 구분할 목적으로 "자체" 위젯이라고 하겠습니다. 웹 코드를 사용하는 대신, GTK+로 완전한 그놈 프로그램을 이루기 때문입니다.

note: (itstool) path: note/p
en: GTK+ stands for "GIMP Toolkit". It's like a toolbox of widgets that you can reach into, while building your applications. It was originally written for <link href="http://www.gimp.org/">the GIMP</link>, which is a free software image editor.
ko: GTK+는 "GIMP Toolkit"입니다. 프로그램을 구성하는 동안 여러분이 접근할 수 있는 위젯의 도구함 같은 존재입니다. 원래는 자유 소프트웨어 그림 편집기 <link href="http://www.gimp.org/">김프</link>를 작성하려고 만들었었죠.

note: (itstool) path: section/title
en: Setting up our application
ko: 프로그램 구성

note: (itstool) path: section/p
en: Before we dig out any widgets from the GTK+ toolbox, we first need to write the basic boilerplate code that our application requires.
ko: GTK+ 도구함의 위젯을 찾아보기 전에, 우선 프로그램에서 필요한 기본 준비 코드를 작성해야합니다.

note: (itstool) path: section/p
en: This part always goes at the start of your code. Depending on what you'll be doing with it, you may want to declare more imports here. What we're writing today is pretty basic, so these are all we need; Gtk for the widgets, using the stable '3.0' API.
ko: 이 부분은 늘 나타나는 코드의 시작 부분입니다. 이 코드로 어떤 프로그램을 작성하느냐에 따라 여기에 더 가져올 항목을 선언할 수도 있습니다. 지금 작성하는 부분은 좀 기본적이기에, 하여간 우리가 필요한 건 다 갖추었습니다. 위젯에 필요한 GTK입니다. '3.0' 안정 API를 활용하세요.

note: (itstool) path: section/p
en: Speaking of which:
ko: 말 나온 김에:

note: (itstool) path: section/p
en: This is the start of the application itself, and the _init function which creates it. It tells _buildUI to create an ApplicationWindow, which we're going to call _window, and it tells our window to present itself whenever needed.
ko: 프로그램 자체를 시작하는 부분이고 _init 함수에서 프로그램을 구성합니다. _buildUI에서 _window를 호출할 ApplicationWindow 객체를 만들게 하고, 필요할 때 창을 나타내게 합니다.

note: (itstool) path: section/p
en: This part, again, is pretty much copy-and-paste, but you always want to give your application a unique name.
ko: 다시 말해, 이 부분을 막 갖다 붙여넣긴 했지만, 이 프로그램에 언제든 고유한 이름을 줄 수 있습니다.

note: (itstool) path: section/p
en: Finally, we start off the _buildUI function by creating a new ApplicationWindow. We specify that it goes with this application, that it should appear in the center of the screen, and that there should be at least 10 pixels between the outside edge and any widgets inside of it. We also give it a title, which will appear at the top of the window.
ko: 마지막으로 _buildUI 함수로 새 ApplicationWindow 객체를 만들겠습니다. 이 프로그램에서 창을 화면 가운데에서 나타나게 하고 바깥 가장자리는 최소한 10 픽셀의 간격을 두고 어떤 위젯이든 이 안에 두도록 하겠습니다. 또한 창 상단에 뜨는 제목도 넣겠습니다.

note: (itstool) path: section/title
en: Reaching into the GTK+ toolbox
ko: GTK+ 도구함 찾아가기

note: (itstool) path: section/p
en: What widgets should we use? Well, let's say we want to write an application that looks like this:
ko: 어떤 위젯을 사용할까요? 일단 다음과 같은 프로그램을 작성한다고 가정하겠습니다:

note: (itstool) path: section/p
en: We're going to need, at the very least, a picture and a text label to go with it. Let's start with the picture:
ko: 최소한, 필요한걸 그림과 텍스트 레이블이라고 하죠. 그림 놓기로 시작해보겠습니다:

note: (itstool) path: section/p
en: You can download the image file used in this example <link href="https://live.gnome.org/TarynFox?action=AttachFile&amp;do=get&amp;target=gnome-image.png">here</link>. Be sure to put it in the same directory as the code you're writing.
ko: 이 예제에서 사용하는 그림 파일은 <link href="https://live.gnome.org/TarynFox?action=AttachFile&amp;do=get&amp;target=gnome-image.png">여기</link>에서 받을 수 있습니다. 작성 중인 코드대로 동일한 디렉터리에 그림을 두었는지 확인해보십시오.

note: (itstool) path: section/p
en: That code adds in the label beneath. You can see how we create widgets, here; each one is a part of Gtk, and we can give it properties that customize how it behaves. In this case, we set the Image's file property to be the filename of the picture we want, and the Label's label property to be the sentence that we want beneath the picture.
ko: 이 코드에서 그림 하단에 레이블을 추가합니다. 위젯을 만드는 방법을 볼 수가 있지요. GTK의 일부분이고, 바꿀 모양으로 속성 값을 줄 수 있습니다. 여기서는 그림의 file 속성을 우리가 원하는 그림의 파일 이름으로 넣었고 레이블의 label 속성은 그림 아래에 표시할 문장을 넣었습니다.

note: (itstool) path: note/p
en: Yes, it sounds redundant for a Label to have a label property, but it's not. Other widgets that contain text have a label property, so it's <em>consistent</em> for the Label widget to have one too.
ko: 예 레이블의 label 속성은 뭔가 반복된 것 같죠. 하지만 그렇진 않습니다. 텍스트를 가진 다른 위젯에도 label 속성이 있어서, 문장을 가진 레이블 위젯에 대해 <em>일관된</em> 양상을 취하고 있죠.

note: (itstool) path: section/p
en: We can't just add these widgets to our window in order, though, the same way HTML elements appear in the order you write them. That's because an ApplicationWindow can only contain one widget.
ko: 창에 위젯을 추가할 때 이렇게 만 할 수 있는게 아니라, 위젯을 작성할 때 HTML 구성 요소로 동일한 방식으로 작성하여 나타낼 수 있습니다. ApplicationWindow에서 위젯 하나만 넣을 수 있는 이유가 됩니다.

note: (itstool) path: section/p
en: How do we get around that? By making that one widget a container widget, which can hold more than one widget and organize them inside it. Behold: The Grid.
ko: 어떻게 할까요? 이 위젯을 컨테이너 위젯으로 만들면, 위젯에 다른 위젯을 하나 이상 더 넣을 수 있습니다. 이걸 그리드라 하죠.

note: (itstool) path: section/p
en: We're not giving it any properties yet. Those will come later, as we learn how to use the Grid's powers. First, let's attach the Image and Label we made to our Grid.
ko: 아직은 속성 값을 넣지 않았습니다. 일단 그리드의 막강한 기능을 사용하는 법을 배우고 나서 속성 값을 넣겠구요. 우선, 앞에서 구성한 그림과 레이블을 그리드에 넣어보겠습니다.

note: (itstool) path: section/p
en: This code looks awfully complicated, but it's not. Here's what those numbers mean:
ko: 이 코드는 억수로 복잡해보이지만, 그렇지가 않아요읭? 여기 나타난 숫자는:

note: (itstool) path: item/p
en: The <em>first</em> number is what left-to-right position to put things in, starting from 0. Any widget that uses a 0 here goes all the way to the left.
ko: <em>첫번째</em> 숫자는 왼쪽에서 오른쪽으로 어떤 위치에 둘거냐를 말하는데, 0부터 시작합니다. 여기에 0 값이 들어가면 왼쪽에 넣겠다는 의미죠.

note: (itstool) path: item/p
en: The <em>second</em> number is what top-to-bottom position to put a given widget in, starting from 0. The Label goes beneath the Image, so we give the Image a 0 and the Label a 1 here.
ko: <em>두번째</em> 숫자는 위에서 아래로 어떤 위치에 둘거냐를 말하는데, 역시 0부터 시작합니다. 레이블이 그림 아래로 가니까, 그림에는 이 자리에 0 값을 주고, 레이블은 1 값을 줍니다.

note: (itstool) path: item/p
en: The <em>third</em> and <em>fourth</em> numbers are how many columns and rows a widget should take up. We'll see how these work in a minute.
ko: <em>세번째</em>와 <em>네번째</em> 숫자는 행열(열-행 순) 위젯 갯수를 몇개로 둘지 나타냅니다. 조금 이따가 어떻게 동작하는지 보겠습니다.

note: (itstool) path: section/p
en: Now that we've created the Grid and attached all our widgets to it, we add it to the window and tell the window to show itself, as the last part of the _buildUI function. As always, to finish up we create a new instance of the application's class and tell it to run.
ko: 이제 모든 위젯을 넣은 그리드를 만들어서 창에 추가했고, _buildUI 함수의 마지막 부분에서 창에서 그동안 추가한 위젯을 표시하도록 했습니다. 언제든지 마무리할 때는 프로그램 클래스의 새 인스턴스를 만들고 실행을 지시합니다.

note: (itstool) path: section/p
en: Save your application as welcome_to_the_grid.js. Then, to run your application just open a terminal, go to the directory where your application is at, and type
ko: 프로그램을 welcome_to_the_grid.js로 저장하시고요. 프로그램을 실행하려면 그냥 터미널을 여시고, 프로그램이 있는 디렉터리로 가셔서 다음 명령을 쳐 넣으세요

note: (itstool) path: section/p
en: There we go! But wait. That doesn't look right. Why is the Label crammed up next to the Image like that? That doesn't look as nice, and it makes it harder to read. What can we do about this?
ko: 아 돌아가네요! 어 근데 잠깐만요? 제대로 나타나질 않네요. 왜 레이블이 그림 옆으로 쑤셔들어갔을까요? 별로 좋아보이지 않고, 알아보기가 어렵네요. 이걸 어떻게 할 수 있을까요?

note: (itstool) path: section/title
en: Tweaking the Grid
ko: 그리드 조절

note: (itstool) path: section/p
en: One thing we can do, is we can give the Label a margin_top property when we create it. This works sort of like setting a margin for an HTML element using inline CSS styling.
ko: 여기서 우리는 우리가 레이블을 만들 때 margin_top 속성 값을 줄 수 있습니다. 인라인 CSS 스타일로 HTML 구성 요소에 여백 값을 주는 일과 비슷하죠.

note: (itstool) path: section/p
en: Of course, if we do that then if we replace the Label with something else -- or add in another widget -- then we have to repeat the margin_top on it too. Otherwise we end up with something like this:
ko: 물론, 이렇게 하고 나면 레이블을 다른 모양새로, 또는 다른 위젯으로 바꿀 때 margin_top 속성 값 설정을 반복해야합니다. 아니면 다음과 같이 끝냅니다:

note: (itstool) path: section/p
en: We could give the Image a margin_bottom property, but that won't work when the new Label is in a separate column. So how about we try this instead:
ko: 그림에 margin_bottom 속성 값을 줄 수 있지만, 새 레이블을 개별 칸에 넣을 경우 동작하지 않습니다. 그래서 대신, 다음과 같이 해보겠습니다:

note: (itstool) path: section/p
en: That makes it so that there are always 20 pixels of space in between each horizontal row.
ko: 수평행에 배치했을 때 사이 여백을 항상 20 픽셀로 두도록합니다.

note: (itstool) path: note/p
en: Yes, you can also set the column_spacing property on a Grid, or the margin_left and margin_right properties on any widget. Try them out, if you like!
ko: 예, 그리드에서 column_spacing 속성 값을 설정하든지 각 위젯의 margin_left, margin_right 값을 설정할 수도 있습니다. 원하면 해보세요!

note: (itstool) path: section/title
en: Adding more widgets
ko: 위젯 또 추가하기

note: (itstool) path: section/p
en: If we did want to add a second Label, how would we do it so that it actually looked like it belonged there? One way is to center the Image on top, so that it's above both Labels instead of just the one on the left. That's where those other numbers in the Grid's attach method come in:
ko: 두번째 레이블을 또 추가하고 싶다면 말이죠. 우리가 그리드에 어떻게 넣어서 그렇게 보이게 했을까요? 방법은 상단 그림을 가운데로 두어서 레이블의 왼편으로 가는 대신 두 레이블의 위로 가게 했습니다. 다음 내용은 그리드에 레이블을 또 넣는 방법을 나타냅니다:

note: (itstool) path: section/p
en: After we create the second Label, we attach it to the Grid to the right of the first Label. Remember, the first two numbers count columns and rows from left to right and top to bottom, starting with 0. So if the first Label is in column 0 and row 1, we can put the second in column 1 and row 1 to put it to the right of the first Label.
ko: 두번째 레이블을 만들고 나면 처음 레이블의 오른쪽으로 가도록 그리드에 붙여넣습니다. 처음 숫자 두개는 열-행 숫자를 각각 왼쪽에서 오른쪽순으로 그리고 위에서 아래 순으로 0번부터 센다는 점을 기억하시죠. 그러니까 첫번째 레이블이 0번째 칸, 1번째 줄(첫번째 칸, 두번째 줄)에서 시작하면, 두번째 레이블은 처음 레이블의 오른쪽에 가도록 1번째 칸, 1번째 줄(두번째 칸, 두번째 줄)에 둘 수 있습니다.

note: (itstool) path: section/p
en: Note the number 2 in the attach statement for the Image. That's what does the trick here. That number is how many columns the Image spans, remember? So when we put it together, we get something like this:
ko: 여기서 붙여넣기 구분의 숫자 2는 그림에 해당합니다. 여기서 사용하는 꼼수에서 할 일입니다. 해당 숫자 값은 그림이 칸을 얼마나 차지하겠느냐는 의미입니다. 그래서 이걸 같이 두면, 다음과 같이 나타납니다:

note: (itstool) path: section/p
en: There are two things you should take note of, here.
ko: 알아둘 게 두가지가 있는데요.

note: (itstool) path: item/p
en: Setting the Image to span two columns doesn't stretch the picture itself horizontally. Instead, it stretches the invisible box taken up by the Image widget to fill both columns, then places the Image in the center of that box.
ko: 그림에 두칸을 차지하도록 설정한다고 해서 그림 자체가 수평으로 쭉 늘어나진 않아요. 대신 그림 위젯 뒤의 보이지 않는 상자가 늘어나서 두 칸을 채우고, 그림은 상자 한가운데로 갑니다.

note: (itstool) path: item/p
en: Even though we've set the Grid's row_spacing and the ApplicationWindow's border_width properties, we haven't yet set anything that puts a border in between the two Labels. They were separate earlier when the Image was in only one column, but now that it spans both GNOME doesn't see a reason to keep them apart.
ko: 그리드 row_spacing 속성 값과 ApplicationWindow의 border_width 속성 값을 설정하긴 했지만, 레이블 둘 사이의 테두리에 대한 그 어떤 값도 설정하지 않았습니다. 그림이 한 칸만 차지했을 때는 따로 나뉘어져있었지만, 그놈 그림이 두 칸을 차지한 이후로는 두 레이블이 따로 떨어져 보일 이유를 찾아볼 수가 없죠.

note: (itstool) path: section/p
en: There are at least three ways we can get around that last one. First, we can set a margin_left or margin_right on one of the Labels:
ko: 마지막 문제를 해결할 수 있는데는 최소한 세가지 방법이 있습니다. 우선 레이블 중 하나에 margin_left 또는 margin_right 값을 설정할 수 있습니다:

note: (itstool) path: section/p
en: Second, we can set the Grid's column_homogeneous property to true.
ko: 두번째로, 그리드의 column_homogeneous 속성 값을 true로 설정할 수 있고요.

note: (itstool) path: section/p
en: That makes it look something like this:
ko: 이렇게 하면 다음과 같이 나타납니다:

note: (itstool) path: section/p
en: And third, we can set the Grid's column_spacing property, the same way we set its row_spacing.
ko: 그리고 세번째로는, 그리드의 column_spacing 속성 값을 설정하는데요. row_spacing 속성 값 설정 방식과 동일합니다.

note: (itstool) path: section/p
en: That makes it look like this:
ko: 이렇게 하면 다음과 같이 나타나죠:

note: (itstool) path: section/title
en: Using stock images
ko: 스톡 그림 사용

note: (itstool) path: section/p
en: GNOME has a lot of stock images on hand already, that we can use if we don't feel like creating our own or if we want a universally-recognized icon. Here's how we create a stock image, compared to how we create a normal one:
ko: 그놈에는 그림을 만들고 싶지 않거나 전세계적으로 통용하는 아이콘을 사용하고 싶을 때 쓸 수 있는 여러가지 스톡 그림이 이미 있습니다. 여기서 그냥 그림을 만드는 방법과 비교하여, 스톡 그림을 만드는 방법을 알아보도록 하겠습니다:

note: (itstool) path: section/p
en: After that, we attach it to the Grid to the left of the first Label. (We aren't using the second one for this example.)
ko: 그 다음 그리드에 붙인 처음 레이블의 왼편에 붙여넣어보겠습니다(이 예제에는 두번째 레이블이 없어요~).

note: (itstool) path: section/p
en: That gives us this, when we run it:
ko: 실행하면 다음 화면이 나타납니다:

note: (itstool) path: section/p
en: That's what the stock "About" icon looks like. You can see a list of all the stock items starting with gtk-about in <link href="https://developer.gnome.org/gtk3/3.4/gtk3-Stock-Items.html#GTK-STOCK-ABOUT:CAPS">GNOME's developer documentation</link>. It was written for C programmers, but you don't need to know C to use it; just look at the part in quotation marks, like "gtk-about", and copy that part to use the icon next to it.
ko: 이게 "정보" 스톡 아이콘 같은 그림입니다. gtk-about부터 시작하는 모든 스톡 항목은 <link href="https://developer.gnome.org/gtk3/3.4/gtk3-Stock-Items.html#GTK-STOCK-ABOUT:CAPS">그놈 개발자 문서</link>에서 볼 수 있습니다. C 프로그래머에 해당하는 내용으로 작성했지만, 스톡 항목을 사용하는데 C 언어를 알 필요는 없습니다. 그냥 "gtk-about" 처럼 큰 따옴표에 둘러싸인 부분만 보시고, 아이콘 옆에 있는 부분을 복사해서 쓰십시오.

note: (itstool) path: note/p
en: We put single quotes around 'gtk-about' here because, unlike text strings that have double quotes around them, that part will never need to be translated into another language. In fact, if it <em>were</em> translated it'd break the icon, because its name is still "gtk-about" no matter which language you speak.
ko: 큰 따옴표를 붙여넣은 텍스트 문자열과는 달리 'gtk-about'에 작은 따옴표를 붙여넣었는데, 이 부분은 다른 언어로 굳이 번역할 필요가 전혀 없습니다. 사실, 어떤 언어를 사용하든 스톡 그림 이름이 "gtk-about"이기 때문에, 이 부분을 번역<em>하면</em> 아이콘이 깨집니다.

note: (itstool) path: section/title
en: What's next?
ko: 다음은요?

note: (itstool) path: section/p
en: Before we go on to the next tutorial, let's try something a little different:
ko: 다음 따라하기 내용으로 넘어가기 전에, 좀 다른걸 해보겠습니다:

note: (itstool) path: section/p
en: That's right, we turned the Label into a Button just by changing the name! If you run the application and click on it, though, you'll find that it doesn't do anything. How do we make our Button do something? That's what we'll find out, in <link xref="03_getting_the_signal.js">our next tutorial</link>.
ko: 예, 됐구요~ 레이블을 이름만 바꿔서 단추로 만들었습니다! 프로그램을 실행하고 나서 눌러보면 아무동작도 하지 않습니다. 단추를 눌렀을 때 어떤 동작을 하게 하려면 어떻게 할까요? <link xref="03_getting_the_signal.js">다음 따라하기</link>에서 찾아볼 수 있습니다.

note: (itstool) path: section/p
en: If you like, feel free to spend some time experimenting with Grids, Labels, and Images, including stock images.
ko: 원한다면 그리드, 레이블, 그림, 스톡 그림으로 자유롭게 무언가를 해보세요.

note: (itstool) path: note/p
en: One trick you can use to make more complex layouts is to nest Grids inside of each other. This lets you group together related widgets, and rearrange them easily. Take a look at the <link xref="radiobutton.js">RadioButton</link> code sample if you'd like to see how this is done.
ko: 더 복잡하게 배치하는 방법은 그리드 안에 그리드를 넣는 방법입니다. 위젯에 상대적인 위치에 모아둘 수 있고 쉽게 재정돈할 수 있습니다. 어떻게 하는지 보고 싶으면 <link xref="radiobutton.js">RadioButton</link> 예제 코드를 살펴보시지요.

note: (itstool) path: section/title
en: Complete code sample
ko: 완전한 코드 예제

note: (itstool) path: info/desc
en: Create Buttons and other widgets that do things when you click on them.
ko: 단추와 단추를 누르면 동작하는 다른 위젯을 만듭니다.

note: (itstool) path: page/title
en: 3. Getting the Signal
ko: 3. 시그널 취하기

note: (itstool) path: synopsis/p
en: In the last tutorial, we learned how to create widgets like Labels, Images, and Buttons. Here, we'll learn how to make Buttons and other input widgets actually do things, by writing functions which handle the signals they send when they are clicked on or interacted with.
ko: 이전 따라하기 과정에서 레이블, 그림, 단추 위젯을 만드는 방법을 알아보았습니다. 여기서는 단추를 누르거나 어떤 반응을 받았을 때 보내는 시그널을 처리할 함수를 작성하여 단추와 기타 입력 위젯을 만드는 방법을 알아보겠습니다.

note: (itstool) path: section/title
en: A basic application
ko: 기본 프로그램

note: (itstool) path: section/p
en: In GNOME, widgets that you can interact with, like Buttons and Switches, send out signals when they are clicked on or activated. A Button, for instance, sends out the "clicked" signal when somebody clicks on it. When this happens, GNOME looks for the part in your code that says what to do.
ko: 그놈에서 단추, 스위치 같이 다룰 수 있는 위젯은 누르거나 마우스 커서를 올려두는 식으로 활성화하면 시그널을 내보냅니다. 예를 들어, 단추라면 누군가가 단추를 누르면 "clicked" 시그널을 내보냅니다. 시그널이 나오면, 그놈에서는 여러분이 작성한 코드에서 시그널에 반응하는 부분을 찾습니다.

note: (itstool) path: section/p
en: How do we write that code? By connecting that Button's "clicked" signal to a callback function, which is a function you write just to handle that signal. So whenever it gives off that signal, the function connected to that signal is run.
ko: 코드를 어떻게 작성할까요? 단추의 "clicked" 시그널을 콜백 함수에 연결하면, 해당 함수에서 시그널을 처리합니다. 따라서 시그널을 줄 때마다 시그널에 연결한 함수가 동작하죠.

note: (itstool) path: section/p
en: Here is an extremely basic example:
ko: 매우 기본적인 예제입니다:

note: (itstool) path: section/p
en: This ApplicationWindow has a Button and a Label inside it, arranged in a Grid. Whenever the Button is clicked, a variable that holds the number of cookies is increased by 1, and the Label that shows how many cookies there are is updated.
ko: ApplicationWindow에는 단추와 레이블이 있는데 이걸 그리드로 정렬했습니다. 단추를 클릭할 때마다 과자 갯수 값을 가진 변수 값이 하나씩 늘어나고, 과자 갯수를 보여주는 레이블이 바뀝니다.

note: (itstool) path: note/p
en: The cookies in this example are not the same as the cookies that you get from websites, which store your login information and may keep track of which sites you've visited. They're just imaginary treats. You may bake some real ones if you like.
ko: 이 예제의 과자는 웹사이트에서 로그인 정보를 저장하고 방문 사이트 상태를 보관하는 그런 과자가 아닙니다. 그냥 상상속의 무언가일 뿐이죠. 원하면 실제로 구워드세요.

note: (itstool) path: section/p
en: Here is the basic, boilerplate code that goes at the start of the application, before we start creating the window and widgets. Besides the application having a unique name, the biggest change from the usual boilerplate is that we create a global variable right near the beginning, to hold the number of cookies.
ko: 하여간, 윈도우와 위젯 만들기를 시작하기 전 프로그램을 시작하는 기본 기반 코드를 작성하겠습니다. 프로그램에 고유 이름을 붙이고, 기반 코드에서 확 바뀌는 부분은 과자 갯수 값을 보관하는 코드 시작 부분의 전역 변수 추가입니다.

note: (itstool) path: section/p
en: Take a look at the part that uses our application's connect method and bind, to connect its activate and startup signals to the functions that present the window and build the UI. We're going to do the same thing with our Button when we get to it, except that we're going to connect its "clicked" signal instead.
ko: 프로그램의 connect 메서드와 bind 부분을 보시죠. 창을 나타내고 사용자 인터페이스를 구성하는 함수에 activate 시그널과 startup 시그널을 연결하죠. 단추에도 "clicked" 시그널에 연결한다는 점만 빼고는 같은 방식을 취합니다.

note: (itstool) path: section/title
en: Click the button
ko: 단추 누르기

note: (itstool) path: section/p
en: As usual, we'll put all the code to create our Button and other widgets inside the _buildUI function, which is called when the application starts up.
ko: 보통 때와 같이, 프로그램을 시작할 때 호출하는 _buildUI 함수에, 단추와 다른 위젯을 만드는 모든 코드를 넣겠습니다.

note: (itstool) path: section/p
en: First, we create the window itself:
ko: 우선, 창을 만들고요:

note: (itstool) path: section/p
en: Note that we've set its default_height and default_width properties. These let us control how tall and wide the ApplicationWindow will be, in pixels.
ko: 여기서 default_height, default_width 속성을 설정한 걸 보시죠. ApplicationWindow의 너비 높이를 픽셀 단위로 설정합니다.

note: (itstool) path: section/p
en: Next, we'll create the Label that shows us the number of cookies. We can use the cookies variable as part of the Label's label property.
ko: 다음, 과자 갯수를 보여줄 레이블을 만들겠습니다. 레이블의 label 속성 일부로 cookies 변수를 사용할 수 있습니다.

note: (itstool) path: section/p
en: Now we'll create the Button. We set its label property to show the text that we want on the Button, and we connect its "clicked" signal to a function called _getACookie, which we'll write after we're done building our application's UI.
ko: 다음, 단추를 만들겠습니다. 단추에 표시할 텍스트를 보여줄 때 label 속성 값을 설정할 수 있고, 프로그램 사용자 인터페이스를 구성하고 나서 작성할 _getACookie 함수에 "clicked" 시그널을 연결하겠습니다.

note: (itstool) path: section/p
en: Finally, we create a Grid, attach the Label and Button to it, add it to the window and tell the window to show itself and its contents. That's all we need inside the _buildUI function, so we close it with a bracket, as well as a comma that tells GNOME to go on to the next function. Note that even though we wrote the code for the Label first, we can still attach it to the Grid in a way that will put it on the bottom.
ko: 마지막으로, 그리드를 만들어 레이블과 단추를 붙여넣은 후, 그리드에 붙여넣은 위젯을 창 위에 표시하도록 창에 추가하겠습니다. 이게 _buildUI 함수에서 작성할 모든 내용이니, 중괄호로 닫으세요. 쉼표를 입력해서 다음 함수로 넘어간다는걸 그놈에 알려주시고요. 레이블 코드를 먼저 작성하겠지만, 해당 코드 아래에서 그리드에 붙여넣을 수 있습니다.

note: (itstool) path: section/p
en: Now, we write the _getACookie function. Whenever our Button sends out its "clicked" signal, the code in this function will run. In this case, all it does is increase the number of cookies by 1, and update the Label to show the new number of cookies. We do this using the Label's set_label method.
ko: 이제 _getACookie 함수를 작성하겠습니다. 단추에서 "clicked" 시그널을 보낼 따마다 이 함수의 코드를 실행합니다. 이 때 과자 갯수가 하나씩 늘어나며, 레이블에 새 과자 갯수 값이 들어가서 바뀝니다. 이 동작은 레이블의 set_label 메서드로 처리하겠습니다.

note: (itstool) path: note/p
en: Many widgets have the same properties and methods. Both Labels and Buttons, for instance, have a label property that says what text is inside them, and get_label and set_label methods that let you check what that text is and change it, respectively. So if you learn how one widget works, you'll also know how others like it work.
ko: 여러 위젯에 동일한 속성과 메서드가 있습니다. 레이블 및 단추에도 어떤 텍스트를 넣는지 나타내는 lable 속성이 있고, 어떤 텍스트가 있는지 확인하는 get_label과 텍스트를 바꾸는 set_label 메서드가 있습니다. 따라서 위젯 동작 방식을 알면 다른 위젯 동작 방식도 알게 되는거죠??.

note: (itstool) path: section/p
en: Finally, we run the application, using the same kind of code as in our last tutorial.
ko: 마지막으로, 이전 따라하기 예제에서 코드를 실행했던 방식으로 프로그램을 실행하겠습니다.

note: (itstool) path: section/title
en: Flip the switch
ko: 스위치 젖히기

note: (itstool) path: section/p
en: Buttons aren't the only input widgets in our GTK+ toolbox. We can also use switches, like the one in this example. Switches don't have a label property, so we have to create a separate Label that says what it does to go next to it.
ko: GTK+ 도구함에는 단추만 있는게 아닙니다. 이 예제에서와 같이 스위치도 있구요~. 스위치는 레이블 속성이 없어서 스위치가 어떤 역할을 하는지 레이블을 옆에 따로 만들어야합니다.

note: (itstool) path: section/p
en: A Switch has two positions, Off and On. When a Switch is turned on, its text and background color change, so you can tell which position it's in.
ko: 스위치 단추의 위치는, 끔 아니면 켬 두가지가 있죠. 스위치를 켠 상태로 두면 텍스트와 배경 색이 바뀌어서 어떤 상태인지 확인할 수 있습니다.

note: (itstool) path: section/p
en: You may have seen Switches like these in GNOME's accessibility menu, which let you turn features like large text and the on-screen keyboard on and off. In this case, the Switch controls our imaginary cookie dispenser. If the Switch is turned on, you can get cookies by clicking the "Get a cookie" Button. If it's turned off, clicking the Button won't do anything.
ko: 큰 글씨를 표시하고 화면 키보드를 켜고 끄는 기능을 갖춘 그놈 접근성 메뉴 같은데서 이런 스위치를 볼 수 있죠. 여기서 스위치로 가상의 과자 뽑기 기계 동작 여부를 다루겠습니다. 스위치를 켜두면 "Get a cookie" 단추를 눌렀을 때 과자를 받을 수 있습니다. 스위치를 끄면 단추를 눌렀을 때 반응하지 않고요.

note: (itstool) path: note/p
en: You can get to the accessibility menu by clicking on the outline of a human, near your name in the upper-right corner of the screen.
ko: 화면의 우측 상단에 사용자 이름이 있는 사람 모양 아이콘을 누르면 접근성 메뉴로 들어갈 수 있습니다.

note: (itstool) path: section/p
en: Here's how we create the Switch:
ko: 이제 스위치를 어떻게 만드는지 알아보죠:

note: (itstool) path: section/p
en: We don't actually need to connect the Switch to anything. All we need to do is write an if statement in our _getACookie function, to check to see if the Switch is turned on. If we wanted to make something happen as soon as you flip the Switch, though, we would connect its notify::active signal, like so:
ko: 스위치에서 뭘 할지는 실제로 연결할 필요가 없습니다. 우리가 할 일은 _getACookie 함수에서 if 구문을 작성해서 스위치가 켜졌는지 여부만 확인하면 됩니다. 스위치를 젖혔을 때 바로 무언가를 하려면 notify::active 시그널을 다음처럼 연결하면 됩니다:

note: (itstool) path: section/p
en: A Switch is set to the off position by default. If we wanted the Switch to start out turned on, we would set the value of its active property to true when we create it.
ko: 스위치는 기본적으로 끔 위치로 설정해둡니다. 켠 상태로 시작하게 하려면, 스위치를 만들 때 active 속성을 true로 설정하면 됩니다.

note: (itstool) path: section/p
en: Let's just create it normally, though, and then create the Label that goes with it. We want the Switch and the Label to be kept right next to each other, so we'll create a Grid just for them, then put that Grid in our larger Grid that holds all the widgets inside it. Here's what the code looks like to create all that:
ko: 그럼 평범하게 만들어보고 옆에 레이블을 붙여두죠. 스위치와 레이블은 오른편에 두는걸로 하겠습니다. 그렇게 해서, 이 위젯에 맞는 그리드를 만들고 이 그리드를 큰 그리드에 넣겠습니다. 다 만들고 나면 코드가 다음과 같이 되겠죠:

note: (itstool) path: section/p
en: And now we arrange everything in the larger Grid like so.
ko: 마찬가지로 이제 더 큰 그리드에 몽땅 정리하겠습니다.

note: (itstool) path: section/p
en: Now we change the _getACookie function so that it checks to see if the cookie dispenser is turned on. We do that by using the Switch's get_active method. It returns true if the Switch is turned on, and false if the Switch is turned off.
ko: 이제 _getACookie 함수 코드를 바꿔서 과자 뽑기가 켜졌는지 확인하겠습니다. 스위치의 get_active 메서드를 사용하겠습니다. 스위치가 켜져있으면 true, 꺼져있으면 false를 반환합니다.

note: (itstool) path: note/p
en: When a method is used in an if statement like this, the code inside the if statement is executed if the method returns true.
ko: if 구문에서 다음과 같이 메서드를 사용하면, 메서드에서 true를 반환했을 때 if 구문 안에 있는 코드를 실행합니다.

note: (itstool) path: section/title
en: Tuning the radio
ko: 라디오 튜닝

note: (itstool) path: section/p
en: Another type of input widget we can use is called the RadioButton. You create them in groups, and then only one RadioButton in a group can be selected at a time. They're called RadioButtons because they work like the channel preset button in old-style car radios. The radio could only be tuned to one station at a time, so whenever you pressed one button in, another would pop back out.
ko: 우리가 쓸 수 있는 다른 입력 위젯으로 RadioButton이 있습니다. 한 모임 단위로 만들 수 있고, 모임 안에 있는 RadioButton은 한번에 하나만 선택할 수 있습니다. 구식 카 라디오의 프리셋 단추 처럼 동작하기 때문에 RadioButton으로 부릅니다. 라디오는 한번에 방송국 하나만 선택할 수 있기에, 어떤 단추를 누르면 다른 단추는 도로 튀어나옵니다.

note: (itstool) path: section/p
en: First off, let's change our ApplicationWindow's name and increase its border_width property, so that our widgets aren't packed in too tightly. The border_width is the number of pixels between any widget and the edge of the window.
ko: 우선 ApplicationWindow의 이름을 바꾸고 border_width 속성 값을 늘려서, 위젯이 답답하게 붙어있지 않게 하겠습니다. border_width는 위젯과 창 가장자리 사이의 픽셀 단위 간격입니다.

note: (itstool) path: section/p
en: After that, we create the RadioButtons. Remember how they're created in groups? The way we do that, is we set each new RadioButton's group property to the name of another RadioButton.
ko: 그 다음 RadioButton을 만들겠습니다. 근데 그룹안에 어떻게 만들었죠? 우리가 할 일은 각 RadioButton의 그룹 속성에 다른 RadioButton 이름을 넣는 일입니다.

note: (itstool) path: section/p
en: Next, we create a Grid for the RadioButtons. Remember, we don't have to arrange things in Grids in the same order that we create them in.
ko: 다음 RadioButton의 그리드를 만들겠습니다. 만든 순서대로 그리드에 똑같이 정렬할 필요는 없습니다.

note: (itstool) path: section/p
en: Normally, the RadioButton that's selected by default is the one that's the name of the group. We want the first "Not cookie" button to be selected by default, though, so we use its set_active method.
ko: 보통 기본으로 선택한 RadioButton은 그룹 이름으로 설정한 RadioButton입니다. 우선은 기본적으로 "Not cookie" 단추를 선택한 상태로 두려고 합니다. 그러니까 set_active 메서드를 쓰겠습니다.

note: (itstool) path: note/p
en: We could also set its active property to true when we create it.
ko: RadioButton을 만들 때 active 속성을 설정할 수도 있습니다.

note: (itstool) path: section/p
en: Now we arrange everything in our main Grid like usual ...
ko: 이제 흔히 하던대로 메인 그리드에 모든 위젯을 정리하겠습니다 ...

note: (itstool) path: section/p
en: And then we change our _getACookie function to test to see if the cookie button is the one that's selected.
ko: 그리고 과자 단추를 선택했는지 확인하도록 _getACookie 함수 코드를 바꾸겠습니다.

note: (itstool) path: section/title
en: Can you spell "cookie"?
ko: "cookie" 쓸 수 있죠?

note: (itstool) path: section/p
en: The last input widget we're going to cover is the Entry widget, which is used for single-line text entry.
ko: 우리가 다룰 마지막 위젯은 단일 행 텍스트 항목을 다루는 Entry 위젯입니다.

note: (itstool) path: note/p
en: If you need to be able to enter in a whole paragraph or more, like if you are building a text editor, you'll want to look at the much more customizable <link xref="textview.js">TextView</link> widget.
ko: 텍스트 편집기를 만들 때 처럼 한 문당 이상을 입력할 수 있는게 필요하다면, 개별적으로 이리저리 자유롭게 바꿀 수 있는 <link xref="textview.js">TextView</link> 위젯을 찾으시려는 지도 모르겠습니다.

note: (itstool) path: section/p
en: After we change the window's name, we create the Entry widget.
ko: 창 이름을 바꾸고 나서 Entry 위젯을 만들겠습니다.

note: (itstool) path: section/p
en: Next, we arrange everything in the Grid ...
ko: 그 다음, 그리드에 모두 정리하고요 ...

note: (itstool) path: section/p
en: And now we modify _getACookie's if statement again, using the Entry's get_text method to retrieve the text that you entered into it and see if you spelled "cookie" right. We don't care whether you capitalize "cookie" or not, so we use JavaScript's built-in toLowerCase method to change the Entry's text to all lower case inside the if statement.
ko: Entry의 get_text 메서드로 텍스트를 가져와서 "cookie" 문자열이 맞는지 확인하도록 _getACookie의 if 구문을 수정하겠습니다. "cookie"의 어디가 대문자인지는 상관하지 않을거기에 if 구문 안에서 Entry의 모든 텍스트 문자를 소문자로 바꾸는 JavaScript 내장 함수 toLowerCase를 사용하겠습니다.

note: (itstool) path: note/p
en: An Entry widget doesn't have a label property, which is a set text string that the user can't change. (You can't normally change the label on a Button, for instance.) Instead, it has a text property, which changes to match what the user types in.
ko: Entry 위젯은 사용자가 못바꾸는 텍스트 문자열을 설정하는 label 속성이 없습니다(심지어 단추에도 보통은 레이블의 문자열을 바꿀 수 없습니다). 대신 사용자가 입력한 내용이 일치하는지 여부를 바꾸는 text 속성이 있습니다.

note: (itstool) path: section/p
en: Keep reading, if you'd like to see the complete code for each version of our cookie maker application.
ko: 과자 만들기 프로그램의 여러가지  각 버전에 해당하는 완전한 코드를 보려면 계속 읽어나가십시오.

note: (itstool) path: note/p
en: The main JavaScript tutorials page has <link xref="beginner.js#buttons">more detailed code samples</link> for each input widget, including several not covered here.
ko: 메인 JavaScript 지침서 페이지에는 여기서 다루지 못한 여러가지 입력 위젯을 다룬 <link xref="beginner.js#buttons">상세 예제 코드</link>가 있습니다.

note: (itstool) path: section/title
en: Complete code samples
ko: 완전한 예제 코드

note: (itstool) path: section/title
en: Code sample with Button
ko: 단추 코드 예제

note: (itstool) path: section/title
en: Code sample with Switch
ko: 스위치 코드 예제

note: (itstool) path: section/title
en: Code sample with RadioButton
ko: RadioButton 코드 예제

note: (itstool) path: section/title
en: Code sample with Entry
ko: Entry 코드 예제

[ctx: text]
note: (itstool) path: info/title
en: AboutDialog (C)
ko: AboutDialog(C)

note: (itstool) path: info/desc
en: Display information about an application
ko: 프로그램 정보를 나타냅니다

note: (itstool) path: page/p
en: An AboutDialog example using Gtk.ApplicationWindow and Menu
ko: AboutDialog 예제에서는 GtkApplicationWindow와 Menu를 다룹니다

note: (itstool) path: note/p
en: <em style="bold">You need to be running Gtk3.4 or later for this to work</em>
ko: <em style="bold">이 코드를 동작하려면 Gtk 3.4 이상이 필요합니다</em>

note: (itstool) path: page/p (itstool) path: section/p
en: In this sample we used the following:
ko: 이 예제는 다음 참고자료가 필요합니다:

[ctx: text]
note: (itstool) path: info/title
en: AboutDialog (JavaScript)
ko: AboutDialog(JavaScript)

note: (itstool) path: page/p
en: A modal dialog window which shows information about an application and its creators. This one is triggered by clicking "About" in the application's menu, which is normally a good place to put it.
ko: 프로그램과 만든 사람 정보를 나타내는 모달 대화상자 창입니다. "정보" 항목을 두기 딱 좋은 프로그램 메뉴에서 "정보"를 누르면 정보 모달 대화상자 창이 뜹니다.

[ctx: text]
note: (itstool) path: info/title
en: AboutDialog (Python)
ko: AboutDialog(Python)

note: (itstool) path: info/desc
en: A window that displays information about an application
ko: 프로그램 정보를 표시하는 창입니다

note: (itstool) path: page/p
en: An AboutDialog example using Gtk.ApplicationWindow and Menu (the "about" is displayed if "About" in the menu is selected).
ko: AboutDialog 예제에서는 Gtk.ApplicationWindow와 Menu를 다룹니다.

note: (itstool) path: section/title
en: Code used to generate this example
ko: 예제 결과를 만드는 코드

note: (itstool) path: section/title
en: Useful methods for an AboutDialog widget
ko: AboutDialog 위젯에 쓸만한 메서드

note: (itstool) path: section/p
en: In line 15 the signal <code>"activate"</code> is connected to the callback function <code>about_cb()</code> using <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. See <link xref="signals-callbacks.py"/> for a more detailed explanation.
ko: 15번째 줄에서, <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code> 코드로 <code>"activate"</code> 시그널을 <code>about_cb()</code> 콜백 함수에 연결했습니다. 더 자세한 설명은 <link xref="signals-callbacks.py"/>를 참조하십시오.

note: (itstool) path: section/title
en: API References
ko: API 참고서

[ctx: text]
note: (itstool) path: info/title
en: AboutDialog (Vala)
ko: AboutDialog(Vala)

note: (itstool) path: info/desc
en: Coming soon...
ko: 곧 계속됩니다...

note: (itstool) path: credit/name
en: GNOME Documentation Project
ko: 그놈 문서 프로젝트

note: (itstool) path: page/title
en: Audio player
ko: 오디오 재생기

note: (itstool) path: info/desc
en: A beginner's guide to writing GNOME applications in JavaScript, including code samples and practice exercises.
ko: 코드 예제와 실제 연습 예제가 들어있는 JavaScript 그놈 프로그램 작성용 초보자 안내서입니다.

note: (itstool) path: page/title
en: Tutorial for beginners and code samples
ko: 초보자 지침서 및 예제 코드

note: (itstool) path: synopsis/p
en: JavaScript is one of the most popular programming languages on the web. It's not just for the web, though. If you have even a basic understanding of JavaScript, you can write full-fledged applications for GNOME. <link href="https://wiki.gnome.org/Apps/Documents">GNOME Documents</link> is written in JavaScript, and so is <link href="https://live.gnome.org/GnomeShell/Tour">GNOME Shell</link>, the most basic part of GNOME.
ko: JavaScript는 웹에서 가장 인기있는 프로그래밍 언어 중 하나입니다. 단지 웹에서 뿐만이 아닙니다. JavaScript 기본을 잘 이해하면 완전한 격을 갖춘 그놈 프로그램을 작성할 수 있습니다. <link href="https://wiki.gnome.org/Apps/Documents">그놈 문서</link>는 JavaScript로 작성했으며, 그놈의 가장 근본적인 부분 <link href="https://live.gnome.org/GnomeShell/Tour">그놈 셸</link> 도 마찬가지입니다.

note: (itstool) path: note/p
en: GNOME Shell is what you see when you click on "Activities" in the top-left corner of your screen. It also controls the clock and the rest of the top panel. Besides showing how you to write GNOME applications, these tutorials will also show you how to use JavaScript to write GNOME Shell extensions, which give it new features or change the way it does things.
ko: 그놈 셸은 화면의 좌측 상단에 있는 "현재 활동"을 눌렀을 때 볼 수 있습니다. 시계와 상단 패널 나머지를 다룹니다. 그놈 프로그램 작성 방법을 알려드리기 전에 다음 따라하기 내용을 통해, 그놈 셸에 새 기능을 붙이거나 동작 방식을 바꾸는 그놈 셸 확장 기능을 작성할 때 JavaScript를 사용하는 방법을 보여드리겠습니다.

note: (itstool) path: section/title
en: Getting Started
ko: 시작하기

note: (itstool) path: section/p
en: These tutorials are designed for people who already know how to write in JavaScript, and who have GNOME installed on their computers already, but who are new to developing GNOME applications. If you don't already know JavaScript, or if you need help getting GNOME set up, take a look at these resources first:
ko: 이 따라하기 참고서는 JavaScript 코드 작성법을 이미 알고 있는 사람, 이미 컴퓨터에 그놈을 설치한 사람, 하지만 그놈 프로그램 개발에 처음인 사람이 쉽게 읽을 수 있게 기획했습니다. 이미 JavaScript 코드 작성법을 아는 사람이 아니거나 그놈 설정에 도움이 필요하다면 다음 참고 자료를 우선 살펴보십시오:

note: (itstool) path: item/p
en: <link href="http://eloquentjavascript.net/contents.html">Eloquent JavaScript</link> is a free, Creative Commons-licensed book, which explains the basics of JavaScript programming. Since you won't be writing JavaScript for the web, you only need to read up to chapter 10 or so.
ko: <link href="http://eloquentjavascript.net/contents.html">Eloquent JavaScript</link>는 크리에이티브 커먼즈 라이선스를 부여한 무료 책이며, JavaScript 프로그래밍 기본을 설명합니다. 웹용 JavaScript 프로그램을 작성하지 않을 것이기에 10장까지만 읽으시면 됩니다.

note: (itstool) path: item/p
en: <link href="http://www.gnome.org/getting-gnome/">Download GNOME</link> as part of a distribution, like Fedora, openSUSE, or Ubuntu. Each distribution has its own instructions for how to get GNOME.
ko: 페도라, 오픈수세, 우분투 배포판의 일부로 <link href="http://www.gnome.org/getting-gnome/">그놈을 다운로드</link> 하십시오. 각 배포판에는 그놈을 설치하는 자체 방식이 있습니다.

note: (itstool) path: item/p
en: <link xref="set-up-gedit.js">Set up gedit</link> for writing applications. GNOME's text editor, gedit, is sometimes just called "text editor".
ko: 프로그램을 작성할 <link xref="set-up-gedit.js">지에디트를 설정</link> 하십시오. 그놈 텍스트 편집기 지에디트는 그냥 "텍스트 편집기"라고도 합니다.

note: (itstool) path: section/title
en: Tutorials
ko: 지침서

note: (itstool) path: section/title
en: Code samples
ko: 예제 코드

note: (itstool) path: section/p
en: These samples show how to use widgets in your GNOME applications. Each one demonstrates a complete application which showcases the featured widget. At the end of each sample, you will find links to more detailed reference material.
ko: 이 예제에서는 그놈 프로그램에서 위젯을 사용하는 방법을 보여줍니다. 각 예제 코드에서는 기능을 갖춘 위젯을 모아서 보여주는 완전한 프로그램으로 실험적으로 동작합니다. 각 예제 끝에는 더욱 자세한 참고 자료 링크를 보실 수 있습니다.

note: (itstool) path: section/p
en: To run the code samples:
ko: 예제 코드를 실행하려면:

note: (itstool) path: item/p
en: Copy and paste the code into <var>filename</var>.js
ko: <var>filename</var>.js에 코드를 복사하여 붙여넣으십시오

note: (itstool) path: item/p
en: In the terminal, type:
ko: 터미널에서 다음 명령을 입력하십시오:

note: (itstool) path: section/title
en: Windows
ko: 창

note: (itstool) path: section/title
en: Display widgets
ko: 위젯 표시

note: (itstool) path: section/title
en: Buttons and toggles
ko: 단추 및 토글

note: (itstool) path: section/title
en: Numeric and text data entry
ko: 숫자, 텍스트 데이터 항목

note: (itstool) path: section/title
en: Multiline text editor
ko: 다중라인 텍스트 편집기

note: (itstool) path: section/title
en: Menu, combo box and toolbar widgets
ko: 메뉴, 콤보상자, 도구모음 위젯

note: (itstool) path: section/title
en: TreeView widget
ko: TreeView 위젯

note: (itstool) path: section/title (itstool) path: steps/title
en: Selectors
ko: 선택 상자

note: (itstool) path: section/title
en: File selectors
ko: 파일 선택 상자

note: (itstool) path: section/title
en: Font selectors
ko: 글꼴 선택 상자

note: (itstool) path: section/title
en: Color Selectors
ko: 색상 선택 상자

note: (itstool) path: section/title
en: Layout containers
ko: 배치 컨테이너

note: (itstool) path: section/title
en: Ornaments
ko: 장식

note: (itstool) path: section/title
en: Scrolling
ko: 스크롤

note: (itstool) path: section/title
en: Miscellaneous
ko: 기타

note: (itstool) path: section/title
en: Exercises
ko: 연습 예제

[ctx: text]
note: (itstool) path: info/title
en: GTK+ widgets sample code (Python)
ko: GTK+ 위젯 예제 코드(Python)

note: (itstool) path: info/desc
en: A guide to GUI programming using GTK+, including code samples and practice exercises.
ko: 예제 코드와 실제 연습 예제가 들어있는 GTK+ GUI 프로그래밍 안내서입니다.

note: (itstool) path: page/title
en: GTK+ widgets sample code
ko: GTK+ 위젯 예제 코드

note: (itstool) path: synopsis/p
en: If you are a beginner and you would like a tutorial to guide you step by step in an exploration of what you can do with GTK+ 3, you should go to the <link xref="tutorial.py"/> page. If you are looking for a specific widget, you can find it in the sections below.
ko: GTK+ 3으로 뭘 할 수 있는지 단계별로 살펴볼 수 있는 지침서를 찾는 초보자라면 <link xref="tutorial.py"/> 페이지로 이동하십시오. 개별 위젯을 찾는다면 아래 섹션에서 찾아볼 수 있습니다.

note: (itstool) path: section/title
en: Theory pages
ko: 이론 페이지

[ctx: text]
note: (itstool) path: info/title
en: Tutorial for beginners (Vala)
ko: 초보자용 지침서(Vala)

note: (itstool) path: info/desc
en: A beginner's guide to GUI programming using GTK+, including code samples and practice exercises.
ko: 예제 코드와 실제 연습 예제가 들어있는 GTK+ GUI 프로그래밍 초보자 안내서입니다.

note: (itstool) path: synopsis/p
en: Although these tutorials are designed for beginners, we can't cover all the basics. Before attempting to follow these tutorials, you are expected to be familiar with the following concepts:
ko: 이 안내서는 초보자에 맞게 구성했지만 모든 기본적인 내용을 다루지는 못했습니다. 이 안내서를 따라가기 전에 다음 개념에 익숙한 상황임을 가정하겠습니다:

note: (itstool) path: item/p
en: Object oriented programming
ko: 객체 지향 프로그래밍

note: (itstool) path: item/p
en: The Vala programming language:
ko: Vala 프로그래밍 언어:

note: (itstool) path: item/p
en: <link href="https://live.gnome.org/Vala/Tutorial">The Vala Tutorial</link>
ko: <link href="https://live.gnome.org/Vala/Tutorial">Vala 따라하기 지침서</link>

note: (itstool) path: item/p
en: <link href="https://live.gnome.org/Vala/Documentation#Sample_Code">Sample Vala code</link>
ko: <link href="https://live.gnome.org/Vala/Documentation#Sample_Code">Vala 예제 코드</link>

note: (itstool) path: synopsis/p
en: By following these tutorials you will learn the basics of GUI programming using GTK+.
ko: 이 안내서를 따라가면 GTK+ GUI 프로그래밍의 기본 내용을 배웁니다.

note: (itstool) path: item/p
en: Copy and paste the code into <var>filename</var>.vala
ko: <var>filename</var>.vala에 코드를 복사하여 붙여넣으십시오

note: (itstool) path: item/p
en: In the terminal type:
ko: 터미널에 다음 명령을 입력하십시오:

[ctx: text]
note: (itstool) path: info/title
en: Button (C)
ko: Button(C)

note: (itstool) path: info/desc
en: A button widget which emits a signal when clicked
ko: 눌렀을 때 시그널을 내보내는 단추 위젯입니다

note: (itstool) path: page/p
en: A button widget connected to a callback function that reverses its label when clicked.
ko: 눌렀을 때 레이블을 반전하는 콜백 함수에 연결한 단추 위젯입니다.

[ctx: text]
note: (itstool) path: info/title
en: Button (JavaScript)
ko: Button(JavaScript)

note: (itstool) path: info/desc
en: A button which can be connected to other widgets
ko: 다른 위젯에 연결할 수 있는 단추입니다

note: (itstool) path: page/p
en: A button widget that changes its label when you click it.
ko: 단추를 누르면 레이블을 바꾸는 단추 위젯입니다.

note: (itstool) path: page/p
en: A button widget connected to a simple callback function.
ko: 간단한 콜백 함수에 연결한 단추 위젯입니다.

note: (itstool) path: section/title
en: Useful methods for a Button widget
ko: Button 위젯에 쓸만한 메서드

note: (itstool) path: section/p
en: In line 16 the <code>"clicked"</code> signal from the button is connected to the callback function <code>do_clicked()</code> using <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. See <link xref="signals-callbacks.py"/> for a more detailed explanation.
ko: 16번째 줄에서, <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code> 코드로 <code>"clicked"</code> 시그널을 <code>do_clicked()</code> 콜백 함수에 연결했습니다. 더 자세한 설명은 <link xref="signals-callbacks.py"/>를 참조하십시오.

note: (itstool) path: item/p
en: <code>set_relief(Gtk.ReliefStyle.NONE)</code> sets to none the relief style of the edges of the Gtk.Button - as opposed to <code>Gtk.ReliefStyle.NORMAL</code>.
ko: <code>set_relief(Gtk.ReliefStyle.NONE)</code> 함수는 Gtk.Button의 가장자리의 두드러진 모양새를 없음으로 설정합니다. <code>Gtk.ReliefStyle.NORMAL</code>과는 반대죠.

note: (itstool) path: item/p
en: If the label of the button is a <link href="http://developer.gnome.org/gtk3/unstable/gtk3-Stock-Items.html">stock icon</link>, <code>set_use_stock(True)</code> sets the label as the name of the corresponding stock icon.
ko: 단추 레이블에 <link href="http://developer.gnome.org/gtk3/unstable/gtk3-Stock-Items.html">스톡 아이콘</link>이라면, <code>set_use_stock(True)</code> 함수로 스톡 아이콘 이름을 레이블로 설정합니다.

note: (itstool) path: item/p
en: To set an image (e.g. a stock image) for the button <code>button</code>:
ko: <code>button</code> 단추 레이블에 그림(예: 스톡 그림)을 설정하려면:

note: (itstool) path: item/p
en: You should not set a label for the button after this, otherwise it will show the label and not the image.
ko: 이 코드 다음에 단추에 레이블 문자열을 설정하면, 그림 대신 텍스트 레이블이 나타납니다.

note: (itstool) path: item/p
en: If we use <code>set_focus_on_click(False)</code> the button will not grab focus when it is clicked by the mouse. This could be useful in places like toolbars, so that the keyboard focus is not removed from the main area of the application.
ko: <code>set_focus_on_click(False)</code> 함수를 사용하면 단추를 마우스로 눌렀을 때 포커스를 주지 않습니다. 도구 모음 같은 곳에 쓸만해서 키보드 포커스를 프로그램의 주 영역에서 없애지 않을 때 씁니다.

note: (itstool) path: page/title
en: Button widget
ko: 단추 위젯

note: (itstool) path: page/p
en: In this sample we used the following: <link href="http://www.valadoc.org/gtk+-3.0/Gtk.Button.html">Gtk.Button</link>
ko: 이 예제에서 <link href="http://www.valadoc.org/gtk+-3.0/Gtk.Button.html">Gtk.Button</link>을 사용하겠습니다

note: (itstool) path: info/desc
en: A container for arranging buttons
ko: 단추를 정렬하는 컨테이너

note: (itstool) path: page/p
en: A calculator - the buttons are enclosed in horizontal ButtonBoxes.
ko: 계산기 - 단추는 수평 ButtonBox에 둘러싸여있습니다.

note: (itstool) path: section/title
en: Useful methods for a ButtonBox widget
ko: ButtonBox 위젯에 쓸만한 메서드

note: (itstool) path: item/p
en: The layout of the ButtonBox are set with <code>set_layout(layout)</code>, where <code>layout</code> can be <code>Gtk.ButtonBoxStyle.SPREAD</code> (buttons are evenly spread across the box), <code>Gtk.ButtonBoxStyle.EDGE</code> (buttons are placed at the edges of the box), <code>Gtk.ButtonBoxStyle.START</code> (buttons are grouped towards the start of the box), <code>Gtk.ButtonBoxStyle.END</code> (buttons are grouped towards the end of the box), <code>Gtk.ButtonBoxStyle.CENTER</code> (buttons are centered in the box).
ko: ButtonBox 배치는 <code>set_layout(layout)</code> 함수로 설정하며, <code>layout</code>에 들어갈 값은 <code>Gtk.ButtonBoxStyle.SPREAD</code>(단추가 상자 크기만큼 늘어남), <code>Gtk.ButtonBoxStyle.EDGE</code>(단추가 상자 가장자리에 붙음), <code>Gtk.ButtonBoxStyle.START</code>(단추가 상자 시작 부분에 모임), <code>Gtk.ButtonBoxStyle.END</code>(단추가 상자 끝부분에 모임), <code>Gtk.ButtonBoxStyle.CENTER</code>(단추가 상자 한가운데로 모임)가 될 수 있습니다.

note: (itstool) path: item/p
en: <code>set_child_secondary(button, is_secondary)</code> sets whether <code>button</code> should appear in a secondary group of children. A typical use of a secondary child is the help button in a dialog. This group appears after the other children if the style is <code>START</code>, <code>SPREAD</code> or <code>EDGE</code>, and before the other children if the style is <code>END</code>. If the style is <code>START</code> or <code>END</code>, then the secondary children are aligned at the other end of the button box from the main children. For the other styles, they appear immediately next to the main children.
ko: <code>set_child_secondary(button, is_secondary)</code> 함수로 <code>button</code> 이 하위 두번째 모임으로 나타날지 여부를 설정합니다. 2차 하위요소는 대화상자의 도움말 단추가 될 수 있습니다. 이 모임은 모양새가 <code>START</code>, <code>SPREAD</code>, <code>EDGE</code> 중 하나고, 그 이전 하위 요소의 모양새가 <code>END</code>일 때, 다른 하위 요소의 전에 나타납니다. 모양새가 <code>START</code>, <code>END</code> 중 하나면, 주 하위 요소의 단추 상자 다른 끝부분에 두번째 하위 요소를 정렬합니다. 다른 모양새로 설정하면, 주 하위 요소 바로 다음에 나타냅니다.

note: (itstool) path: item/p
en: <code>set_child_non_homogeneous(button, is_non_homogeneous)</code> sets whether the child is exempted from homogeneous sizing. Default value is <code>False</code>.
ko: <code>set_child_non_homogeneous(button, is_non_homogeneous)</code> 함수로 하위 요소에 대한 동일 크기 조절 방식 비적용 여부를 설정합니다. 기본 값은 <code>false</code>입니다.

note: (itstool) path: item/p
en: <code>set_spacing(spacing)</code> sets the spacing, in pixels, between the buttons of the box.
ko: <code>set_spacing(spacing)</code> 함수는 상자안의 단추 사이 간격을 픽셀 단위로 설정합니다.

note: (itstool) path: info/desc
en: Tutorials and code samples in C.
ko: C언어 기반 지침 및 예제 코드입니다.

note: (itstool) path: page/title
en: Platform Demos in C
ko: C언어 기반 플랫폼 데모

note: (itstool) path: section/title
en: Prerequisites
ko: 준비요건

note: (itstool) path: section/p
en: To compile these platform demos you will need a C compiler, for example <link href="https://gcc.gnu.org/">gcc</link>. You will also need GTK+ 3 including headers and pkg-config files. Linux distributions usually abstract GTK+ 3 headers and pkg-config files into separate packages called <em>gtk3-devel</em>, <em>gtk3-dev</em> or similar.
ko: 플랫폼 데모를 컴파일하려면 <link href="https://gcc.gnu.org/">gcc</link> 같은 C 컴파일러가 필요합니다. 또한 헤더와 pkg-config 파일이 있는 GTK+ 3가 필요합니다. 보통, 리눅스 배포판에서는 추상 GTK+ 3 헤더와 pkg-config 파일을 <em>gtk3-devel</em>, <em>gtk3-dev</em> 같은 식으로 별개 패키지로 배포합니다.

note: (itstool) path: section/title
en: Guidelines for new developers
ko: 새 개발자 지침서

note: (itstool) path: section/p
en: Beyond the prerequisites mentioned above, several tools has been developed to assist you further in developing your GNOME application. GNOME also recommends a specific coding style and conventions which this section will elaborate further upon.
ko: 이전에 언급했던 준비사항 이전에, 그놈 프로그램 개발을 도와주려 개발한 몇가지 도구가 있습니다. 그놈에서는 지정 코드 작성 방식과 앞으로 이 장에서 계속 따라갈 관례를 추천합니다.

note: (itstool) path: section/title
en: Recommended tools
ko: 추천 도구

note: (itstool) path: item/p
en: <link href="https://wiki.gnome.org/Apps/Devhelp">DevHelp</link>: An API documentation browser for GNOME.
ko: <link href="https://wiki.gnome.org/Apps/Devhelp">DevHelp</link>: 그놈 API 문서 탐색기.

note: (itstool) path: item/p
en: A GNOME IDE (Integrated Development Environment). An IDE can assist you in writing and debugging C code, for example <link href="https://wiki.gnome.org/Apps/Builder">Builder</link> or <link href="https://wiki.gnome.org/Apps/Anjuta">Anjuta</link>.
ko: 그놈 IDE(통합 개발 환경). <link href="https://wiki.gnome.org/Apps/Builder">빌더</link>나 <link href="https://wiki.gnome.org/Apps/Anjuta">안주타</link> 같은 IDE에서 C 코드를 작성하고 디버깅하는 과정을 도와줄 수 있습니다.

note: (itstool) path: item/p
en: <link href="http://glade.gnome.org/">Glade</link>: A user interface designer for GTK+ Applications.
ko: <link href="http://glade.gnome.org/">글레이드</link>: GTK+ 프로그램용 사용자 인터페이스 디자이너.

note: (itstool) path: item/p
en: An IRC Client, for example <link href="https://wiki.gnome.org/Apps/Polari">Polari</link> or <link href="https://wiki.gnome.org/Apps/Empathy">Empathy</link>. If you run into problems while following the beginner tutorials, join #gnome on <em>irc.gnome.org</em>.
ko: <link href="https://wiki.gnome.org/Apps/Polari">폴라리</link>나 <link href="https://wiki.gnome.org/Apps/Empathy">엠퍼시</link> 같은 IRC 클라이언트. 초보자 지침서를 따라가다 문제에 봉착하면 <em>irc.gnome.org</em>의 #gnome으로 오세요.

note: (itstool) path: section/title
en: Coding Style
ko: 코드 작성 방식

note: (itstool) path: section/p
en: Most applications in the GNOME project is written in the <link href="http://en.wikipedia.org/wiki/Indent_style#GNU_style">GNU style</link> of indentation. The tutorials and code examples presented are following this convention and you are recommended to do so too.
ko: 그놈 프로젝트의 대부분 프로그램은 <link href="http://en.wikipedia.org/wiki/Indent_style#GNU_style">GNU 방식</link> 들여쓰기로 작성했습니다. 지침서와 예제 코드는 이 관례를 따랐으며,  여러분도 이 방식을 따르는게 좋습니다.

note: (itstool) path: section/title
en: Executing Code
ko: 코드 실행

note: (itstool) path: item/p
en: Copy and paste the code into <var>filename</var>.c
ko: <var>filename</var>.c 파일에 코드를 복사하여 붙여넣으십시오

note: (itstool) path: note/p
en: For more information about compiling GTK+ programs see <link href="http://developer.gnome.org/gtk3/3.4/gtk-compiling.html">Compiling GTK+ Applications on UNIX</link>.
ko: GTK+ 프로그램 컴파일에 대해 더 알아보시려면 <link href="http://developer.gnome.org/gtk3/3.4/gtk-compiling.html">유닉스 GTK+ 프로그램 컴파일</link>을 살펴보십시오.

note: (itstool) path: section/title
en: Widget Code Examples
ko: 위젯 예제 코드

[ctx: text]
note: (itstool) path: info/title
en: CheckButton (C)
ko: CheckButton(C)

note: (itstool) path: info/desc
en: Create widgets with a discrete ToggleButton
ko: 개별 ToggleButton으로 위젯을 만듭니다

note: (itstool) path: page/p
en: This CheckButton toggles the title.
ko: CheckButton으로 제목 표시 여부를 전환합니다.

[ctx: text]
note: (itstool) path: info/title
en: CheckButton (JavaScript)
ko: CheckButton(JavaScript)

note: (itstool) path: info/desc
en: A box which can be checked or unchecked
ko: 표시를 하거나 지울 수 있는 상자입니다

note: (itstool) path: page/p
en: This application has a CheckButton. Whether the box is checked dictates whether the window's title bar shows anything.
ko: 이 프로그램에는 CheckButton이 있습니다. 이 확인 상자의 표시 여부에 따라 창 제목 표시줄에 무언가를 나타냅니다.

note: (itstool) path: page/p
en: A CheckButton sends the "toggled" signal when it's checked or unchecked. While it's checked, the "active" property is true. While it's not, "active" tests as false.
ko: CheckButton에 표시하거나 지울 때, "toggled" 시그널을 보냅니다. 표시해두면 "active" 속성 값이 true가 되고, 그렇지 않으면 false가 됩니다.

note: (itstool) path: section/title
en: Libraries to import
ko: 가져올 라이브러리

note: (itstool) path: section/p
en: These are the libraries we need to import for this application to run. Remember that the line which tells GNOME that we're using Gjs always needs to go at the start.
ko: 이 프로그램을 실행할 때 가져올 라이브러리입니다. 시작 부분에 항상 gjs가 필요함을 알리는 줄을 작성해야 함을 기억하십시오.

note: (itstool) path: section/title
en: Creating the application window
ko: 프로그램 창 만들기

note: (itstool) path: section/p
en: All the code for this sample goes in the CheckButtonExample class. The above code creates a <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html">Gtk.Application</link> for our widgets and window to go in.
ko: 이 예제의 모든 코드는 CheckButtonExample 클래스에 들어갑니다. 위 코드에서는 위젯과 창이 들어가는 <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html">Gtk.Application</link>을 만듭니다.

note: (itstool) path: section/p
en: The _buildUI function is where we put all the code to create the application's user interface. The first step is creating a new <link href="GtkApplicationWindow.js.page">Gtk.ApplicationWindow</link> to put all our widgets into.
ko: _buildUI 함수는 프로그램 사용자 인터페이스를 구성하는 모든 코드를 넣는 곳입니다. 우선 모든 위젯을 넣을 새 <link href="GtkApplicationWindow.js.page">Gtk.ApplicationWindow</link> 를 만들겠습니다.

note: (itstool) path: section/title
en: Creating the checkbutton
ko: 확인 단추 만들기

note: (itstool) path: section/p
en: This code creates the checkbutton itself. The label next to the checkbutton is created by giving the checkbutton the "label" property and assigning a string value to it. Since this checkbutton toggles whether the window title is on or off, and the window title will be on to start with, we want the box to be checked by default. Whenever the user checks or unchecks the box, we call the _toggledCB function.
ko: 이 코드로 자체 확인 단추를 만듭니다. 확인 단추 옆 레이블은 확인 단추의 "label" 속성에 문자열 값을 넣어 만듭니다. 이 확인 단추는 창 제목을 나타내거나 숨긴 상태를 전환하고 프로그램을 시작할 때 창 제목이 들어온 상태여야 하기 때문에, 기본적으로 확인 상자를 표시한 상태로 두려 합니다. 사용자가 상자에 표시했다 지울 때마다 _toggledCB 함수를 호출하겠습니다.

note: (itstool) path: section/p
en: This code finishes up creating the UI, by telling the window to show itself and all child widgets (which is just the checkbutton in this case).
ko: 이 코드는 창 자체와 모든 하위 위젯의 표시를 지시하여 사용자 인터페이스 구성을 끝냅니다(이 경우 확인 단추만 해당).

note: (itstool) path: section/title
en: Function which handles the checkbutton's toggling
ko: 확인 단추 상태 전환을 처리하는 함수입니다

note: (itstool) path: section/p
en: If the checkbutton is toggled from on to off, we want the window title to disappear. If it's toggled from off to on, we want it to reappear. We can tell which way it was toggled by testing to see whether it's active (checked) or not afterwards. A simple if / else statement which calls the checkbutton's get_active() method will work for this.
ko: CheckButton 표시를 지운 상태로 바꿀 때 창 제목을 사라지게 하려고 합니다. 다시 이걸 표시해두면 창 제목을 다시 나타나게 하려고 합니다. 단추가 활성(표시) 상태인지 여부를 나중에 확인하는 방식으로 처리할 수 있습니다. 이 과정에서 CheckButton의 get_active() 메서드를 호출하는 간단한 if/else 구문을 사용하겠습니다.

note: (itstool) path: section/p
en: Finally, we create a new instance of the finished CheckButtonExample class, and set the application running.
ko: 마지막으로 완성본 CheckButtonExample 클래스의 새 인스턴스를 만들고 프로그램 실행을 설정하겠습니다.

note: (itstool) path: section/title
en: In-depth documentation
ko: 자세한 문서

note: (itstool) path: info/desc
en: A toggle button in a window
ko: 창의 토글 단추

note: (itstool) path: section/title
en: Useful methods for a CheckButton widget
ko: CheckButton 위젯의 쓸만한 메서드

note: (itstool) path: section/p
en: In line 17 the <code>"toggled"</code> signal is connected to the callback function <code>toggled_cb()</code> using <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. See <link xref="signals-callbacks.py"/> for a more detailed explanation.
ko: 17번째 줄에서, <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code> 코드로 <code>"toggled"</code> 시그널을 <code>toggled_cb()</code> 콜백 함수에 연결했습니다. 더 자세한 설명은 <link xref="signals-callbacks.py"/>를 참조하십시오.

[ctx: text]
note: (itstool) path: info/title
en: CheckButton (Vala)
ko: CheckButton(Vala)

note: (itstool) path: info/desc
en: Create widgets with a discrete toggle button
ko: 개별 토글 단추로 위젯을 만듭니다

[ctx: text]
note: (itstool) path: info/title
en: ColorButton (JavaScript)
ko: ColorButton(JavaScript)

note: (itstool) path: info/desc
en: A button to launch a color selection dialog
ko: 색상 선택 상자를 실행하는 단추입니다

note: (itstool) path: page/p
en: This ColorButton launches a color selection dialog and prints in the terminal the RGB values of the color selected.
ko: ColorButton은 색상 선택 대화 상자를 실행하고 선택한 색의 RGB 값을 터미널에 나타냅니다.

[ctx: text]
note: (itstool) path: info/title
en: ColorButton (Python)
ko: ColorButton(Python)

note: (itstool) path: section/title
en: Useful methods for a ColorButton widget
ko: ColorButton 위젯에 쓸만한 메서드

note: (itstool) path: section/p
en: <code>set_color(color)</code>, where the <code>color</code> is defined as in the example, sets the color of the ColorButton, which by default is black. <code>get_color()</code> returns the color.
ko: 예제에서 <code>color</code>를 지정하는 <code>set_color(color)</code> 함수는 ColorButton의 색상을 설정하며, 기본값은 검정색입니다. <code>get_color()</code> 함수에서 색상 값을 반환합니다.

note: (itstool) path: section/p
en: In line 23 the <code>"color-set"</code> signal is connected to the callback function <code>on_color_chosen()</code> using <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. See <link xref="signals-callbacks.py"/> for a more detailed explanation.
ko: 23번째 줄에서, <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code> 코드로 <code>"color-set"</code> 시그널을 <code>on_color_chosen()</code> 콜백 함수에 연결했습니다. 더 자세한 설명은 <link xref="signals-callbacks.py"/>를 참조하십시오.

[ctx: text]
note: (itstool) path: info/title
en: ColorButton (Vala)
ko: ColorButton(Vala)

note: (itstool) path: page/p
en: RGB values of the selected color are shown in the label.
ko: 레이블에 선택한 색의 RGB 값을 나타냅니다.

[ctx: text]
note: (itstool) path: info/title
en: ComboBoxText (JavaScript)
ko: ComboBoxText(JavaScript)

note: (itstool) path: info/desc
en: A text-only drop-down menu
ko: 텍스트 전용 드롭 다운 메뉴

note: (itstool) path: page/p
en: A ComboBox is a drop-down menu. The difference between a <link xref="combobox.js">ComboBox</link> and a ComboBoxText is that a ComboBoxText just has basic text options, while a full ComboBox uses a ListStore or TreeStore (which are basically spreadsheets) to show things like branching options, or pictures to go alongside each choice.
ko: 콤보박스는 드롭 다운 메뉴입니다. <link xref="combobox.js">ComboBox</link>와 ComboBoxText의 차이점이라면 ComboBoxText는 텍스트만 있는 위젯이고, 완전한 ComboBox는 분기 옵션이나, 각 선택 항목의 그림을 보여주는 ListStore나 TreeStore(기본적으로 스프레드 시트 같음)를 사용하는 위젯입니다.

note: (itstool) path: note/p
en: Unless you need the added features of a full ComboBox, or are comfortable working with ListStores and TreeStores, you may find it a lot simpler to use a ComboBoxText whenever possible.
ko: 완전한 기능을 갖춘 ComboBox가 필요하거나, ListStore와 TreeStore를 사용하지 않은 이상 가능하다면 ComboBoxText를 사용하는게 훨씬 간단합니다.

note: (itstool) path: section/p
en: All the code for this sample goes in the MessageDialogExample class. The above code creates a <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html">Gtk.Application</link> for our widgets and window to go in.
ko: 이 예제의 모든 코드는 MessageDialogExample 클래스에 넣었습니다. 위 코드에서는 위젯과 창을 담아둘 <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html">Gtk.Application</link>을 만들었습니다.

note: (itstool) path: section/p
en: The _buildUI function is where we put all the code to create the application's user interface. The first step is creating a new <link xref="GtkApplicationWindow.js">Gtk.ApplicationWindow</link> to put all our widgets into.
ko: _buildUI 함수는 프로그램 사용자 인터페이스를 만드는 모든 코드를 넣는 곳입니다. 첫 단계에서는 모든 위젯을 우겨넣을 새 <link xref="GtkApplicationWindow.js">Gtk.ApplicationWindow</link>를 만듭니다.

note: (itstool) path: section/title
en: Creating the ComboBoxText
ko: ComboBoxText 만들기

note: (itstool) path: section/p
en: After we create the ComboBoxText, we use its <file>append_text</file> method to add text strings to it. Like the entries in an array, they each have a number for an ID, starting with 0. To make things simpler, you can actually create an array for your ComboBoxText entries, then use a for loop to append them in order, like we did here.
ko: ComboBoxText를 만들고 나서 <file>append_text</file> 메서드를 사용하여 텍스트 스트링을 0번부터 시작하는 숫자 ID를 가진 배열에 추가하겠습니다. 단순하게 갖출 목적으로 ComboBoxText 항목을 실제로 배열로 만든 다음에 순서대로 넣고, 넣은 방식대로 for 반복문으로 붙여넣겠습니다.

note: (itstool) path: section/p
en: After we populate the ComboBoxText, we set its first entry to be active, so that we'll see the "Select distribution" line before we click on it. Then we connect its <file>changed</file> signal to the _onComboChanged function, so that it's called whenever you make a new selection from the drop-down menu.
ko: ComboBoxText를 갖추고 나서 첫번째 항목을 표시하여 ComboBoxText를 누르기 전에 "Select distribution" 줄이 나타나게 하겠습니다. 그 다음 <file>changed</file> 시그널을 _onComboChanged  함수에 연결하여 드롭 다운 메뉴에서 새 항목을 선택할 때마다 호출하도록 하겠습니다.

note: (itstool) path: note/p
en: If you'd like to add an entry to a ComboBoxText, you can use the <file>insert_text</file> method. And if you'd rather use a text string as an ID for each entry than rely on numbers alone, you can use the <file>append</file> and <file>insert</file> methods. See the links at the bottom of this tutorial for the details of how to use them.
ko: ComboBoxText에 항목을 추가하려면  <file>insert_text</file> 메서드를 사용할 수 있습니다. 각 항목의 ID를 숫자만이 아닌 텍스트 문자열을 사용하려한다면 <file>append</file> 메서드와 <file>insert</file> 메서드를 사용할 수 있습니다. 활용 방안에 대한 자세한 지침서 내용은 하단 링크를 살펴보시지요.

note: (itstool) path: section/p
en: Finally, we add the ComboBoxText to the window, and tell the window to show itself and the widget inside it.
ko: 마지막으로 ComboBoxText를 창에 추가하고, 창 자신과 위젯을 나타내게 하겠습니다.

note: (itstool) path: section/title
en: Function which handles your selection
ko: 선택을 처리하는 함수

note: (itstool) path: section/p
en: We're going to create a pop-up <link xref="messagedialog.js">MessageDialog</link>, which shows you a message based on which distro you select. First, we create the array of responses to use. Since the first string in our ComboBoxText is just the "Select distribution" message, we make the first string in our array blank.
ko: 배포판 선택 기반으로 메시지를 보여주는 <link xref="messagedialog.js">MessageDialog</link> 팝업을 만들려고 합니다. 우선, 사용할 응답 배열을 만들겠습니다. ComboBoxText의 첫 문자열은 그냥 "Select distribution" 메시지니까, 배열의 첫번째 문자열은 비워두겠습니다.

note: (itstool) path: section/p
en: Before showing a MessageDialog, we first test to make sure you didn't choose the "Select distribution" message. After that, we set its text to be the entry in the array that corresponds to the active entry in our ComboBoxText. We do that using the <file>get_active</file> method, which returns the number ID of your selection.
ko: MessageDialog를 나타내기 전, "Select distribution" 메시지를 선택하지 않았는지 우선 확인해야 합니다. 확인하고 나면 ComboBoxText의 선택 항목과 관련하여 배열의 항목 텍스트를 설정합니다. 선택 항목의 숫자 ID를 반환하는 <file>get_active</file> 메서드를 사용하겠습니다.

note: (itstool) path: note/p
en: Other methods you can use include <file>get_active_id,</file> which returns the text ID assigned by <file>append,</file> and <file>get_active_text,</file> which returns the full text of the string you selected.
ko: <file>append</file>로 할당한 텍스트 ID를 반환하는 <file>get_active_id</file> 메서드 말고도, 선택한 항목의 완전한 텍스트를 반환하는 <file>get_active_text</file> 메서드가 있습니다.

note: (itstool) path: section/p
en: After we create the MessageDialog, we connect its response signal to the _onDialogResponse function, then tell it to show itself.
ko: MessageDialog를 만들고 나면, _onDialogResponse 함수에 반응 시그널을 연결하고 MessageDialog를 나타내게 하겠습니다.

note: (itstool) path: section/p
en: Since the only button the MessageDialog has is an OK button, we don't need to test its response_id to see which button was clicked. All we do here is destroy the popup.
ko: MessageDialog에는 확인 단추만 있기 때문에 response_id에서 어떤 단추를 눌렀는지 굳이 확인할 필요가 없습니다. 그냥 띄운 창을 닫기만 하면 됩니다.

note: (itstool) path: section/p
en: Finally, we create a new instance of the finished ComboBoxTextExample class, and set the application running.
ko: 마지막으로, 코드 작성을 마무리한 ComboBoxTextExample 클래스의 새 인스턴스를 만들고, 프로그램 실행을 구성하겠습니다.

[ctx: text]
note: (itstool) path: info/title
en: ComboBox (C)
ko: ComboBox(C)

note: (itstool) path: info/desc
en: A widget used to choose from a list of items
ko: 항목 목록을 선택할 때 사용하는 위젯

note: (itstool) path: page/p
en: This ComboBox prints to the terminal when you change your selection.
ko: 이 ComboBox는 여러분이 바꿔서 선택한 내용을 터미널에 나타냅니다.

[ctx: text]
note: (itstool) path: info/title
en: ComboBox (JavaScript)
ko: ComboBox(JavaScript)

note: (itstool) path: info/desc
en: A customizable drop-down menu
ko: 개별 설정 가능한 드롭 다운 메뉴

note: (itstool) path: page/p
en: A ComboBox is an extremely customizable drop-down menu. It holds the equivalent of a <link xref="treeview_simple_liststore.js">TreeView</link> widget that appears when you click on it, complete with a ListStore (basically a spreadsheet) that says what's in the rows and columns. In this example, our ListStore has the name of each option in one column, and the name of a stock icon in the other, which the ComboBox then turns into an icon for each option.
ko: ComboBox는 완전 지멋대로 고칠 수 있는 드롭다운 메뉴입니다. 드롭다운 메뉴를 누르면 <link xref="treeview_simple_liststore.js">TreeView</link> 위젯을 나타내고, 행열에 무엇이 들어있는지 알려주는 ListStore(기본적인 스프레드시트) 위젯으로 끝내는 것과 동일한 구조를 지닙니다. 이 예제에서 ListStore에는 한 칸에 각 옵션의 이름을 넣고 스톡 아이콘 이름을 다른 곳에 넣으며, 각 콤보박스에서 각 옵션의 아이콘을 나타내게 하겠습니다.

note: (itstool) path: page/p
en: You select a whole horizontal row at a time, so the icons aren't treated as separate options. They and the text beside them make up each option you can click on.
ko: 우선 한번에 수평 줄 하나를 선택하기에 아이콘은 개별 옵션으로 취급하지 않습니다. 아이콘과 텍스트 한 묶음이 여러분이 누를 수 있는 옵션 하나를 이룹니다.

note: (itstool) path: note/p
en: Working with a ListStore can be time-consuming. If you just want a simple text-only drop-down menu, take a look at the <link xref="comboboxtext.js">ComboBoxText</link>. It doesn't take as much time to set up, and is easier to work with.
ko: ListStrore를 다루는 과정은 시간이 좀 걸릴 수 있습니다. 간단하게 텍스트만 있는 드롭다운 메뉴를 원하면 <link xref="comboboxtext.js">ComboBoxText</link> 사용을 고려하십시오. 구성에 시간이 별로 오래 걸리지 않을 뿐더러 다루기도 쉽습니다.

note: (itstool) path: section/p
en: All the code for this sample goes in the ComboBoxExample class. The above code creates a <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html">Gtk.Application</link> for our widgets and window to go in.
ko: 이 예제의 모든 코드는 ComboBoxExample 클래스에 넣었습니다. 위 코드에서는 위젯과 창을 담아둘 <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html">Gtk.Application</link>을 만들었습니다.

note: (itstool) path: section/title
en: Creating the ListStore
ko: ListStore 만들기

note: (itstool) path: section/p
en: This ListStore works like the one used in the <link xref="treeview_simple_liststore.js">TreeView</link> example. We're giving it two columns, both strings, because one of them will contain the names of <link href="https://developer.gnome.org/gtk3/3.4/gtk3-Stock-Items.html">stock Gtk icons</link>.
ko: ListStore는 <link xref="treeview_simple_liststore.js">TreeView</link> 예제에서 사용했던 것과 비슷하게 동작합니다. ListStore에 문자열을 저장하는 두 칸을 확보했는데요, 이 중 하나는 <link href="https://developer.gnome.org/gtk3/3.4/gtk3-Stock-Items.html">스톡 gtk 아이콘</link> 이름이 들어갑니다.

note: (itstool) path: section/p
en: If we'd wanted to use our own icons that weren't already built in to GNOME, we'd have needed to use the <file>gtk.gdk.Pixbuf</file> type instead. Here are a few other types you can use:
ko: 그놈에 내장하지 않은 자체 보유 아이콘을 사용한다면, 대신 <file>gtk.gdk.Pixbuf</file> 형식을 사용해야합니다. 여러분이 사용할 수 있는 몇가지 기타 형식을 알려드리겠습니다:

note: (itstool) path: item/p
en: <file>GObject.TYPE_BOOLEAN</file> -- True or false
ko: <file>GObject.TYPE_BOOLEAN</file> -- 참/거짓

note: (itstool) path: item/p
en: <file>GObject.TYPE_FLOAT</file> -- A floating point number (one with a decimal point)
ko: <file>GObject.TYPE_FLOAT</file> -- 소수(소수점 하나 들어감)

note: (itstool) path: item/p
en: <file>GObject.TYPE_STRING</file> -- A string of letters and numbers
ko: <file>GObject.TYPE_STRING</file> -- 문자, 숫자로 이루어진 문장

note: (itstool) path: note/p
en: You need to put the line <file>const GObject = imports.gi.GObject;</file> at the start of your application's code, like we did in this example, if you want to be able to use GObject types.
ko: GObject 형식을 사용할 수 있게 하려면, 우리가 예제에서 했던 것처럼 프로그램 코드 시작 부분에 <file>const GObject = imports.gi.GObject;</file> 를 넣으세요.

note: (itstool) path: section/p
en: Here we create an array of the text options and their corresponding icons, then put them into the ListStore in much the same way we would for a <link xref="treeview_simple_liststore.js">TreeView's</link> ListStore. We only want to put an icon in if there's actually an icon in the options array, so we make sure to check for that first.
ko: 여기서 각각의 아이콘과 텍스트 옵션에 대한 배열을 만들고, <link xref="treeview_simple_liststore.js">TreeView</link>  ListStore와 매우 동일한 방식으로 ListStore에 배열을 넣겠습니다. 옵션 배열에 실제로 아이콘이 있을 경우에만 아이콘을 넣을테니 우선 확인부터 해보겠습니다.

note: (itstool) path: note/p
en: "Select" isn't really an option so much as an invitation to click on our ComboBox, so it doesn't need an icon.
ko: "선택"은 ComboBox에서 마우스로 누르게 하는 것인 만큼 진짜 옵션은 아니니까, 아이콘이 필요가 없습니다.

note: (itstool) path: section/title
en: Creating the ComboBox
ko: ComboBox 만들기

note: (itstool) path: section/p
en: Each ComboBox has an underlying "model" it takes all its options from. You can use a TreeStore if you want to have a ComboBox with branching options. In this case, we're just using the ListStore we already created.
ko: 각 ComboBox에는 자체 옵션을 가진 기반 "모델"이 있습니다. ComboBox에 별개 분기 옵션을 넣고 싶다면 TreeStore를 사용할 수 있죠. 지금 같은 경우는, 그냥 이미 만든 ListStore를 사용하겠습니다.

note: (itstool) path: section/code
en: 
            // Create some cellrenderers for the items in each column
            let rendererPixbuf = new Gtk.CellRendererPixbuf();
            let rendererText = new Gtk.CellRendererText();
    
            // Pack the renderers into the combobox in the order we want to see
            this._comboBox.pack_start (rendererPixbuf, false);
            this._comboBox.pack_start (rendererText, false);
    
            // Set the renderers to use the information from our liststore
            this._comboBox.add_attribute (rendererText, "text", 0);
            this._comboBox.add_attribute (rendererPixbuf, "stock_id", 1);
ko: 
            // Create some cellrenderers for the items in each column
            let rendererPixbuf = new Gtk.CellRendererPixbuf();
            let rendererText = new Gtk.CellRendererText();
    
            // Pack the renderers into the combobox in the order we want to see
            this._comboBox.pack_start (rendererPixbuf, false);
            this._comboBox.pack_start (rendererText, false);
    
            // Set the renderers to use the information from our liststore
            this._comboBox.add_attribute (rendererText, "text", 0);
            this._comboBox.add_attribute (rendererPixbuf, "stock_id", 1);
    에

note: (itstool) path: section/p
en: This part, again, works much like creating CellRenderers and packing them into the columns of a <link xref="treeview_simple_liststore.js">TreeView</link>. The biggest difference is that we don't need to create the ComboBox's columns as separate objects. We just pack the CellRenderers into it in the order we want them to show up, then tell them to pull information from the ListStore (and what type of information we want them to expect).
ko: 이 부분에서는 다시 말하지만, CellRenderer를 만들고 <link xref="treeview_simple_liststore.js">TreeView</link>의 칸에 넣는 식으로 손이 많이 가고 있죠. 큰 차이점이 있다면 ComboBox의 칸을 별개 객체로 만들 필요가 없다는겁니다. 그냥 CellRenderer를 보여주고 싶은 대로 감싸넣고, ListStore에서 정보를 가져오게 하는거죠(그리고 기대하던 정보 형식도요).

note: (itstool) path: section/p
en: We use a CellRendererText to show the text, and a CellRendererPixbuf to show the icons. We can store the names of the icons' stock types as strings, but when we display them we need a CellRenderer that's designed for pictures.
ko: 텍스트를 보여줄 때 CellRendererText를 사용하고, CellRendererPixbuf로 아이콘을 보여주겠습니다. 아이콘 스톡 이름은 문자열로 입력하여 저장할 수 있지만은, 화면에 표시할 때는 그림을 보여주도록 설계한 CellRenderer가 필요합니다.

note: (itstool) path: note/p
en: Just like with a TreeView, the "model" (in this case a ListStore) and the "view" (in this case our ComboBox) are separate. Because of that, we can do things like have the columns in one order in the ListStore, and then pack the CellRenderers that correspond to those columns into the ComboBox in a different order. We can even create a TreeView or other widget that shows the information in the ListStore in a different way, without it affecting our ComboBox.
ko: TreeView처럼, "모델"(이 경우, ListStore)과 "뷰"(이 경우, ComboBox)를 따로 분리합니다. ListStore에서 한가지 순서를 갖춘 열으로 뭔가를 할 수 있고, ComboBox에 다른 순서로 넣은 각각의 열을  CellRenderer에 감싸두기 때문입니다. ListStore에 정보를 저장해서 보여줄 때 ComboBox에 영향을 주지 않고도 TreeView를 만들거나 다른 위젯을 만들 수 있습니다.

note: (itstool) path: section/p
en: We want the "Select" text to be the part people see at first, that gets them to click on the ComboBox. So we set it to be the active entry. We also connect the ComboBox's <file>changed</file> signal to a callback function, so that any time someone clicks on a new option something happens. In this case, we're just going to show a popup with a little haiku.
ko: 우선 여러 사람이 "선택" 텍스트를 먼저 보게한 후 ComboBox를 누르게 하려고 합니다. 그렇게 해서 "선택"을 활성 항목으로 설정했습니다. 또한 ComboBox의 <file>changed</file> 시그널을 콜백 함수에 연결해서 누군가가 새 옵션을 누를 때, 어떤 일이 일어나게 했습니다. 지금 같은 경우, 간단한 시구를 보여주겠습니다.

note: (itstool) path: section/p
en: Finally, we add the ComboBox to the window, and tell the window to show itself and everything inside it.
ko: 마지막으로 ComboBox를 창에 추가하고, 창에 창 자신과 창에 들어간 위젯을 보여주게 했습니다.

note: (itstool) path: section/p
en: We're going to create a pop-up <link xref="messagedialog.js">MessageDialog</link>, which shows you a silly haiku based on which distro you select. First, we create the array of haiku to use. Since the first string in our ComboBox is just the "Select" message, we make the first string in our array blank.
ko: 선택한 배포판 이름에 따라 시구 아무거나 보여주는 <link xref="messagedialog.js">MessageDialog</link> 팝업을 만들고 있죠. 우선, 사용할 시구의 배열을 만들고. ComboBox에 처음 나타날 문자열은 "선택" 메시지니, 배열의 첫번째 문자열은 비워두겠습니다.

note: (itstool) path: section/p
en: Before showing a MessageDialog, we first test to make sure you didn't choose the "Select" message. After that, we set its text to be the haiku in the array that corresponds to the active entry in our ComboBoxText. We do that using the <file>get_active</file> method, which returns the number ID of your selection.
ko: MessageDialog를 보여주기 전에요, "선택" 메시지를 선택하지 못하게 했는지 일단 확인하겠습니다. 그 다음 ComboBoxText의 활성 항목에 따른 배열에 시구 텍스트를 넣겠습니다. 선택 항목의 숫자 ID를 반환하는 <file>get_active</file> 메서드를 사용하여 처리할거구요.

note: (itstool) path: note/p
en: Other methods you can use include <file>get_active_id</file>, which returns the text ID assigned by <file>append</file>, and <file>get_active_text</file>, which returns the full text of the string you selected.
ko: 사용할 수 있는 또다른 메서드는 <file>append</file>로 할당한 텍스트 ID를 반환하는 <file>get_active_id</file> 메서드하고, 선택 항목 텍스트 전체를 반환하는 <file>get_active_text</file> 메서드가 있습니다.

note: (itstool) path: section/p
en: Finally, we create a new instance of the finished ComboBoxExample class, and set the application running.
ko: 끝으로, ComboBoxExample 클래스의 새 인스턴스를 만들고요, 프로그램 실행을 구성하겠습니다.

[ctx: text]
note: (itstool) path: info/title
en: ComboBox (Python)
ko: ComboBox(Python)

note: (itstool) path: page/title
en: ComboBox (one column)
ko: ComboBox(한 칸 짜리)

note: (itstool) path: page/p
en: This ComboBox prints to the terminal your selection when you change it.
ko: 이 ComboBox는 여러분이 바꿔서 선택한 내용을 터미널에 나타냅니다.

note: (itstool) path: section/title
en: Useful methods for a ComboBox widget
ko: ComboBox 위젯에 쓸만한 함수

note: (itstool) path: section/p
en: The ComboBox widget is designed around a <em>Model/View/Controller</em> design: the <em>Model</em> stores the data; the <em>View</em> gets change notifications and displays the content of the model; the <em>Controller</em>, finally, changes the state of the model and notifies the view of these changes. For more information and for a list of useful methods for ComboBox see <link xref="model-view-controller.py"/>.
ko: ComboBox 위젯은 <em>모델/뷰/컨트롤러</em> 설계 방식따라 설계했습니다. <em>모델</em>에는 데이터가 들어가고요, <em>View</em>에는 바뀜 알림을 받아서 모델의 내용을 표시합니다. 마지막으로, <em>컨트롤러</em>에서는, 모델의 상태를 바꾸고 뷰가 바뀌었다는걸 알리죠. ComboBox에서 쓸만한 메서드 목록 내용은 <link xref="model-view-controller.py"/>를 확인해보시죠.

note: (itstool) path: section/p
en: In line 35 the <code>"changed"</code> signal is connected to the callback function <code>on_changed()</code> using <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. See <link xref="signals-callbacks.py"/> for a more detailed explanation.
ko: 35번째 줄에서, <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code> 코드로  <code>"changed"</code> 시그널을 <code>on_changed()</code> 콜백 함수에 연결했습니다. 더 자세한 설명은 <link xref="signals-callbacks.py"/>를 참조하십시오.

note: (itstool) path: item/p
en: <link href="http://git.gnome.org/browse/pygobject/tree/gi/overrides/Gtk.py">pygobject - Python bindings for GObject Introspection</link>
ko: <link href="http://git.gnome.org/browse/pygobject/tree/gi/overrides/Gtk.py">pygobject - GObject 인트로스펙션 파이썬 바인딩</link>

[ctx: text]
note: (itstool) path: info/title
en: ComboBox (Vala)
ko: ComboBox(Vala)

note: (itstool) path: page/title
en: ComboBox (two columns)
ko: ComboBox(두 칸 짜리)

note: (itstool) path: section/p
en: In line 45 the <code>"changed"</code> signal is connected to the callback function <code>on_changed()</code> using <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. See <link xref="signals-callbacks.py"/> for a more detailed explanation.
ko: 45번째 줄에서, <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code> 코드로  <code>"changed"</code> 시그널을 <code>on_changed()</code> 콜백 함수에 연결했습니다. 더 자세한 설명은 <link xref="signals-callbacks.py"/>를 참조하십시오.

note: (itstool) path: item/p
en: <link href="http://developer.gnome.org/gtk3/unstable/gtk3-Stock-Items.html">Stock Items</link>
ko: <link href="http://developer.gnome.org/gtk3/unstable/gtk3-Stock-Items.html">스톡 항목</link>

note: (itstool) path: page/title
en: Code samples and platform demos in C++
ko: C++ 예제 코드 및 플랫폼 데모

note: (itstool) path: section/title
en: Examples of applications
ko: 프로그램 예제

[ctx: text]
note: (itstool) path: info/title
en: Dialog (C)
ko: Dialog(C)

note: (itstool) path: info/desc
en: A popup window
ko: 뜨는 창

note: (itstool) path: page/p
en: A dialog window that pops up when a button is pressed.
ko: 단추를 누르면 튀어나오는 대화상자 창입니다.

[ctx: text]
note: (itstool) path: info/title
en: Dialog (JavaScript)
ko: Dialog(JavaScript)

note: (itstool) path: page/p
en: A customizable popup window, which has a content area and an action area. This example dialog's content area contains a short message, and its action area contains a button which dismisses the dialog.
ko: 개별적으로 이리저리 바꿀 수 있는 팝업 대화상자에는 내용 영역과 동작 영역이 있습니다. 이 예제 대화상자의 내용 영역에는 간단한 문구가 있으며 동작 영역에는 대화상자를 닫는 단추가 있습니다.

[ctx: text]
note: (itstool) path: info/title
en: Dialog (Python)
ko: Dialog(Python)

note: (itstool) path: page/p
en: A dialog with the response signal connected to a callback function.
ko: 콜백 함수에 응답 시그널을 연결한 대화상자입니다.

note: (itstool) path: section/title
en: Useful methods for a Dialog widget
ko: Dialog 위젯에 쓸만한 메서드

note: (itstool) path: section/p
en: In line 16 the signal <code>"clicked"</code> is connected to the callback function <code>on_button_click()</code> using <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. See <link xref="signals-callbacks.py"/> for a more detailed explanation.
ko: 16번째 줄에서, <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code> 코드로  <code>"clicked"</code> 시그널을 <code>on_button_click()</code> 콜백 함수에 연결했습니다. 더 자세한 설명은 <link xref="signals-callbacks.py"/>를 참조하십시오.

note: (itstool) path: item/p
en: Instead of <code>set_modal(True)</code> we could have <code>set_modal(False)</code> followed by <code>set_destroy_with_parent(True)</code> that would destroy the dialog window if the main window is closed.
ko: <code>set_modal(True)</code> 대신 <code>set_modal(False)</code>로 호출하고, 그 뒤에 <code>set_destroy_with_parent(True)</code> 함수를 호출해서 메인 창을 닫으면 대화상자 창을 닫을 수 있게 할 수 있습니다.

note: (itstool) path: item/p
en: <code>add_button(button_text="The Answer", response_id=42)</code>, where <code>42</code> is any integer, is an alternative to <code>add_button(button_text="text", response_id=Gtk.ResponseType.RESPONSE)</code>, where <code>RESPONSE</code> could be one of <code>OK, CANCEL, CLOSE, YES, NO, APPLY, HELP</code>, which in turn correspond to the integers <code>-5, -6,..., -11</code>.
ko: 임의의 정수 값 <code>42</code>를 갖는 <code>add_button(button_text="The Answer", response_id=42)</code> 대신, <code>RESPONSE</code> 자리에 <code>-5, -6,..., -11</code> 정수형 값에 해당하는 <code>OK, CANCEL, CLOSE, YES, NO, APPLY, HELP</code>중 하나가 오는 <code>add_button(button_text="text", response_id=Gtk.ResponseType.RESPONSE)</code> 호출 방식을 쓸 수 있습니다.

[ctx: text]
note: (itstool) path: info/title
en: Dialog (Vala)
ko: Dialog(Vala)

note: (itstool) path: page/p
en: A dialog with the response signal hooked up to a callback function.
ko: 콜백 함수에 응답 시그널을 걸어두는 대화상자입니다.

[ctx: text]
note: (itstool) path: info/title
en: Entry (C)
ko: Entry(C)

note: (itstool) path: info/desc
en: A single line text entry field
ko: 단일 행 텍스트 항목 필드

note: (itstool) path: page/p
en: This application greets you in the terminal.
ko: 이 프로그램은 터미널에 인사말을 남깁니다.

[ctx: text]
note: (itstool) path: info/title
en: Entry (JavaScript)
ko: Entry(JavaScript)

note: (itstool) path: info/desc
en: A single-line text entry field
ko: 단일 행 텍스트 항목 필드

note: (itstool) path: page/p
en: This application greets you by name through a pop-up window.
ko: 이 프로그램은 별도로 띄우는 창에 이름을 붙여 인사말을 남깁니다.

[ctx: text]
note: (itstool) path: info/title
en: Entry (Python)
ko: Entry(Python)

note: (itstool) path: page/p
en: This application greets you in the terminal with the name you provide.
ko: 이 프로그램은 터미널에 입력한 이름과 함께 인사를 출력합니다.

note: (itstool) path: section/code
en: from gi.repository import Gtk
    import sys
    
    
    class MyWindow(Gtk.ApplicationWindow):
    
        def __init__(self, app):
            Gtk.Window.__init__(self, title="What is your name?", application=app)
            self.set_default_size(300, 100)
            self.set_border_width(10)
    
            # a single line entry
            name_box = Gtk.Entry()
            # emits a signal when the Enter key is pressed, connected to the
            # callback function cb_activate
            name_box.connect("activate", self.cb_activate)
    
            # add the Gtk.Entry to the window
            self.add(name_box)
    
        # the content of the entry is used to write in the terminal
        def cb_activate(self, entry):
            # retrieve the content of the widget
            name = entry.get_text()
            # print it in a nice form in the terminal
            print("Hello " + name + "!")
    
    
    class MyApplication(Gtk.Application):
    
        def __init__(self):
            Gtk.Application.__init__(self)
    
        def do_activate(self):
            win = MyWindow(self)
            win.show_all()
    
        def do_startup(self):
            Gtk.Application.do_startup(self)
    
    app = MyApplication()
    exit_status = app.run(sys.argv)
    sys.exit(exit_status)
ko: from gi.repository import Gtk
    import sys
    
    
    class MyWindow(Gtk.ApplicationWindow):
    
        def __init__(self, app):
            Gtk.Window.__init__(self, title="What is your name?", application=app)
            self.set_default_size(300, 100)
            self.set_border_width(10)
    
            # a single line entry
            name_box = Gtk.Entry()
            # emits a signal when the Enter key is pressed, connected to the
            # callback function cb_activate
            name_box.connect("activate", self.cb_activate)
    
            # add the Gtk.Entry to the window
            self.add(name_box)
    
        # the content of the entry is used to write in the terminal
        def cb_activate(self, entry):
            # retrieve the content of the widget
            name = entry.get_text()
            # print it in a nice form in the terminal
            print("Hello " + name + "!")
    
    
    class MyApplication(Gtk.Application):
    
        def __init__(self):
            Gtk.Application.__init__(self)
    
        def do_activate(self):
            win = MyWindow(self)
            win.show_all()
    
        def do_startup(self):
            Gtk.Application.do_startup(self)
    
    app = MyApplication()
    exit_status = app.run(sys.argv)
    sys.exit(exit_status)
    수

note: (itstool) path: section/title
en: Useful methods for an Entry widget
ko: Entry 위젯에 쓸만한 메서드

note: (itstool) path: section/p
en: In line 14 the signal <code>"activate"</code> is connected to the callback function <code>cb_activate()</code> using <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. See <link xref="signals-callbacks.py"/> for a more detailed explanation. Some of the signals that a Gtk.Entry widget can emit are: <code>"activate"</code> (emitted when the user activates the Entry key); <code>"backspace"</code> (emitted when the user activates the Backspace or Shift-Backspace keys); <code>"copy-clipboard"</code> (Ctrl-c and Ctrl-Insert); <code>"paste-clipboard"</code> (Ctrl-v and Shift-Insert); <code>"delete-from-cursor"</code> (Delete, for deleting a character; Ctrl-Delete, for deleting a word); <code>"icon-press"</code> (emitted when the user clicks an activatable icon); <code>"icon-release"</code> (emitted on the button release from a mouse click over an activatable icon); <code>"insert-at-cursor"</code> (emitted when the user initiates the insertion of a fixed string at the cursor); <code>"move-cursor"</code> (emitted when the user initiates a cursor movement); <code>"populate-popup"</code> (emitted before showing the context menu of the entry; it can be used to add items to it).
ko: 14번째 줄에서 <code>"activate"</code> 시그널은 <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code> 콜백 함수에 연결했습니다. 콜백 함수에 연결했습니다. 더 자세한 설명은 <link xref="signals-callbacks.py"/>를 참조하십시오. Gtk.Entry 위젯에서 나타날 수 있는 일부 시그널은 <code>"activate"</code> (사용자가 Entry 키를 눌렀을 때 나타남), <code>"backspace"</code> (사용자가 Backspace 또는 Shift-Backspace 키를 눌렀을 때 나타남), <code>"copy-clipboard"</code> (Ctrl-c와 Ctrl-Insert키를 눌렀을 때), <code>"paste-clipboard"</code> (Ctrl-v와 Shift-Insert 키를 눌렀을 때), <code>"delete-from-cursor"</code> (문자를 지울 때 Delete 키를 눌렀을 때, 단어를 지울 경우 Ctrl-Delete키를 눌렀을 때) <code>"icon-press"</code> (사용자가 활성화할 수 있는 아이콘을 눌렀을 때 나타남), <code>"icon-release"</code> (사용자가 활성화할 수 있는 아이콘을 누른 상황에서 마우스 커서를 그 위에 두고 단추를 뗐을 때 나타남), <code>"insert-at-cursor"</code> (사용자가 커서 위치에 지정 문자열을 넣기 시작할 때 나타남), <code>"move-cursor"</code> (사용자가 커서 이동을 시작할 때 나타남), <code>"populate-popup"</code> (항목의 단축 메뉴를 나타내기 전에 나타남. 단축 메뉴에 항목을 추가할 때 사용할 수 있습니다)이 있습니다.

note: (itstool) path: item/p
en: <code>get_buffer()</code> and <code>set_buffer(buffer)</code>, where <code>buffer</code> is a Gtk.EntryBuffer object, can be used to get and set the buffer for the entry.
ko: <code>get_buffer()</code>와 <code>set_buffer(buffer)</code>는 항목의 버퍼를 가져오거나 설정할 때 사용할 수 있으며, <code>buffer</code> 자리에는 Gtk.EntryBuffer 객체가 들어갑니다.

note: (itstool) path: item/p
en: <code>get_text()</code> and <code>set_text("some text")</code> can be used to get and set the content for the entry.
ko: <code>get_text()</code>와 <code>set_text("some text")</code>는 항목의 텍스트 내용을 가져오고 설정할 때 사용할 수 있습니다.

note: (itstool) path: item/p
en: <code>get_text_length()</code> is self-explanatory.
ko: <code>get_text_length()</code> 메서드는 이름 그대로 동작합니다.

note: (itstool) path: item/p
en: <code>get_text_area()</code> gets the area where the entry's text is drawn.
ko: <code>get_text_area()</code>는 항목 텍스트를 그린 영역(크기)를 가져옵니다.

note: (itstool) path: item/p
en: If we set <code>set_visibility(False)</code> the characters in the entry are displayed as the invisible char. This is the best available in the current font, but it can be changed with <code>set_invisible_char(ch)</code>, where <code>ch</code> is a Unicode character. The latter method is reversed by <code>unset_invisible_char()</code>.
ko: <code>set_visibility(False)</code>를 설정하면 항목에 나타난 문자를 숨깁니다. 현재 글꼴로 나타내는게 가장 좋지만, <code>set_invisible_char(ch)</code>로 특정 글자를 숨길 수 있으며, <code>ch</code> 자리에는 유니코드 문자가 들어갑니다. 후자 메서드의 반대 역할을 하는 메서드는 <code>unset_invisbile_char()</code>입니다.

note: (itstool) path: item/p
en: <code>set_max_length(int)</code>, where <code>int</code> is an integer, truncates every entry longer than <code>int</code> to have the desired maximum length.
ko: <code>set_max_length(int)</code> 함수는 항목이 최대 결정 길이 <code>int</code>를 넘으면 자르며, <code>int</code> 값은 정수형입니다.

note: (itstool) path: item/p
en: By default, if you press the Entry key the Gtk.Entry emits the signal <code>"activate"</code>. If you would like to activate the default widget for the window (set using <code>set_default(widget)</code> on the window), then use <code>set_activates_default(True)</code>.
ko: 기본적으로 Entry 키를 누르면 <code>"activate"</code> 시그널을 내보냅니다. 창의 기본 위젯으로 활성화하려면(창에서 <code>set_default(widget)</code> 메서드 호출), <code>set_activates_default(True)</code> 메서드를 호출하십시오.

note: (itstool) path: item/p
en: To set a frame around the entry: <code>set_has_frame(True)</code>.
ko: 항목에 테두리를 설정하려면 <code>set_has_frame(True)</code>를 실행하십시오.

note: (itstool) path: item/p
en: <code>set_placeholder_text("some text")</code> sets the text to be displayed in the entry when it is empty and unfocused.
ko: <code>set_placeholder_text("some text")</code> 메서드는 항목이 비어있으며 포커스를 주지 않았을 경우 나타낼 텍스트를 설정합니다.

note: (itstool) path: item/p
en: <code>set_overwrite_mode(True)</code> and <code>set_overwrite_mode(False)</code> are self-explanatory.
ko: <code>set_overwrite_mode(True)</code>및 <code>set_overwrite_mode(False)</code> 메서드는 이름 그대로 동작합니다.

note: (itstool) path: item/p
en: If we have <code>set_editable(False)</code> the user cannot edit the text in the widget.
ko: <code>set_editable(False)</code> 메서드를 호출하면 사용자가 위젯의 텍스트를 편집할 수 없습니다.

note: (itstool) path: item/p
en: <code>set_completion(completion)</code>, where <code>completion</code> is a <link href="http://developer.gnome.org/gtk3/unstable/GtkEntryCompletion.html"><code>Gtk.EntryCompletion</code></link>, sets completion - or disables it if <code>completion</code> is <code>None</code>.
ko: <code>completion</code>이 <link href="http://developer.gnome.org/gtk3/unstable/GtkEntryCompletion.html"><code>Gtk.EntryCompletion</code></link>인 <code>set_completion(completion)</code> 함수는 <code>completion</code> 값이 <code>None</code>일 경우 completion 값을 설정하거나 비활성화합니다.

note: (itstool) path: item/p
en: An Entry widget can display progress or activity information behind the text. We use <code>set_progress_fraction(fraction)</code>, where <code>fraction</code> is a <code>float</code> between <code>0.0</code> and <code>1.0</code> inclusive, to fill in the given fraction of the bar. We use <code>set_progress_pulse_step()</code> to set the fraction of total entry width to move the progress bouncing block for each call to <code>progress_pulse()</code>. The latter method indicates that some progress is made, and causes the progress indicator of the entry to enter "activity mode", where a block bounces back and forth. Each call to <code>progress_pulse()</code> causes the block to move by a little bit (the amount of movement per pulse is determined, as said before, by <code>set_progress_pulse_step()</code>).
ko: 항목 위젯에는 화면에 나타난 텍스트 이면의 진행 상황 또는 활동 정보를 나타낼 수 있습니다. 진행 표시줄 막대에 비율을 주어 채워넣을 목적으로 <code>set_progress_fraction(fraction)</code> 함수를 사용하며, 여기서 <code>fraction</code> 은 <code>0.0</code> 과 <code>1.0</code> 사이의 <code>float</code> 값입니다. <code>progress_pulse()</code>를 호출할 때마다 진행 표시줄 바운싱 블록을 이동할 전체 항목 너비 비율을 설정할 때 <code>set_progress_pulse_step()</code> 함수를 사용합니다. 후자 함수는 일부 진행 과정을 끝냈고 블록이 앞뒤로 튀는 항목의 진행 상황 표시자가 "활동 모드"로 들어감을 나타냅니다. 각각의 함수는 <code>progress_pulse()</code>를 호출하여블록을 약간씩 움직이게 합니다(앞에서 말한 바와 같이 <code>set_progress_pulse_step()</code> 함수로 주기당 움직이는 정도를 결정합니다).

note: (itstool) path: item/p
en: An Entry widget can also show icons. These icons can be activatable by clicking, can be set up as drag source and can have tooltips. To add an icon, use <code>set_icon_from_stock(icon_position, stock_id)</code>, or one of <code>set_icon_from_pixbuf(icon_position, pixbuf)</code>, <code>set_icon_from_icon_name(icon_position, icon_name)</code>, where <code>icon_position</code> is one of <code>Gtk.EntryIconPosition.PRIMARY</code> (to set the icon at the beginning of the entry) <code>Gtk.EntryIconPosition.SECONDARY</code> (to set the icon at the end of the entry). To set a tooltip on an icon, use <code>set_icon_tooltip_text("tooltip text")</code> or <code>set_icon_tooltip_markup("tooltip text in Pango markup language")</code>.
ko: 항목 위젯은 아이콘을 나타낼 수도 있습니다. 이 아이콘은 눌렀을 떄 활성화할 수 있는데, 끌어다 놓을 수 있게 할 수 있으며, 풍선 도움말을 설정할 수도 있습니다. 아이콘을 추가하려면 <code>set_icon_from_stock(icon_position, stock_id)</code> 또는 <code>set_icon_from_pixbuf(icon_position, pixbuf)</code>, <code>set_icon_from_icon_name(icon_position, icon_name)</code> 둘 중 하나를 사용하시면 되며 <code>icon_position</code> 에는 <code>Gtk.EntryIconPosition.PRIMARY</code> (항목 시작 부분에 아이콘 위치) <code>Gtk.EntryIconPosition.SECONDARY</code> (항목 뒷 부분에 아이콘 위치) 값 중 하나가 들어갑니다 아이콘에 풍선 도움말을 설정하려면, <code>set_icon_tooltip_text("풍선 도움말 문장")</code> 또는 <code>set_icon_tooltip_markup("팡고 마크업 언어를 사용한 풍선 도움말 문장")</code> 함수를 사용하십시오.

[ctx: text]
note: (itstool) path: info/title
en: Entry (Vala)
ko: Entry(Vala)

[ctx: text]
note: (itstool) path: info/title
en: FileChooserDialog (Python)
ko: FileChooserDialog(Python)

note: (itstool) path: info/desc
en: A dialog suitable for "Open" and "Save" commands
ko: "열기" 및 "저장" 명령에 알맞은 대화상자

note: (itstool) path: page/p
en: This FileChooserDialog saves a text document, which can be opened or written from scratch in a TextView (see below).
ko: FileChooserDialog는 TextView에 열었거나 바닥부터 새로 작성한 텍스트 문서를 저장합니다(하단 참고).

note: (itstool) path: page/p
en: It is also possible to call a FileChooserDialog to open a new document.
ko: 새 문서를 열 때 FileChooserDialog를 호출할 수 있습니다.

note: (itstool) path: section/title
en: Steps to recreate the example
ko: 예제를 다시 만드는 과정

note: (itstool) path: item/p
en: Create a file .ui to describe an app-menu with items "New", "Open", "Save", "Save as", and "Quit". This can be done with Glade or in a text editor. See <link xref="#xml"/>
ko: "New", "Open", "Save", "Save as", "Quit" 항목이 들어간 app-menu 설명 .ui 파일을 만드십시오. 글레이드 개발 환경이나 텍스트 편집기에서 처리할 수 있습니다. <link xref="#xml"/> 내용을 참고하십시오.

note: (itstool) path: item/p
en: Create a Python program for a Gtk.TextView with a Gtk.Buffer <code>self.buffer</code>, and a <code>self.file</code> which will be a Gio.File and we set initially as <code>None</code>.
ko: Gtk.TextViewGtk.Buffer <code>self.buffer</code>와 <code>None</code>으로 초기값을 설정한 Gio.File 형식의 <code>self.file</code> 로 Gtk.TextView 파이썬 프로그램을 만드십시오.

note: (itstool) path: item/p
en: In this program, create also the actions corresponding to the items in the app-menu, connect them to callback functions, and import the menu in the <code>do_startup()</code> method with a Gtk.Builder.
ko: 이 프로그램에서 app-menu에 항목마다 관련 동작을 만드시고, 콜백 함수에 연결하신 다음, Gtk.Builder의 <code>do_startup()</code> 메서드로 메뉴를 가져오십시오.

note: (itstool) path: item/p
en: "New" and "Quit" actions and callback functions are quite straightforward, see <link xref="#code"/>. See <link xref="signals-callbacks.py"/> for a more detailed explanation of signals and callback functions.
ko: "새 파일" 및 "끝내기" 동작과 콜백 함수는 조금 단순합니다. <link xref="#code"/>를 참고해보시죠. 시그널 및 콜백 함수에 대한 자세한 설명은 <link xref="signals-callbacks.py"/>를 살펴보십시오.

note: (itstool) path: item/p
en: "Open" callback should create and open a Gtk.FileChooserDialog for "Open", connected with another callback function for each of the two "Open" and "Cancel" buttons of the FileChooserDialog.
ko: "열기" 콜백 함수에서는 "열기" 동작에 맞게 Gtk.FileChooserDialog를 만들고 연 다음, FileChooserDialog의 "열기" 및 "취소" 단추에 제각기 다른 콜백 함수를 연결해야합니다.

note: (itstool) path: item/p
en: "Save as" works basically as "Open", but the callback function of the "Save" button depends on a more complex method <code>save_to_file()</code>.
ko: "다른 이름으로 저장"은 "열기"와 근본적으로 비슷하게 동작하지만, "저장" 단추의 콜백 함수 동작은 좀 더 복잡한 메서드 <code>save_to_file()</code>에 따릅니다.

note: (itstool) path: item/p
en: "Save" can be reduced to the case where the file is <code>None</code>, that is the case where <code>self.file</code> is a new file, which in turn is the case "Save as"; and to the case where the file is not <code>None</code>, which in turn is reduced to <code>save_to_file()</code>.
ko: "저장" 동작은, <code>self.file</code> 이 새 파일이어서 파일이 <code>None</code>(없음)일 경우로 경우의 수를 줄일 수 있으며, 이때는 "다른 이름으로 저장"인 경우로 되돌릴 수 있습니다. 그리고 파일이 <code>None</code>(없음) 상태가 아닐 경우, <code>save_to_file()</code> 호출만으로 과정을 줄입니다.

note: (itstool) path: item/p
en: Finally, the method <code>save_to_file()</code>: see <link xref="#code"/>, lines 146 - 175.
ko: 마지막으로, <code>save_to_file()</code> 메서드는 <link xref="#code"/> 146번째 줄부터 175번째 줄 까지의 부분을 참고하십시오.

note: (itstool) path: section/title
en: XML file which creates the app-menu
ko: app-menu를 만드는 XML 파일

note: (itstool) path: section/title
en: Useful methods for a FileChooserDialog
ko: FileChooserDialog에 쓸만한 메서드

note: (itstool) path: section/p
en: Note that the action of the FileChooserDialog can be one of the following: <code>Gtk.FileChooserAction.OPEN</code> (the file chooser will only let the user pick an existing file) <code>Gtk.FileChooserAction.SAVE</code> (the file chooser will let the user pick an existing file, or type in a new filename), <code>Gtk.FileChooserAction.SELECT_FOLDER</code> (the file chooser will let the user pick an existing folder), <code>Gtk.FileChooserAction.CREATE_FOLDER</code> (the file chooser will let the user name an existing or new folder).
ko: 참고로 FileChooserDialog 동작은 <code>Gtk.FileChooserAction.OPEN</code>(사용자가 기존 파일을 선택하기만 할 수 있음) <code>Gtk.FileChooserAction.SAVE</code>(사용자가 기존 파일을 선택하거나, 새 파일 이름을 입력할 수 있음), <code>Gtk.FileChooserAction.SELECT_FOLDER</code>(사용자가 기존 폴더를 선택하기만 할 수 있음), <code>Gtk.FileChooserAction.CREATE_FOLDER</code>(사용자가 기존 폴더를 선택하거나, 새 폴더 이름을 입력할 수 있음) 중 하나일 수 있습니다.

note: (itstool) path: section/p
en: Besides the methods used in the <link xref="#code"/>, we have:
ko: <link xref="#code"/>에서 사용한 메서드 주변을 보자면:

note: (itstool) path: item/p
en: <code>set_show_hidden(True)</code> is used to display hidden files and folders.
ko: <code>set_show_hidden(True)</code> 함수로 숨김 파일과 숨김 폴더를 나타냈습니다.

note: (itstool) path: item/p
en: <code>set_select_multiple(True)</code> sets that multiple files can be selected. This is only relevant if the mode is <code>Gtk.FileChooserAction.OPEN</code> or <code>Gtk.FileChooserAction.SELECT_FOLDER</code>.
ko: <code>set_select_multiple(True)</code> 함수로 여러 파일을 선택할 수 있게 했습니다. <code>Gtk.FileChooserAction.OPEN</code> 또는 <code>Gtk.FileChooserAction.SELECT_FOLDER</code> 모드일 때만 가능합니다.

note: (itstool) path: item/p
en: In a "Save as" dialog, <code>set_current_name(current_name)</code> sets <code>current_name</code> in the file selector, as if entered by the user; <code>current_name</code> can be something like <em>Untitled.txt</em>. This method should not be used except in a "Save as" dialog.
ko: "다른 이름으로 저장" 대화 상자에서 <code>set_current_name(current_name)</code> 함수로 파일 선택 창의 <code>current_name</code>을 마치 사용자가 입력한 것처럼 설정했습니다. <code>current_name</code> 값은 <em>Untitled.txt</em>와 같은 값이 될 수 있습니다. 이 메서드는 "다른 이름으로 저장" 대화상자를 제외하고느 사용하지 않는게 좋습니다.

note: (itstool) path: item/p
en: The default current folder is "recent items". To set another folder use <code>set_current_folder_uri(uri)</code>; but note you should use this method and cause the file chooser to show a specific folder only when you are doing a "Save as" command and you already have a file saved somewhere.
ko: 기본 현재 폴더는 "최근 항목" 입니다. 다른 폴더를 지정하려면 <code>set_current_folder_uri(uri)</code> 함수를 사용하십시오. 그러나 참고로 "다른 이름으로 저장" 명령을 사용하거나 이미 파일을 어딘가에 저장했을 경우에만 이 메서드를 사용하여 파일 선택 대화상자를 통해 지정 폴더를 나타내야합니다.

note: (itstool) path: info/desc
en: A dialog suitable for "Open" and "Save" commands.
ko: "열기" 및 "저장" 명령에 알맞은 대화상자입니다.

note: (itstool) path: section/title
en: Overview of the example
ko: 예제 살펴보기

note: (itstool) path: section/p
en: This example demonstrates how the FileChooserDialog can be used. It is incorporated into a very simple text editor application. All the <link xref="menubar.vala#win-app">actions</link>, including the "open", "save" and "save-as" commands can be found in the <link xref="gmenu.vala">app-menu</link>. Here, the app-menu is created using an XML UI file, which is then imported into the application using Gtk.Builder.
ko: 이 예제는 FileChooserDialog를 어떻게 사용할 수 있는지 보여줍니다. 파일 선택 대화상자는 간단한 텍스트 편집기 프로그램에 있습니다. "열기", "저장", "다른 이름으로 저장" 명령과 같은 모든 <link xref="menubar.vala#win-app">동작</link>은 <link xref="gmenu.vala">app-menu</link>에서 찾을 수 있으며, 여기서 app-menu는 XML UI 파일로 만들고, Gtk.Builder로 프로그램에 가져올 수 있습니다.

note: (itstool) path: section/title
en: XML UI file which creates the app-menu
ko: app-menu를 만드는 XML UI 파일

note: (itstool) path: section/title
en: Vala Code
ko: Vala 코드

note: (itstool) path: section/title
en: Relevant API documentation
ko: 관련 API 문서

note: (itstool) path: info/desc
en: A widget to choose a font
ko: 글꼴을 선택하는 위젯

note: (itstool) path: page/p
en: A FontChooserWidget with a callback function.
ko: 콜백 함수와 사용하는 FontChooserWidget입니다.

note: (itstool) path: section/title
en: Useful methods for a FontChooserWidget
ko: FontChooserWidget에 쓸만한 메서드

note: (itstool) path: section/p
en: In line 16 the <code>"notify::font"</code> signal from the widget is connected to the callback function <code>font_cb()</code> using <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. See <link xref="signals-callbacks.py"/> for a more detailed explanation.
ko: 16번째 줄에서, <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code> 코드로 <code>"notify::font"</code> 시그널을 <code>font_cb()</code> 콜백 함수에 연결했습니다. 더 자세한 설명은 <link xref="signals-callbacks.py"/>를 참조하십시오.

note: (itstool) path: item/p
en: To set the font which is initially selected, use <code>set_font(font)</code> (where <code>font</code> is the font name) or <code>set_font_desc(font)</code> (where <code>font</code> is the PangoFontDescription).
ko: 초기에 선택하는 글꼴을 설정하려면 <code>set_font(font)</code> (<code>font</code> 는 글꼴 이름) 또는 <code>set_font_desc(font)</code> (<code>font</code> 는 PangoFontDescription 객체) 함수를 사용하십시오.

note: (itstool) path: item/p
en: To get the selected font use <code>get_font()</code> or <code>get_font_desc()</code>.
ko: 선택한 글꼴을 가져오려면 <code>get_font()</code> 또는 <code>get_font_desc()</code> 함수를 사용하십시오.

note: (itstool) path: item/p
en: To change the text which is shown in the preview area, use <code>set_preview_text()</code>.
ko: 미리 보기 화면에 나타난 텍스트를 바꾸려면 <code>set_preview_text()</code> 함수를 사용하십시오.

[ctx: text]
note: (itstool) path: info/title
en: FontChooserWidget (Vala)
ko: FontChooserWidget(Vala)

note: (itstool) path: page/p
en: A FontChooserWidget with a lambda callback function.
ko: 람다 콜백 함수를 사용하는 FontChooserWidget입니다.

[ctx: text]
note: (itstool) path: info/title
en: GMenu (C)
ko: GMenu(C)

note: (itstool) path: info/desc
en: A simple implementation of GMenuModel
ko: GMenuModel의 간단한 구현체

note: (itstool) path: page/p
en: A GtkApplication with a simple GMenu and SimpleActions
ko: 간단한 GMenu 및 SimpleAction과 사용하는 GtkApplication

[ctx: text]
note: (itstool) path: info/title
en: GMenu (JavaScript)
ko: GMenu(JavaScript)

[ctx: text]
note: (itstool) path: info/title
en: GMenu (Python)
ko: GMenu(Python)

note: (itstool) path: info/desc
en: A simple implementation of GMenu
ko: GMenu의 간단한 구현체

note: (itstool) path: section/title
en: Useful methods for a GSimpleAction and a GMenu
ko: GSimpleAction과 GMenu에 쓸만한 메서드

note: (itstool) path: section/p
en: In line 33 the signal <code>"activate"</code> from the action <code>new_action</code> (not the menu!) is connected to the callback function <code>new_cb()</code> using <code><var>action</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. See <link xref="signals-callbacks.py"/> for a more detailed explanation.
ko: 33번째 줄에서 <code>new_action</code> 동작의 <code>"activate"</code> 시그널은 <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code> 콜백 함수에 연결했습니다. 더 자세한 설명은 <link xref="signals-callbacks.py"/>를 참조하십시오.

note: (itstool) path: section/p
en: Useful methods for a GSimpleAction:
ko: GSimpleAction에 쓸만한 메서드:

note: (itstool) path: item/p
en: To create a new action that is <em>stateless</em>, that is, an action that do not retain or depend on a state given by the action itself, use
ko: 동작 자체에 주어진 상태를 유지하거나 이에 따르지 않아 <em>상태를 반영하지 않는</em> 새 동작을 만들려면 다음 코드를 사용하십시오.

note: (itstool) path: item/p
en: where <code>"name"</code> is the name of the action and <code>parameter_type</code> is the type of the parameters that the action receives when being activated. This can be <code>None</code>, or <code>GLib.VariantType.new('s')</code> if the parameter is of type <code>str</code>, or instead of <code>'s'</code> a character as described <link href="http://developer.gnome.org/glib/unstable/glib-GVariantType.html">here</link>. To create a new <em>stateful</em> (i.e. not stateless) action, use
ko: 여기서 <code>"name"</code>는 동작 이름,  <code>parameter_type</code>은 활성화했을 때 받는 동작을 나타내는 매개변수 형식입니다. <code>parameter_type</code> 값은 <code>None</code> 또는, 매개변수 값 형식이 <code>str</code> 일 경우 <code>GLib.VariantType.new('s')</code> 또는 <link href="http://developer.gnome.org/glib/unstable/glib-GVariantType.html">여기</link>서 설명한대로 <code>'s'</code> 문자를 그냥 쓰면 됩니다. 새 <em>상태 반영</em>(무상태 아님) 동작을 만들려면 다음 코드를 사용하십시오.

note: (itstool) path: item/p
en: where <code>initial_state</code> is defined as a GVariant - for instance <code>Glib.Variant.new_string('start')</code>; for a list of possibilities see <link href="http://developer.gnome.org/glib/unstable/glib-GVariant.html">here</link>.
ko: 여기서 <code>initial_state</code>는 GVariant 형식으로 정의합니다. 이를 테면 <code>Glib.Variant.new_string('start')</code> 코드가 있습니다. 가능한 코드를 보려면 <link href="http://developer.gnome.org/glib/unstable/glib-GVariant.html">이 문서</link>를 참고하십시오.

note: (itstool) path: item/p
en: <code>set_enabled(True)</code> sets the action as enabled; an action must be enabled in order to be activated or in order to have its state changed from outside callers. This should only be called by the implementor of the action. Users of the action should not attempt to modify its enabled flag.
ko: <code>set_enabled(True)</code> 함수는 동작 활성화를 설정하며, 활성화하거나 외부 호출자가 상태를 바꾸게 하려면 반드시 동작을 활성화해야 합니다. 이 함수는 동작 구현체에서만 호출해야 합니다. 동작 사용자는 활성 플래그를 수정하지 못하게 해야합니다.

note: (itstool) path: item/p
en: <code>set_state(state)</code>, where <code>state</code> is a GVariant, sets the state of the action, updating the 'state' property to the given value. This should only be called by the implementor of the action; users of the action should instead call <code>change_state(state)</code> (where <code>state</code> is as above) to request the change.
ko: <code>set_state(state)</code> 함수는 주어진 값으로 'state' 속성 값을 업데이트하여 동작의 상태를 설정하며, <code>state</code> 는 GVariant 형식입니다. 이 함수는 동작 구현체에서만 호출해야합니다. 동작 사용자는 상태 전환을 요청하려면 이 함수 대신 <code>change_state(state)</code>(<code>state</code> 값은 위에서 설명) 함수를 사용해야합니다.

note: (itstool) path: section/p
en: Useful methods for a GMenu:
ko: GMenu에 쓸만한 메서드:

note: (itstool) path: item/p
en: To insert an item in the menu in position <code>position</code>, use <code>insert(position, label, detailed_action)</code>, where <code>label</code> is the label that will appear in the menu and <code>detailed_action</code> is a string composed of the name of the action to which we prepend the prefix <code>app.</code>. A more detailed discussion of this can be found in <link xref="menubar.py#win-app"/>.
ko: 항목을 메뉴의 <code>position</code> 위치에 넣으려면 <code>insert(position, label, detailed_action)</code> 함수를 활용하십시오. 여기서 <code>label</code> 은 메뉴에 나타나는 레이블이며, <code>detailed_action</code> 는 앞에 <code>app.</code>이 뭍는 동작 이름으로 이루어진 문자열이 들어갑니다. 이 부분에 대한 자세한 이야기에는 <link xref="menubar.py#win-app"/>에 있습니다.

note: (itstool) path: item/p
en: To append or prepend an item in the menu use respectively <code>append(label, detailed_action)</code> and <code>prepend(label, detailed_action)</code>.
ko: 메뉴에 항목을 뒤에 붙이려면 <code>append(label, detailed_action)</code> 함수를, 앞에 붙이려면 <code>prepend(label, detailed_action)</code> 함수를 사용하십시오.

note: (itstool) path: item/p
en: Another way of adding items to the menu is to create them as <code>GMenuItem</code>s and use <code>insert_item(position, item)</code>, <code>append_item(item)</code>, or <code>prepend_item(item)</code>; so for instance we might have:
ko: 메뉴에 항목을 추가하는 다른 방법으로는 <code>GMenuItem</code> 항목을 만들고 <code>insert_item(position, item)</code>, <code>append_item(item)</code>, <code>prepend_item(item)</code> 함수를 사용하는 방법입니다. 그러니까 예를 들면 다음 코드와 같습니다:

note: (itstool) path: item/p
en: We can also add a whole subsection in a menu using <code>insert_section(position, label, section)</code>, <code>append_section(label, section)</code>, or <code>prepend_section(label, section)</code>, where <code>label</code> is the title of the subsection.
ko: 메뉴에 <code>insert_section(position, label, section)</code>, <code>append_section(label, section)</code>, <code>prepend_section(label, section)</code> 함수로 전체 하위 섹션을 추가할 수 있습니다. 여기서 <code>label</code>은 하위 섹션의 제목입니다.

note: (itstool) path: item/p
en: To add a submenu that will expand and collapse, use <code>insert_submenu(position, label, section)</code>, <code>append_submenu(label, section)</code>, or <code>prepend_submenu(label, section)</code>, where <code>label</code> is the title of the subsection.
ko: 나타내고 숨길 하위 메뉴를 추가하려면 <code>insert_submenu(position, label, section)</code>, <code>append_submenu(label, section)</code>, <code>prepend_submenu(label, section)</code> 함수를 사용하십시오. 여기서 <code>label</code>은 하위 섹션의 제목입니다.

note: (itstool) path: item/p
en: To remove an item from the menu, use <code>remove(position)</code>.
ko: 메뉴 항목을 제거하려면 <code>remove(position)</code> 함수를 사용하십시오.

note: (itstool) path: item/p
en: To set a label for the menu, use <code>set_label(label)</code>.
ko: 메뉴에 레이블을 설정하려면 <code>set_label(label)</code> 함수를 사용하십시오.

note: (itstool) path: note/p
en: <em style="strong">You need to be running GTK+-3.4 or later for this to work</em>
ko: <em style="strong">이 코드가 동작하려면 GTK+-3.4 이상이 필요합니다</em>

note: (itstool) path: info/desc
en: Pack widgets in rows and columns
ko: 위젯을 행열 방향으로 감쌉니다

note: (itstool) path: page/p
en: A button widget connected to a progress bar.
ko: 진행 표시줄에 연결한 단추 위젯입니다.

[ctx: text]
note: (itstool) path: info/title
en: Grid (JavaScript)
ko: Grid(JavaScript)

note: (itstool) path: page/p
en: A button widget connected to a progress bar, inside of a grid which handles the layout.
ko: 단추 위젯은 배치를 다루는 격자의 진행 표시에 연결합니다.

[ctx: text]
note: (itstool) path: info/title
en: Grid (Python)
ko: Grid(Python)

note: (itstool) path: page/p
en: Some labels in a grid.
ko: 그리드에 레이블 몇 개를 넣어봤습니다.

note: (itstool) path: section/title
en: Useful methods for a Grid widget
ko: Grid 위젯에 쓸만한 메서드

note: (itstool) path: item/p
en: To attach a widget <code>child</code> in position <code>left, top</code> in a slot of given <code>width, height</code> use <code>attach(child, top, left, width, height)</code>. If a widget <code>sibling</code> is already in place, we can also use <code>attach_next_to(child, sibling, side, width, height)</code>, where <code>side</code> is one of <code>Gtk.PositionType.LEFT, Gtk.PositionType.RIGHT, Gtk.PositionType.TOP, Gtk.PositionType.BOTTOM</code>.
ko: <code>width, height</code> 크기로 <code>left, top</code> 위치에 <code>child</code>  위젯을 붙이려면 <code>attach(child, top, left, width, height)</code> 함수를 사용하십시오, <code>sibling</code> 위젯을 이미 두었다면 <code>attach_next_to(child, sibling, side, width, height)</code> 함수를 사용할 수 있습니다. 여기서 <code>side</code> 값은 <code>Gtk.PositionType.LEFT, Gtk.PositionType.RIGHT, Gtk.PositionType.TOP, Gtk.PositionType.BOTTOM</code> 중 하나입니다.

note: (itstool) path: item/p
en: <code>insert_row(position)</code> and <code>insert_column(position)</code> do exactly what they say; children which are attached at or below this position are moved one row down, and children which span across this position are grown to span the new row. <code>insert_next_to(sibling, side)</code> inserts a row or column at the specified position. The new row or column is placed next to <code>sibling</code>, on the side determined by <code>side</code>; if side is <code>Gtk.PositionType.TOP</code> or <code>Gtk.PositionType.BOTTOM</code>, a row is inserted, if side is <code>Gtk.PositionType.LEFT</code> or <code>Gtk.PositionType.RIGHT</code>, a column is inserted.
ko: <code>insert_row(position)</code> 함수와 <code>insert_column(position)</code> 함수는 주어진 이름대로 정확하게 동작합니다. 이 위치 옆에 붙은 하위 요소 또는 아래에 붙은 하위 요소를 한줄 아래로 내리며, 이 위치의 하위 요소는 (종,횡 방향으로) 새 줄을 확장합니다. <code>insert_next_to(sibling, side)</code>  함수는 지정 위치에 줄이나 행을 넣습니다. 즉, 이 함수는 새 줄 또는 행을 <code>sibling</code> 다음의 <code>side</code>에서 지정한 위치에 넣습니다. <code>side</code> 값이 <code>Gtk.PositionType.TOP</code> 또는 <code>Gtk.PositionType.BOTTOM</code>이면 새 줄을 넣고, <code>Gtk.PositionType.LEFT</code> 또는 <code>Gtk.PositionType.RIGHT</code>면 새 칸을 넣습니다.

note: (itstool) path: item/p
en: <code>set_row_homogeneous(True)</code> and <code>set_column_homogeneous(True)</code> ensure that (respectively) every row or every column has the same width or height.
ko: <code>set_row_homogeneous(True)</code> 함수는 각각 모든 줄의 높이를 동일하게 설정하며 <code>set_column_homogeneous(True)</code> 함수는 모든 칸의 너비를 동일하게 설정합니다.

note: (itstool) path: item/p
en: <code>set_row_spacing(spacing)</code> and <code>set_column_spacing(spacing)</code> force a spacing between (respectively) rows or columns. The value of <code>spacing</code> can be between <code>0</code>, which is the default value, and <code>32767</code>.
ko: <code>set_row_spacing(spacing)</code>함수는 줄 간격을 강제로 설정하고 <code>set_column_spacing(spacing)</code> 함수는 칸 간격을 강제로 설정합니다. <code>spacing</code> 값은 기본값 <code>0</code>에서 <code>32767</code>값 사이입니다.

[ctx: text]
note: (itstool) path: info/title
en: Grid (Vala)
ko: Grid(Vala)

note: (itstool) path: page/title
en: Grid widget
ko: 그리드 위젯

note: (itstool) path: info/desc
en: A toplevel window which can contain other widgets, and support GMenu
ko: 다른 위젯을 넣을 수 있고 GMenu를 지원하는 최상위 창

note: (itstool) path: page/p
en: A minimal GtkApplication with a GtkApplicationWindow
ko: GtkApplicationWindow를 사용하는 작은 GtkApplication

note: (itstool) path: info/desc
en: GtkWindow subclass with GtkApplication support
ko: GtkApplication을 지원하는 GtkWindow 하위 클래스

note: (itstool) path: page/p
en: A simple GtkApplicationWindow which can support Menus.
ko: Menu를 지원하는 간단한 GtkApplicationWindow 입니다.

note: (itstool) path: page/p
en: The simplest GtkApplication Window which can support <link xref="gmenu.py"/>.
ko: <link xref="gmenu.py"/>를 지원할 수 있는 간단한 GtkApplication 창입니다.

note: (itstool) path: section/title
en: Useful methods for a Gtk.ApplicationWindow widget
ko: Gtk.ApplicationWindow 위젯에 쓸만한 메서드

note: (itstool) path: item/p
en: <code>set_default_size(200, 100)</code> sets the default size of the window to a width of <code>200</code> and a height of <code>100</code>; if instead of a positive number we pass <code>-1</code> we have the default size.
ko: <code>set_default_size(200, 100)</code> 함수는 창의 기본 크기를 너비 <code>200</code>, 높이 <code>100</code>으로 설정합니다. 양수를 넣지 않을 때는 기본 크기를 설정할 때 대신 <code>-1</code> 값을 전달합니다.

note: (itstool) path: item/p
en: <code>set_position(Gtk.WindowPosition.CENTER)</code> centers the window. Other options are <code>Gtk.WindowPosition.NONE, Gtk.WindowPosition.MOUSE, Gtk.WindowPosition.CENTER_ALWAYS, Gtk.WindowPosition.CENTER_ON_PARENT</code>.
ko: <code>set_position(Gtk.WindowPosition.CENTER)</code> 함수는 창을 가운데에 놓습니다. 다른 옵션으로는 <code>Gtk.WindowPosition.NONE, Gtk.WindowPosition.MOUSE, Gtk.WindowPosition.CENTER_ALWAYS, Gtk.WindowPosition.CENTER_ON_PARENT</code>가 있습니다.

note: (itstool) path: page/p
en: The simplest GtkApplication Window which can support Menus.
ko: 메뉴를 지원하는 간단한 GtkApplication 창입니다.

[ctx: text]
note: (itstool) path: info/title
en: Guitar tuner (C)
ko: 기타 조율기(C)

note: (itstool) path: info/desc
en: Use GTK+ and GStreamer to build a simple guitar tuner application for GNOME. Shows off how to use the interface designer.
ko: GTK+와 지스트리머를 간단한 그놈용 기타 조율기 프로그램을 만들어보겠습니다. 인터페이스 디자이너 사용법을 나타냅니다.

note: (itstool) path: page/title
en: Guitar tuner
ko: 기타 조율기

note: (itstool) path: synopsis/p
en: In this tutorial, we're going to make a program which plays tones that you can use to tune a guitar. You will learn how to:
ko: 이 지침서에서, 기타 조율에 사용할 수 있는 음색을 재생하는 프로그램을 만들겠습니다. 다음 내용을 배워나갑니다:

note: (itstool) path: item/p
en: Set up a basic project in Anjuta
ko: 안주타에서 기본 프로젝트 설정

note: (itstool) path: item/p
en: Create a simple GUI with Anjuta's UI designer
ko: 안주타 사용자 인터페이스 디자이너에서 간단한 GUI 만들기

note: (itstool) path: item/p
en: Use GStreamer to play sounds
ko: 지스트리머를 사용하여 소리 재생하기

note: (itstool) path: synopsis/p
en: You'll need the following to be able to follow this tutorial:
ko: 이 지침을 따라갈 수 있으려면 다음이 필요합니다:

note: (itstool) path: item/p
en: An installed copy of the <link xref="getting-ready">Anjuta IDE</link>
ko: <link xref="getting-ready">안주타 IDE</link> 설치 사본

note: (itstool) path: item/p
en: Basic knowledge of the C programming language
ko: C 프로그래밍 언어 기본 지식

note: (itstool) path: section/title
en: Create a project in Anjuta
ko: 안주타에서 프로젝트 만들기

note: (itstool) path: section/p
en: Before you start coding, you'll need to set up a new project in Anjuta. This will create all of the files you need to build and run the code later on. It's also useful for keeping everything together.
ko: 코딩을 시작하기 전에 안주타에서 새 프로젝트를 설정해야합니다. 이 프로그램은 빌드에 필요한 모든 파일을 만들고 그 다음 코드를 실행합니다. 또한 이 모든 상태를 유지 관리하는데 쓸만합니다.

note: (itstool) path: item/p
en: Start Anjuta and click <guiseq><gui>File</gui><gui>New</gui><gui>Project</gui></guiseq> to open the project wizard.
ko: 안주타를 시작하고 <guiseq><gui>파일</gui><gui>새로 만들기</gui><gui>프로젝트</gui></guiseq> 를 눌러 프로젝트 마법사를 여십시오.

note: (itstool) path: item/p
en: Choose <gui>GTK+ (Simple)</gui> from the <gui>C</gui> tab, click <gui>Continue</gui>, and fill out your details on the next few pages. Use <file>guitar-tuner</file> as project name and directory.
ko: <gui>C</gui> 탭에서 <gui>GTK+ (단순)</gui>를 선택하고, <gui>계속</gui>을 누른 다음, 나타난 페이지에서 몇가지 자세한 내용을 입력하십시오. 프로젝트 이름과 디렉터리에 <file>guitar-tuner</file>를 입력하십시오.

note: (itstool) path: item/p
en: Make sure that <gui>Configure external packages</gui> is switched <gui>ON</gui>. On the next page, select <em>gstreamer-0.10</em> from the list to include the GStreamer library in your project.
ko: <gui>외부 패키지 설정</gui>을 <gui>켬</gui>으로 설정했는지 확인하십시오. 다음 페이지의 목록에서 <em>gstreamer-0.10</em>를 선택하여 프로젝트에 지스트리머 라이브러리를 넣으십시오.

note: (itstool) path: item/p
en: Click <gui>Apply</gui> and the project will be created for you. Open <file>src/main.c</file> from the <gui>Project</gui> or <gui>File</gui> tabs. You should see some code which starts with the lines:
ko: <gui>적용</gui>을 누르면 프로젝트를 만들어줍니다. <gui>프로젝트</gui>나 <gui>파일</gui>탭에서 <file>src/main.c</file> 파일을 여십시오. 다음 줄로 시작하는 일부 코드를 볼 수 있어야합니다:

note: (itstool) path: section/title
en: Build the code for the first time
ko: 첫 코드 작성

note: (itstool) path: section/p
en: C is a rather verbose language, so don't be surprised that the file contains quite a lot of code. Most of it is template code. It loads an (empty) window from the user interface description file and shows it. More details are given below; skip this list if you understand the basics:
ko: C는 장황하게 하나하나 다 따지고 들어가야 하는 언어니, 좀 많은 코드가 들어가 있는 파일에 놀라지 않으셔도 됩니다. 대부분은 서식 코드입니다. 이 코드에서는 사용자 인터페이스 설명 파일에서 (빈) 창을 불러와 열고 화면에 나타냅니다. 자세한 내용은 아래에 있습니다. 기본을 이미 알고 있다면 이 부분은 건너뛰십시오:

note: (itstool) path: item/p
en: The three <code>#include</code> lines at the top include the <code>config</code> (useful autoconf build defines), <code>gtk</code> (user interface) and <code>gi18n</code> (internationalization) libraries. Functions from these libraries are used in the rest of the code.
ko: 상단의 <code>#include</code> 세 줄은 <code>config</code>(쓸만한 autoconf 빌드 정의),  <code>gtk</code>(사용자 인터페이스), <code>gi18n</code>(국제화) 라이브러리입니다. 이 라이브러리의 함수를 나머지 코드에서 사용하겠습니다.

note: (itstool) path: item/p
en: The <code>create_window</code> function creates a new window by opening a GtkBuilder file (<file>src/guitar-tuner.ui</file>, defined a few lines above), connecting its signals and then displaying it in a window. The GtkBuilder file contains a description of a user interface and all of its elements. You can use Anjuta's editor to design GtkBuilder user interfaces.
ko: <code>create_window</code> 함수는 GtkBuilder 파일(<file>src/guitar-tuner.ui</file> 위 몇 줄 지정)을 열어 새 창을 만들고, 시그널을 연결한 다음, 창에 띄웁니다. GtkBuilder 파일에는 사용자 인터페이스 설명 정보와 구성요소 모두가 들어있습니다. GtkBuilder 사용자 인터페이스를 설계할 때 안주타 편집기를 사용할 수 있습니다.

note: (itstool) path: item/p
en: Connecting signals is how you define what happens when you push a button, or when some other event happens. Here, the <code>destroy</code> function is called (and quits the app) when you close the window.
ko: 시그널 연결은 단추를 누르거나 어떤 동작을 취할 때 처리할 일을 정의하는 방식입니다. 여기서 창을 닫을 때 <code>destroy</code> 함수를 호출(하고 앱을 끝내기)합니다.

note: (itstool) path: item/p
en: The <code>main</code> function is run by default when you start a C application. It calls a few functions which set up and then run the application. The <code>gtk_main</code> function starts the GTK main loop, which runs the user interface and starts listening for events (like clicks and key presses).
ko: <code>main</code> 함수는 C 프로그램을 시작할 때 기본으로 실행하는 함수입니다. 이 함수에서 몇가지 함수를 호출하여 설정하고 프로그램을 실행합니다. <code>gtk_main</code> 함수는 사용자 인터페이스를 실행하고 사용자 반응(마우스 단추 누름, 키보드 키 누름)대기를 시작하는 GTK 메인 루프 시작 함수입니다.

note: (itstool) path: item/p
en: The <code>ENABLE_NLS</code> conditional definition sets up <code>gettext</code>, which is a framework for translating applications. These functions specify how translation tools should handle your app when you run them.
ko: <code>ENABLE_NLS</code> 상태 정의는 프로그램을 번역하는 프레임워크 <code>gettext</code>를 설정합니다. 이 함수는 프로그램을 실행할 때 번역 도구가 프로그램을 어떻게 다뤄야 하는지를 설정합니다.

note: (itstool) path: section/p
en: This code is ready to be used, so you can compile it by clicking <guiseq><gui>Build</gui><gui>Build Project</gui></guiseq> (or press <keyseq><key>Shift</key><key>F7</key></keyseq>).
ko: 이 코드를 사용할 준비가 됐으니 <guiseq><gui>빌드</gui><gui>프로젝트 빌드</gui></guiseq>(또는 <keyseq><key>Shift</key><key>F7</key></keyseq> 키 누름)를 눌러 코드를 컴파일할 수 있습니다.

note: (itstool) path: section/p
en: Press <gui>Execute</gui> on the next window that appears to configure a debug build. You only need to do this once, for the first build.
ko: 디버깅 빌드 설정이 나타나는 다음 창에서 <gui>실행</gui> 을 누르십시오. 처음 빌드할 때 한번만 하면 됩니다.

note: (itstool) path: section/title
en: Create the user interface
ko: 사용자 인터페이스 만들기

note: (itstool) path: section/p
en: A description of the user interface (UI) is contained in the GtkBuilder file. To edit the user interface, open <file>src/guitar_tuner.ui</file>. This will switch to the interface designer. The design window is in the center; widgets and widgets' properties are on the left, and the palette of available widgets is on the right.
ko: 사용자 인터페이스(UI) 설명은 GtkBuilder 파일에 있습니다. 사용자 인터페이스를 편집하려면 <file>src/guitar_tuner.ui</file> 파일을 여십시오. 이 과정에서 바로 인터페이스 디자이너로 넘어갑니다. 설계 창은 가운데에 있고 위젯과 위젯 속성은 왼편에, 사용할 수 있는 위젯은 오른편에 있습니다.

note: (itstool) path: section/p
en: The layout of every UI in GTK+ is organized using boxes and tables. Let's use a vertical <gui>GtkButtonBox</gui> here to assign six <gui>GtkButtons</gui>, one for each of the six guitar strings.
ko: GTK+의 모든 UI 배치는 상자와 표로 구성합니다. 가로 방향 <gui>GtkButtonBox</gui>를 여기서 사용하여 각 기타 줄에 해당하는 여섯 개의 <gui>GtkButtons</gui> 단추를 넣어보겠습니다.

note: (itstool) path: item/p
en: Select a <gui>GtkButtonBox</gui> from the <gui>Container</gui> section of the <gui>Palette</gui> on the right and put it into the window. In the <gui>Properties</gui> pane, set the number of elements to 6 (for the six strings) and the orientation to vertical.
ko: 우측 <gui>팔레트</gui>의 <gui>컨테이너</gui> 섹션에서 <gui>GtkButtonBox</gui> 를 선택하여 창에 가져다 높으십시오. <gui>속성</gui> 창에서 구성 요소 수를 6(기타 줄 6개)으로 설정하고, 방향은 세로(vertical)로 설정하십시오.

note: (itstool) path: item/p
en: Now, choose a <gui>GtkButton</gui> from the palette and put it into the first part of the box.
ko: 이제 팔레트에서 <gui>GtkButton</gui> 를 선택하고 상자의 처음 부분에 가져다 놓으십시오.

note: (itstool) path: item/p
en: While the button is still selected, change the <gui>Label</gui> property in the <gui>Widgets</gui> tab to <gui>E</gui>. This will be the low E string.
ko: 단추를 선택한 상태에서 <gui>위젯</gui> 탭의 <gui>레이블</gui> 속성을 <gui>E</gui>로 바꾸십시오. 기타의 낮은 E 줄을 의미합니다.

note: (itstool) path: item/p
en: Switch to the <gui>Signals</gui> tab (inside the <gui>Widgets</gui> tab) and look for the <code>clicked</code> signal of the button. You can use this to connect a signal handler that will be called when the button is clicked by the user. To do this, click on the signal and type <code>on_button_clicked</code> in the <gui>Handler</gui> column and press <key>Return</key>.
ko: <gui>시그널</gui> 탭(<gui>위젯</gui> 탭에 있음)으로 옮겨가서 단추의 <code>clicked</code> 시그널을 찾아보십시오. 이 시그널을 사용자가 단추를 눌렀을 때 호출할 시그널 핸들러에 연결할 수 있습니다. 이렇게 하려면, 시그널을 누르고 <gui>핸들러</gui> 칸에 <code>on_button_clicked</code>를 입력하신 다음 <key>Return</key>키를 누르십시오.

note: (itstool) path: item/p
en: Repeat the above steps for the other buttons, adding the next 5 strings with the names <em>A</em>, <em>D</em>, <em>G</em>, <em>B</em>, and <em>e</em>.
ko: 다른 단추에 대해서도 그 다음 줄 이름 <em>A</em>, <em>D</em>, <em>G</em>, <em>B</em>, <em>e</em>를 추가하여 위 단계를 반복하십시오.

note: (itstool) path: item/p
en: Save the UI design (by clicking <guiseq><gui>File</gui><gui>Save</gui></guiseq>) and keep it open.
ko: UI 디자인을 저장(<guiseq><gui>파일</gui><gui>저장</gui></guiseq> 누름)하시고 열어둔 상태로 두십시오.

note: (itstool) path: section/title
en: Creating the signal handler
ko: 시그널 핸들러 만들기

note: (itstool) path: section/p
en: In the UI designer, you made it so that all of the buttons will call the same function, <gui>on_button_clicked</gui>, when they are clicked. We need to add that function in the source file.
ko: UI 디자이너에서 모든 단추를 누르면 동일한 <gui>on_button_clicked</gui> 함수를 호출하도록 할 수 있습니다. 이 함수를 소스 파일에 추가해야합니다.

note: (itstool) path: section/p
en: To do this, open <file>main.c</file> while the user interface file is still open. Switch to the <gui>Signals</gui> tab, which you already used to set the signal name. Now take the row where you set the <gui>clicked</gui> signal and drag it into to the source file at a position that is outside any function. The following code will be added to your source file:
ko: 이렇게 하려면, 사용자 인터페이스 파일을 열어둔 상태에서 <file>main.c</file> 파일을 여십시오. 시그널 이름을 설정하는데 사용한 <gui>시그널</gui> 탭으로 옮겨가십시오. 이제 <gui>clicked</gui> 시그널을 설정한 줄로 가서, 이 항목을 소스 파일의 함수 바깥에 끌어다 놓으십시오. 그러면 다음 코드가 소스 파일에 들어갑니다:

note: (itstool) path: section/p
en: This signal handler has two arguments: a pointer to the <code>GtkWidget</code> that called the function (in our case, always a <code>GtkButton</code>), and a pointer to some "user data" that you can define, but which we won't be using here. (You can set the user data by calling <code>gtk_builder_connect_signals</code>; it is normally used to pass a pointer to a data structure that you might need to access inside the signal handler.)
ko: 이 시그널 핸들러는 함수로 호출하는 <code>GtkWidget</code>(이 경우 항상 <code>GtkButton</code>)의 포인터, 그리고 여러분이 정의할 수 있지만 여기서는 활용하지 않을 "사용자 데이터" 포인터를 인자로 두고 있습니다(<code>gtk_builder_connect_signals</code>를 호출하여 사용자 데이터를 설정할 수 있습니다. 보통 시그널 핸들러 내에서 접근할 데이터 구조의 포인터를 전달할 때 사용합니다).

note: (itstool) path: section/p
en: For now, we'll leave the signal handler empty while we work on writing the code to produce sounds.
ko: 이제 소리를 내는 코드를 작성하는 동안 시그널 핸들러를 비워두겠습니다.

note: (itstool) path: section/title
en: GStreamer pipelines
ko: 지스트리머 파이프라인

note: (itstool) path: section/p
en: GStreamer is GNOME's multimedia framework — you can use it for playing, recording, and processing video, audio, webcam streams and the like. Here, we'll be using it to produce single-frequency tones.
ko: 지스트리머는 그놈 멀티미디어 프레임워크입니다. 동영상 오디오 웹캠 스트림 같은걸 재생, 녹음/녹화, 처리할 때 지스트리머를 사용할 수 있습니다. 여기서는 단일 주파수 음색을 만들 때 사용하겠습니다.

note: (itstool) path: section/p
en: Conceptually, GStreamer works as follows: You create a <em>pipeline</em> containing several processing elements going from the <em>source</em> to the <em>sink</em> (output). The source can be an image file, a video, or a music file, for example, and the output could be a widget or the soundcard.
ko: 개념적으로 지스트리머 동작은 다음과 같습니다. (우선) <em>source</em>에서  <em>sink</em>(출력)으로 내보낼 수많은 처리 요소가 들어간 <em>파이프라인</em>을 만듭니다. source는 그림 파일, 동영상, 음악 파일일 수 있으며, 출력 대상은 위젯 또는 사운드 카드가 될 수 있습니다.

note: (itstool) path: section/p
en: Between source and sink, you can apply various filters and converters to handle effects, format conversions and so on. Each element of the pipeline has properties which can be used to change its behaviour.
ko: source와 sink 사이에서 다양한 필터와 변환 프로그램을 적용하여 효과를 처리하거나, 형식을 변환하는 등을 할 수 있습니다. 각 파이프라인 구성 요소에는 동작을 바꿀 수 있는 속성이 있습니다.

note: (itstool) path: media/p
en: An example GStreamer pipeline.
ko: 지스트리머 파이프라인 예제입니다.

note: (itstool) path: section/title
en: Set up the pipeline
ko: 파이프라인 구성

note: (itstool) path: section/p
en: In this simple example we will use a tone generator source called <code>audiotestsrc</code> and send the output to the default system sound device, <code>autoaudiosink</code>. We only need to configure the frequency of the tone generator; this is accessible through the <code>freq</code> property of <code>audiotestsrc</code>.
ko: 여기 단순 예제에서는 <code>audiotestsrc</code> 라는 음 재생기 소스를 사용하고 기본 시스템 사운드 장치 <code>autoaudiosink</code>로 출력을 내보내겠습니다. 우리는 여기서 음 재생기 주파수를 설정해야합니다.  <code>audiotestsrc</code>의 <code>freq</code> 속성을 사용하면 됩니다.

note: (itstool) path: section/p
en: Insert the following line into <file>main.c</file>, just below the <code>#include &lt;gtk/gtk.h&gt;</code> line:
ko: 다음 줄을 <file>main.c</file>에 <code>#include &lt;gtk/gtk.h&gt;</code> 줄 바로 밑에 넣으십시오:

note: (itstool) path: section/p
en: This includes the GStreamer library. You also need to add a line to initialize GStreamer; put the following code on the line above the <code>gtk_init</code> call in the <code>main</code> function:
ko: 여기에 지스트리머 라이브러리가 들어있습니다. 아래 줄을 추가해서 지스트리머를 초기화해야합니다. <code>main</code>  함수의 <code>gtk_init</code> 함수 호출 위에 다음 코드를 넣으십시오:

note: (itstool) path: section/p
en: Then, copy the following function into <file>main.c</file> above the empty <code>on_button_clicked</code> function:
ko: 다음, 아래의 함수를 <file>main.c</file> 함수의 위에서 만들어 비워둔 <code>on_button_clicked</code> 함수에 복사해넣으십시오:

note: (itstool) path: item/p
en: The first five lines create source and sink GStreamer elements (<code>GstElement</code>), and a pipeline element (which will be used as a container for the other two elements). The pipeline is given the name "note"; the source is named "source" and is set to the <code>audiotestsrc</code> source; and the sink is named "output" and set to the <code>autoaudiosink</code> sink (default sound card output).
ko: 처음 다섯줄에서는 source와 sink 지스트리머 구성 요소(<code>GstElement</code>), 파이프라인 구성 요소(source와 sink의 컨테이너로 활용)를 만듭니다. 파이프라인 이름은 "note"라고 지어둡니다. source는 "source"로 이름 붙이고 <code>audiotestsrc</code>로 설정합니다. sink는 "output"으로 이름 붙이고 <code>autoaudiosink</code> sink로 설정합니다(기본은 사운드 카드 출력).

note: (itstool) path: item/p
en: The call to <code>g_object_set</code> sets the <code>freq</code> property of the source element to <code>frequency</code>, which is passed as an argument to the <code>play_sound</code> function. This is just the frequency of the note in Hertz; some useful frequencies will be defined later on.
ko: <code>g_object_set</code> 호출로 source 구성 요소의 <code>freq</code> 속성 값을 <code>play_sound</code> 함수에 인자로 전달할 <code>frequency</code> 로 설정합니다. 이 변수는 헤르쯔 단위의 음 주파수일 뿐입니다. 쓸만한 주파수는 나중에 설정하겠습니다.

note: (itstool) path: item/p
en: <code>gst_bin_add_many</code> puts the source and sink into the pipeline. The pipeline is a <code>GstBin</code>, which is just an element that can contain multiple other GStreamer elements. In general, you can add as many elements as you like to the pipeline by adding more arguments to <code>gst_bin_add_many</code>.
ko: <code>gst_bin_add_many</code>는 파이프 라인에 source와 sink를 둡니다. 파이프라인은 다른 지스트리머 구성 요소 여러가지를 둘 수 있는 <code>GstBin</code> 입니다. 보통 여러분은 <code>gst_bin_add_many</code>에 더 많은 인자를 넣어 파이프라인에 더 많은 구성요소를 추가할 수 있습니다.

note: (itstool) path: item/p
en: Next, <code>gst_element_link</code> is used to connect the elements together, so the output of <code>source</code> (a tone) goes into the input of <code>sink</code> (which is then output to the sound card). <code>gst_element_set_state</code> is then used to start playback, by setting the state of the pipeline to playing (<code>GST_STATE_PLAYING</code>).
ko: 다음, 구성 요소 각각을 연결하여 <code>source</code>(음) 출력을 <code>sink</code> (사운드 카드 출력) 입력으로 보낼 때 <code>gst_element_link</code> 함수를 사용합니다. 그 다음 <code>gst_element_set_state</code> 함수로 파이프라인 상태를 재생(<code>GST_STATE_PLAYING</code>)으로 두어 음을 재생합니다.

note: (itstool) path: section/title
en: Stopping playback
ko: 재생 정지

note: (itstool) path: section/p
en: We don't want to play an annoying tone forever, so the last thing <code>play_sound</code> does is to call <code>g_timeout_add</code>. This sets a timeout for stopping the sound; it waits for <code>LENGTH</code> milliseconds before calling the function <code>pipeline_stop</code>, and will keep calling it until <code>pipeline_stop</code> returns <code>FALSE</code>.
ko: 음을 무한정 지겹게 재생하고 싶지는 않기 때문에 <code>play_sound</code> 함수에서 <code>g_timeout_add</code> 함수를 호출합니다. 이 함수에서 음 재생을 멈출 제한 시간을 설정합니다.  <code>pipeline_stop</code> 함수를 호출하기 전에 <code>LENGTH</code> 밀리초 동안 기다리며, <code>pipeline_stop</code>함수에서 <code>FALSE</code> 값을 반환하기 전에는 함수 호출을 지속합니다.

note: (itstool) path: section/p
en: Now, we'll write the <code>pipeline_stop</code> function which is called by <code>g_timeout_add</code>. Insert the following code <em>above</em> the <code>play_sound</code> function:
ko: 이제 <code>g_timeout_add</code> 함수에서 호출할 <code>pipeline_stop</code> 함수를 작성하겠습니다. 다음 코드를 <code>play_sound</code> <em>상단</em>에 넣으십시오:

note: (itstool) path: section/p
en: The call to <code>gst_element_set_state</code> stops the playback of the pipeline and <code>g_object_unref</code> unreferences the pipeline, destroying it and freeing its memory.
ko: <code>gst_element_set_state</code> 함수 호출로 파이프라인 재생을 멈추며, <code>g_object_unref</code> 함수로 파이프라인 참조를 해제하고 파이프라인 자체를 파괴한 다음, 할당한 메모리 공간을 놓아줍니다.

note: (itstool) path: section/title
en: Define the tones
ko: 음색 정의

note: (itstool) path: section/p
en: We want to play the correct sound when the user clicks a button. First of all, we need to know the frequencies for the six guitar strings, which are defined (at the top of <file>main.c</file>) as follows:
ko: 사용자가 단추를 눌렀을 때 올바른 소리를 재생하고자합니다. 우선 다음과 같이 (<file>main.c</file> 상단에) 정의한 기타 6현의 주파수를 알아야합니다:

note: (itstool) path: section/p
en: Now to flesh out the signal handler that we defined earlier, <code>on_button_clicked</code>. We could have connected every button to a different signal handler, but that would lead to a lot of code duplication. Instead, we can use the label of the button to figure out which button was clicked:
ko: 이제 이전에 정의한 시그널 핸들러 <code>on_button_clicked</code> 에 내용을 추가할 차례입니다. 모든 단추에 각기 다른 시그널 핸들러를 연결할 수 있지만, 같은 코드를 여러번 반복할 수 있습니다. 대신, 어떤 단추를 눌렀는지 확인할 용도로 단추 레이블을 활용할 수 있습니다:

note: (itstool) path: section/p
en: A pointer to the <code>GtkButton</code> that was clicked is passed as an argument (<code>button</code>) to <code>on_button_clicked</code>. We can get the text of that button using <code>gtk_button_get_label</code>.
ko: 누른 <code>GtkButton</code>의 포인터를 <code>on_button_clicked</code>의 인자(<code>button</code>)로 전달합니다. 단추의 글자는 <code>gtk_button_get_label</code> 함수로 가져올 수 있습니다.

note: (itstool) path: section/p
en: The text is then compared to the notes that we have using <code>g_str_equal</code>, and <code>play_sound</code> is called with the frequency appropriate for that note. This plays the tone; we have a working guitar tuner!
ko: <code>g_str_equal</code> 함수로 이 글자를 비교한 후, 음에 맞는 주파수로 <code>play_sound</code> 함수를 호출합니다. 이 절차로 음을 재생합니다. 이제 동작하는 기타 조율기가 만들어졌군요!

note: (itstool) path: section/title
en: Build and run the application
ko: 프로그램 빌드 및 실행

note: (itstool) path: section/p
en: All of the code should now be ready to go. Click <guiseq><gui>Build</gui><gui>Build Project</gui></guiseq> to build everything again, and then <guiseq><gui>Run</gui><gui>Execute</gui></guiseq> to start the application.
ko: 모든 코드를 실행할 준비가 됐습니다. <guiseq><gui>빌드</gui><gui>프로젝트 빌드</gui></guiseq>를 눌러 프로젝트 전체를 다시 빌드하고, <guiseq><gui>실행</gui><gui>실행</gui></guiseq>을 눌러 프로그램을 시작하십시오.

note: (itstool) path: section/p
en: If you haven't already done so, choose the <file>Debug/src/guitar-tuner</file> application in the dialog that appears. Finally, hit <gui>Run</gui> and enjoy!
ko: 아직 끝내지 않았다면 나타난 대화상자에서 <file>Debug/src/guitar-tuner</file>  프로그램을 선택하십시오. 마지막으로 <gui>Run</gui>를 눌러 만든 프로그램을 즐기시죠!

note: (itstool) path: section/title
en: Reference Implementation
ko: 참조 구현체

note: (itstool) path: section/p
en: If you run into problems with the tutorial, compare your code with this <link href="guitar-tuner/guitar-tuner.c">reference code</link>.
ko: 지침서를 따라하는 실행하는 과정에 문제가 있다면, <link href="guitar-tuner/guitar-tuner.c">참조 코드</link>와 여러분의 코드를 비교해보십시오.

note: (itstool) path: section/title
en: Next steps
ko: 다음 단계

note: (itstool) path: section/p
en: Here are some ideas for how you can extend this simple demonstration:
ko: 여기 간단한 시험 프로그램에 여러분이 추가로 넣을 수 있는 몇가지 아이디어가 있습니다:

note: (itstool) path: item/p
en: Have the program automatically cycle through the notes.
ko: 프로그램에 음 재생 자동 주기 기능 넣기.

note: (itstool) path: item/p
en: Make the program play recordings of real guitar strings being plucked.
ko: 프로그램에 실제 기타 현을 퉁겼을 때의 음을 녹음하여 재생하기.

note: (itstool) path: item/p
en: To do this, you would need to set up a more complicated GStreamer pipeline which allows you to load and play back music files. You'll have to choose <link href="http://gstreamer.freedesktop.org/documentation/plugins.html">decoder and demuxer</link> GStreamer elements based on the file format of your recorded sounds — MP3s use different elements to Ogg Vorbis files, for example.
ko: 이 동작을 구현하려면 음악 파일을 불러와서 재생할 수 있도록 지스트리머 파이프라인을 좀 더 복잡하게 설정해야합니다. 녹음 음원의 파일 형식에 따른<link href="http://gstreamer.freedesktop.org/documentation/plugins.html">decoder와 demuxer</link> 지스트리머 구성 요소를 선택해야 할 수도 있습니다. 예를 들자면 MP3는 Ogg Vorbis 파일과는 다른 구성 요소를 활용합니다.

note: (itstool) path: item/p
en: You might need to connect the elements in more complicated ways too. This could involve using <link href="http://gstreamer.freedesktop.org/data/doc/gstreamer/head/manual/html/chapter-intro-basics.html">GStreamer concepts</link> that we didn't cover in this tutorial, such as <link href="http://gstreamer.freedesktop.org/data/doc/gstreamer/head/manual/html/section-intro-basics-pads.html">pads</link>. You may also find the <cmd>gst-inspect</cmd> command useful.
ko: 좀 더 복잡한 식으로 구성 요소를 연결해야 할 수도 있습니다. <link href="http://gstreamer.freedesktop.org/data/doc/gstreamer/head/manual/html/section-intro-basics-pads.html">pads</link>와 같이 우리가 지침서에서 다룰 수 없는 <link href="http://gstreamer.freedesktop.org/data/doc/gstreamer/head/manual/html/chapter-intro-basics.html">지스트리머 개념</link>이 들어갈 수도 있습니다. 쓸만한 <cmd>gst-inspect</cmd>  명령을 찾아볼 수도 있습니다.

note: (itstool) path: item/p
en: Automatically analyze notes that the user plays.
ko: 사용자 연주 음을 자동으로 분석.

note: (itstool) path: item/p
en: You could connect a microphone and record sounds from it using an <link href="http://gstreamer.freedesktop.org/data/doc/gstreamer/head/gst-plugins-good-plugins/html/gst-plugins-good-plugins-autoaudiosrc.html">input source</link>. Perhaps some form of <link href="http://gstreamer.freedesktop.org/data/doc/gstreamer/head/gst-plugins-good-plugins/html/gst-plugins-good-plugins-plugin-spectrum.html">spectrum analysis</link> would allow you to figure out what notes are being played?
ko: 마이크를 연결하고 <link href="http://gstreamer.freedesktop.org/data/doc/gstreamer/head/gst-plugins-good-plugins/html/gst-plugins-good-plugins-autoaudiosrc.html">input source</link>로 음을 녹음할 수 있습니다. 아마도 <link href="http://gstreamer.freedesktop.org/data/doc/gstreamer/head/gst-plugins-good-plugins/html/gst-plugins-good-plugins-plugin-spectrum.html">스펙트럼 분석</link> 같은 것으로 어떤 음을 재생했는지 알 수 있겠죠?

note: (itstool) path: info/desc
en: Use GTKmm and GStreamermm to build a simple guitar tuner application for GNOME. Shows off how to use the interface designer.
ko: GTKmm과 Gstreamermm을 활용하여 간단한 그놈용 기타 조율 프로그램을 만들어보겠습니다. 인터페이스 디자이너 활용 방법을 보여드립니다.

note: (itstool) path: item/p
en: Basic knowledge of the C++ programming language
ko: C++ 프로그래밍 언어 기본 지식

note: (itstool) path: item/p
en: Choose <gui>GTKmm (Simple)</gui> from the <gui>C++</gui> tab, click <gui>Forward</gui>, and fill out your details on the next few pages. Use <file>guitar-tuner</file> as project name and directory.
ko: <gui>C++</gui> 탭에서 <gui>GTKmm (단순)</gui>을 선택한 후 <gui>다음</gui> 을 누르고 다음 페이지 몇 군데에서 자세한 내용을 채워나가십시오. 프로젝트 이름과 디렉터리 이름은 <file>guitar-tuner</file>로 설정하십시오.

note: (itstool) path: item/p
en: Make sure that <gui>Configure external packages</gui> is selected. On the next page, select <em>gstreamermm-0.10</em> from the list to include the GStreamermm library in your project.
ko: <gui>외부 패키지 설정</gui>을 선택했는지 확인하십시오. 다음 페이지 목록에서 <em>gstreamermm-0.10</em>을 선택하고 프로젝트에 GStreamermm 라이브러리를 넣으십시오.

note: (itstool) path: item/p
en: Click <gui>Finished</gui> and the project will be created for you. Open <file>src/main.cc</file> from the <gui>Project</gui> or <gui>File</gui> tabs. You should see some code which starts with the lines:
ko: <gui>마침</gui>을 누르면 프로젝트를 만들어줍니다. <gui>프로젝트</gui>나 <gui>파일</gui>탭에서 <file>src/main.cc</file> 파일을 여십시오. 다음 줄로 시작하는 일부 코드가 나타납니다:

note: (itstool) path: section/p
en: This is a very basic C++ code setting up GTKmm. More details are given below; skip this list if you understand the basics:
ko: 이 부분은 GTKmm을 구성한 매우 간단한 C++ 코드입니다. 더 자세한 내용은 아래를 보십시오. 기본을 이해하고 있다면 이 부분을 건너 뛰십시오:

note: (itstool) path: item/p
en: The three <code>#include</code> lines at the top include the <code>config</code> (useful autoconf build defines), <code>gtkmm</code> (user interface) and <code>iostream</code> (STL). Functions from these libraries are used in the rest of the code.
ko: 상단의 <code>#include</code> 세 줄은 <code>config</code>(쓸만한 autoconf 빌드 정의), <code>gtkmm</code>(사용자 인터페이스), <code>iostream</code>(STL) 라이브러리입니다. 이 라이브러리의 함수는 코드 나머지 부분에서 활용합니다.

note: (itstool) path: item/p
en: The <code>main</code> function creates a new window by opening a GtkBuilder file (<file>src/guitar-tuner.ui</file>, defined a few lines above) and then displaying it in a window. The GtkBuilder file contains a description of a user interface and all of its elements. You can use Anjuta's editor to design GtkBuilder user interfaces.
ko: <code>main</code> 함수는 GtkBuilder 파일(위 몇 줄을 정의한 <file>src/guitar-tuner.ui</file>)을 열어 새 창을 만들고 창 안에 구성 요소를 표시합니다. GtkBuilder 파일에는 사용자 인터페이스 설명과 구성 요소 모드가 들어있습니다. GtkBuilder 사용자 인터페이스를 만들 때 안주타 편집기를 사용할 수 있습니다.

note: (itstool) path: item/p
en: Afterwards it calls a few functions which set up and then run the application. The <code>kit.run</code> function starts the GTKmm main loop, which runs the user interface and starts listening for events (like clicks and key presses).
ko: 그 다음 프로그램을 설정하고 실행할 몇가지 함수를 호출합니다. <code>kit.run</code> 함수는 사용자 인터페이스를 실행하고 이벤트(마우스 단추 누름, 키보드 키 누름)를 기다리는 GTKmm 메인 루프를 시작합니다.

note: (itstool) path: item/p
en: While the button is still selected, change the <gui>Label</gui> property in the <gui>Widgets</gui> tab to <gui>E</gui>. This will be the low E string. Also change the <gui>Name</gui> property to <gui>button_E</gui>. This is the name we will refer to the widget later in code.
ko: 단추를 선택한 상태에서 <gui>위젯</gui> 탭의 <gui>레이블</gui> 속성을 <gui>E</gui>로 바꾸십시오. 기타의 낮은 E 줄을 의미합니다. 또한 <gui>이름</gui> 속성을 <gui>button_E</gui> 값으로 바꾸십시오. 나중에 코드에서 위젯을 참조할 이름입니다.

note: (itstool) path: item/p
en: Repeat the above steps for the other buttons, adding the next 5 strings with the labels <em>A</em>, <em>D</em>, <em>G</em>, <em>B</em>, and <em>e</em> and the names <em>button_A</em>, etc.
ko: 위 단계를 다음 5현을 대해 <em>A</em>, <em>D</em>, <em>G</em>, <em>B</em>, <em>e</em> 레이블로 추가하는 단추에도 반복하시고 <em>button_A</em>와 같은 식으로 이름을 부여하십시오.

note: (itstool) path: item/p
en: Save the UI design (by clicking <guiseq><gui>File</gui><gui>Save</gui></guiseq>) and close the file.
ko: UI 디자인을 저장(<guiseq><gui>파일</gui><gui>저장</gui></guiseq> 누름)하고 파일을 닫으십시오.

note: (itstool) path: section/p
en: GStreamer is GNOME's multimedia framework — you can use it for playing, recording, and processing video, audio, webcam streams and the like. Here, we'll be using it to produce single-frequency tones. GStreamermm is the C++ binding to GStreamer which we will use here.
ko: 지스트리머는 그놈 멀티미디어 프레임워크입니다. 동영상 오디오 웹캠 스트림 같은걸 재생, 녹음/녹화, 처리할 때 지스트리머를 사용할 수 있습니다. 여기서는 단일 주파수 음색을 만들 때 사용하겠습니다. GStreamermm은 여기서 우리가 사용할 지스트리머 C++ 바인딩입니다.

note: (itstool) path: section/title
en: Using GStreamermm
ko: GStreamermm 사용

note: (itstool) path: section/p
en: To use GStreamermm, it has to be initialised. We do that by adding the following line of code next to the <code>Gtk::Main kit(argc, argv);</code> line in <file>main.cc</file>:
ko: GStreamermm을 사용하려면 초기화해야합니다. <file>main.cc</file>의 <code>Gtk::Main kit(argc, argv);</code> 다음에 코드 몇 줄을 추가하겠습니다:

note: (itstool) path: section/p
en: While we are on it, also make sure that the <file>gstreamermm.h</file> is included in <file>main.cc</file> properly.
ko: 여기에 있는 동안 <file>gstreamermm.h</file> 파일을 <file>main.cc</file> 파일에 제대로 넣었는지도 확인하십시오.

note: (itstool) path: section/p
en: To simplify the handling of the pipeline we will define a helper class <code>Sound</code>. We do that in <file>main.cc</file> in order to keep this example simple, whereas you might usually want to use a separate file:
ko: 파이프라인 처리를 단순하게 할 목적으로 <code>Sound</code> 보조 클래스를 정의하겠습니다. 여러분은 다른 파일에 정의하고 싶겠지만 이 예제의 단순함을 유지할 목적으로 <file>main.cc</file>에서 진행하겠습니다:

note: (itstool) path: section/p
en: The code has the following purpose:
ko: 이 코드는 다음 목적으로 작성합니다:

note: (itstool) path: item/p
en: In the constructor, source and sink GStreamer elements (<code>Gst::Element</code>) are created, and a pipeline element (which will be used as a container for the other two elements). The pipeline is given the name "note"; the source is named "source" and is set to the <code>audiotestsrc</code> source; and the sink is named "output" and set to the <code>autoaudiosink</code> sink (default sound card output). After the elements have been added to the pipeline and linked together, the pipeline is ready to run.
ko: 생성자에서 source 지스트리머 구성요소와 sink 지스트리머 구성요소(<code>Gst::Element</code>), 파이프라인 지스트리머 구성요소(앞서 말한 구성 요소의 컨테이너로 활용)를 만듭니다. 파이프라인 이름은 "note"라고 지어둡니다. source는 "source"로 이름 붙이고 <code>audiotestsrc</code>로 설정합니다. sink는 "output"으로 이름 붙이고 <code>autoaudiosink</code> sink로 설정합니다(사운드 카드 출력이 기본). 구성 요소를 파이프라인에 추가하고 서로 연결한 다음에는 파이프라인 실행 준비가 끝납니다.

note: (itstool) path: item/p
en: <code>start_playing</code> sets the source element to play a particular frequency and then starts the pipeline so the sound actually starts playing. As we don't want to have the annoying sound for ages, a timeout is set up to stop the pipeline after 200 ms by calling <code>stop_playing</code>.
ko: <code>start_playing</code>은 각 주파수를 재생할 source 구성 요소를 설정하고 파이프라인을 시작하여 소리를 실제로 재생하게 합니다. 소리를 영원히 짜증나게 재생하고 싶지는 않기에 <code>stop_playing</code>을 200ms 후에 호출하여 파이프라인 동작을 멈추도록 제한 시간을 설정합니다.

note: (itstool) path: item/p
en: In <code>stop_playing</code> which is called when the timeout has elapsed, the pipeline is stopped and as such there isn't any sound output anymore. As GStreamermm uses reference counting through the <code>Glib::RefPtr</code> object, the memory is automatically freed once the <code>Sound</code> class is destroyed.
ko: 제한 시간에 도달했을 때 호출하는 <code>stop_playing</code> 함수에서는, 파이프라인을 멈추어 더 이상 소리가 나지 않게 합니다. GStreamermm에서 <code>Glib::RefPtr</code> 객체로 참조 카운팅을 하기 때문에 <code>Sound</code> 클래스를 해체하면 메모리를 자동으로 해제합니다.

note: (itstool) path: section/title
en: Connecting the signals
ko: 시그널에 연결하기

note: (itstool) path: section/p
en: We want to play the correct sound when the user clicks a button. That means that we have to connect to the signal that is fired when the user clicks the button. We also want to provide information to the called function which tone to play. GTKmm makes that quite easy as we can easily bind information with the <em>sigc</em> library.
ko: 사용자가 단추를 눌렀을 때 제대로 된 음을 재생하려고 합니다. 무슨 얘기냐면 사용자가 단추를 누르면 나오는 시그널을 실행할 함수에 연결해야 한다는 뜻입니다. 또한 재생할 음에 대한 정보를 호출 함수에 넘겨주려고 합니다. GTKmm에서는 <em>sigc</em> 라이브러리에서 정보를 바인딩해서 쉽게 처리할 수 있습니다.

note: (itstool) path: section/p
en: The function that is called when the user clicks a button can be pretty simple, as all the interesting stuff is done in the helper class now:
ko: 관심있어 하는 부분을 이제는 보조 클래스에서 처리하므로, 사용자가 단추를 눌렀을 때 호출하는 함수가 약간 간단할 수 있습니다:

note: (itstool) path: section/p
en: It only calls the helper class we defined before to play the correct frequencies. With some more clever code we would also have been able to directly connect to the class without using the function but we will leave that to use as an exercise.
ko: 이 코드에서는 올바른 주파수 음을 재생하려 앞서 정의한 보조 클래스를 호출하기만 합니다. 더 멋진 코드에서는 함수를 활용하지 않고 클래스에 직접 연결할 수 있겠지만, 그냥 이대로를 연습용으로 두겠습니다.

note: (itstool) path: section/p
en: The code to set up the signals should be added to the <code>main()</code> function just after the <code>builder-&gt;get_widget("main_window", main_win);</code> line:
ko: 시그널을 설정하는 코드는 <code>main()</code> 함수의 <code>builder-&gt;get_widget("main_window", main_win);</code> 코드 줄 바로 다음에 추가하십시오:

note: (itstool) path: item/p
en: At first we create an instance of our helper class that we want to use now and declare a variable for the button we want to connect to.
ko: 우선 당장 쓰려는 보조 클래스의 인스턴스를 만들고 연결하고자 하는 단추의 변수를 선언하겠습니다.

note: (itstool) path: item/p
en: Next, we receive the button object from the user interface that was created out of the user interface file. Remember that <em>button_E</em> is the name we gave to the first button.
ko: 그 다음 사용자 인터페이스 파일에서 만든 사용자 인터페이스에서 단추 객체를 가져오겠습니다. 기억하시겠지만 <em>button_E</em>가 첫번째 단추에 지어준 이름이죠.

note: (itstool) path: item/p
en: Finally we connect the <em>clicked</em> signal. This isn't fully straightforward because this is done in a fully type-safe way and we actually want to pass the frequency and our helper class to the signal handler. <code>sigc::ptr_fun(&amp;on_button_clicked)</code> creates a <em>slot</em> for the <code>on_button_clicked</code> method we defined above. With <code>sigc::bind</code> we are able to pass additional arguments to the slot and in this case we pass the frequency (as double) and our helper class.
ko: 마지막으로 <em>clicked</em> 시그널을 연결하겠습니다. 그다지 간단하지 않은 과정인데 자료형에 안전한 방식으로 끝낼 일이며 실제로 주파수 정보와 보조 클래스를 시그널 핸들러로 전달하고 싶어하기 때문입니다. <code>sigc::ptr_fun(&amp;on_button_clicked)</code> 메서드는 위에서 우리가 정의한 <code>on_button_clicked</code> 메서드의 <em>slot</em>을 만듭니다. <code>sigc::bind</code>로 슬롯에 추가 인자를 전달할 수 있는데, 이 경우 우리는 주파수(double 형식) 값과 보조 클래스를 전달합니다.

note: (itstool) path: section/p
en: Now that we have set up the <em>E</em> button we also need to connect the other buttons according to their frequencies: 440 for A, 587.33 for D, 783.99 for G, 987.77 for B and 1318.5 for the high E. This is done in the same way, just passing a different frequency to the handler.
ko: 이제 <em>E</em> 단추를 설정했고, 다른 단추에도 해당 주파수 값으로 연결해야합니다. A에는 440, D에는 587.33, G에는 783.99, B에는 987.77, 높은 E에는 1318.5 이런 식이죠. 그냥 핸들러에 다른 주파수 값을 전달하는 동일한 방식으로 처리할 수 있습니다.

note: (itstool) path: section/p
en: All of the code should now be ready to go. Click <guiseq><gui>Build</gui><gui>Build Project</gui></guiseq> to build everything again, and then <guiseq><gui>Run</gui><gui>Run</gui></guiseq> to start the application.
ko: 모든 코드가 동작할 준비가 끝났습니다. <guiseq><gui>빌드</gui><gui>프로젝트 빌드</gui></guiseq>를 눌러 모두 다시 빌드하시고, <guiseq><gui>실행</gui><gui>실행</gui></guiseq>을 눌러 프로그램을 시작하십시오.

note: (itstool) path: section/p
en: If you run into problems with the tutorial, compare your code with this <link href="guitar-tuner/guitar-tuner.cc">reference code</link>.
ko: 지침서를 따라하는 실행하는 과정에 문제가 있다면, <link href="guitar-tuner/guitar-tuner.cc">참조 코드</link>와 여러분의 코드를 비교해보십시오.

note: (itstool) path: section/title
en: Further Reading
ko: 더 읽을거리

note: (itstool) path: section/p
en: Many of the things shown above are explained in detail in the <link href="http://library.gnome.org/devel/gtkmm-tutorial/stable/">GTKmm book</link> which also covers a lot more key concept for using the full power of GTKmm. You might also be interested in the <link href="http://library.gnome.org/devel/gstreamermm/">GStreamermm reference documentation</link>.
ko: 위에 보여드린 예제 대부분에 대해서는, GTKmm의 완벽한 힘을 활용하여 더 핵심적인 개념을 다루는 <link href="http://library.gnome.org/devel/gtkmm-tutorial/stable/">GTKmm book</link>에서 더 자세한 내용을 다룹니다. <link href="http://library.gnome.org/devel/gstreamermm/">GStreamermm 참고 문서</link>에도 관심이 있으실지도 모르겠습니다.

note: (itstool) path: info/desc
en: Use GTK+ and GStreamer to build a simple guitar tuner application for GNOME.
ko: 그놈용 단순 기타 조율 프로그램을 만들 때 GTK+와 지스트리머를 사용합니다.

note: (itstool) path: synopsis/p
en: In this tutorial we'll construct a small application, Guitar Tuner, using JavaScript and GTK+ and GStreamer. To do and run all the code examples yourself, you need an editor to write code in, terminal and GNOME 3. or higher installed into your computer.
ko: 이 따라하기 지침에서는 JavaScript와 GTK+, 지스트리머로, 간단한 기타 조율 프로그램을 구성해보겠습니다. 여러분이 직접 코드 예제를 작성하고 실행해보려면, 코드를 작성할 편집기, 터미널, 그놈 3 이상을 컴퓨터에 설치해야합니다.

note: (itstool) path: item/p
en: <link xref="#gstreamer">GStreamer pipelines</link>
ko: <link xref="#gstreamer">지스트리머 파이프라인</link>

note: (itstool) path: item/p
en: <link xref="#script">Script for running the application</link>
ko: <link xref="#script">실행 프로그램 스크립트</link>

note: (itstool) path: item/p
en: <link xref="#imports">Libraries to import</link>
ko: <link xref="#imports">가져올 라이브러리</link>

note: (itstool) path: item/p
en: <link xref="#mainwindow">Creating the main window for the application</link>
ko: <link xref="#mainwindow">프로그램 메인 창 만들기</link>

note: (itstool) path: item/p
en: <link xref="#buttons">Buttons for the tunes</link>
ko: <link xref="#buttons">조율 단추</link>

note: (itstool) path: item/p
en: <link xref="#playSound">Making the sounds with GStreamer</link>
ko: <link xref="#playSound">지스트리머로 소리 만들기</link>

note: (itstool) path: item/p
en: <link xref="#connecting">Connecting buttons to playSound</link>
ko: <link xref="#connecting">소리 재생 단추에 연결</link>

note: (itstool) path: item/p
en: <link xref="#guitarjs">The whole program</link>
ko: <link xref="#guitarjs">전체 프로그램</link>

note: (itstool) path: item/p
en: <link xref="#terminal">Running the application form Terminal</link>
ko: <link xref="#terminal">터미널에서 프로그램 실행</link>

note: (itstool) path: page/p
en: After reading this tutorial, you should see this in your screen:
ko: 지침서를 읽고 나면 이 내용을 화면에서 볼 수 있어야합니다:

note: (itstool) path: section/title
en: Script for running the application
ko: 실행 프로그램 스크립트

note: (itstool) path: section/p
en: This line tells how to run the script. It needs to be the first line of the code and it needs to be executable. To get the execution rights go to terminal and run in right folder: chmod +x scriptname. Or you can use the graphical filemanager. Just go to the right folder where your code is, right click you code file, choose properties, click the permissions tab and check the box for allow executing file as a program
ko: 이 줄은 스크립트 실행 방법을 알려줍니다. 이 부분은 코드의 처음 부분에 들어가야하며, 스크립트 파일을 실행할 수 있어야합니다. 실행 권한을 가져오려면 터미널을 열고 올바른 폴더에서 chmod +x scriptname 명령을 실행하십시오. 또는 그래픽 파일 관리자를 활용할 수 있습니다. 코드가 있는 적절한 폴더에 들어가서 코드를 작성한 파일에 마우스 커서를 두고 오른쪽 단추를 누른 다음, 속성, 권한 탭을 선택하시고 파일을 프로그램처럼 실행하도록 상자에 표시하십시오.

note: (itstool) path: section/p
en: In order to have a working program we need to import a few GObject Introspection -libraries to our use. For working UI, we need Gtk and for Gstreamer to work we need Gst. These are imported in the beginning so we have them at use everywhere. Also in the beginning we import a construct Mainloop to handle the timeout to be used with the tuning sounds.
ko: 프로그램을 동작하게 하려면 GObject Introspection 라이브러리를 임포팅해야합니다. UI를 동작하게 하려면 Gtk를, 지스트리머를 동작하게 하려면 Gst를 임포팅해야합니다. 코드 시작 부분에서 임포팅해서 어디서든 활용할 수 있게 합니다. 또한 조율음의 재생 시간 제한을 처리할 Mainloop 생성자를 임포팅하겠습니다.

note: (itstool) path: section/title
en: Creating the main window for the application
ko: 프로그램 메인 창 만들기

note: (itstool) path: section/p
en: Importing Gtk and Gst is not enough, we need to initialize them in order to get them working. When Gtk and Gst are up and running we need to create the window for the application. Later we are going to put all the buttons for making sounds inside this window. In order to get the window showing, we need to tell it to show and we need also to run the code with the Gtk.main()
ko: Gtk와 Gst를 임포팅 하는 것만으로는 충분치 않기에 동작하려면 초기화해야합니다. Gtk와 Gst를 띄우고 나면 프로그램 창을 만들어야합니다. 그 다음 이 창에서 소리를 낼 모든 단추를 만들어 두겠습니다. 창을 띄우려면, 화면에 나타내라고 직접 알려야 하며, Gtk.main()으로 코드를 실행해야합니다.

note: (itstool) path: section/title
en: Buttons for the tunes
ko: 조율 단추

note: (itstool) path: section/p
en: Because Gtk.Window can only contain a single widget, we need to create something under it to be able to add all the necessary buttons inside it. In this example we use Buttonbox. After creating the Buttonbox we create buttons with necessary labels. After we have the buttons we need to add them to the Buttonbox and the Buttonbox must be added to the Gtk.Window and everything in the Buttonbox must be shown.
ko: Gtk.Window는 단일 위젯을 둘 수 있기 때문에 단추를 안에 다 넣을 수 있으려면 무언가를 만들어야합니다. 이 예제에서 Buttonbox를 사용하겠습니다. Buttonbox를 만들고 나면, 각 단추를 만들어 필요한 레이블을 붙이겠습니다. 이 단추를 만들고 나면 Buttonbox에 넣고 Buttonbox를 Gtk.Window에 넣어 Buttonbox에 넣은 모든 단추가 나타나야합니다.

note: (itstool) path: section/p
en: After this stage you should have a window appearing to your screen showing 6 buttons. Right now the buttons don't do anything and we shall address that issue later. Before we can connect the button signals to something we need to code that something first.
ko: 이 단계가 끝나면 단추 6개가 뜨는 창이 화면에 나타나야합니다. 바로 지금은 단추가 아무 동작을 하지 않으며 이 문제는 나중에 처리하겠습니다. 단추 시그널을 어딘가에 연결할 수 있기 전에는 무언가를 먼저 코드로 작성해야합니다.

note: (itstool) path: section/title
en: Making the sounds with GStreamer
ko: 지스트리머로 소리 만들기

note: (itstool) path: section/p
en: The first thing we need to do is decide what tunes we want to make when we push a button. The frequencies list takes care of that. After that we get to actually making the sounds with the function playSound. For function playSound we give as an input a frequency (that we just defined in the frequencies variable). First thing we need to construct is a pipeline, a source and a sink. For the source we set the frequency. To the pipeline we add both the source and the sink and then we tell it to keep playing. As a last thing we use the const Mainloop to get the pipeline to stop after a 500ms.
ko: 우리가 먼저 해야 할 일은 단추를 눌렀을 때 어떤 음을 낼지를 결정하는 일입니다. 주파수 목록이 이런 역할을 합니다. 그 다음 실제로 playSound 함수로 소리를 냅니다. playSound 함수로 소리를 낼 때 주파수를 입력값(바로 위에서 정의한 frequencies 변수 값)으로 넣습니다. 우선 파이프라인, source, sink를 만들어야합니다. source에 주파수를 설정하겠습니다. 파이프라인에 source와 sink를 추가하고, 재생 상태를 유지하라고 지시하겠습니다. 마지막으로 const Mainloop를 활용하여 파이프라인 동작을 500ms 후에 멈추게 하겠습니다.

note: (itstool) path: section/p
en: Now we have the method of playing a tune when clicking a button. Next well make the connections between pushing a button and playing the correct sound from that button.
ko: 이제 단추를 눌렀을 때 음을 재생하는 메서드를 작성했습니다. 다음 단추를 누르면 단추에서 올바른 음을 재생하도록 연결하겠습니다.

note: (itstool) path: section/title
en: Connecting buttons to playSound
ko: 소리 재생 단추에 연결

note: (itstool) path: section/p
en: The method of connecting button clicks to playSound with the correct tune is by using the connect method of the button widget. So we choose a button to be connected and type <code>E.connect("clicked", function(){playSound(frequencies.E);});</code> The <code>connect</code> tells that when pushing E, something should happen. The <code>clicked</code> tells the type of the signal happening to E and then in the <code>function(){};</code> we call playSound with the correct note that should be associated with the button.
ko:  올바른 음 값을 주어 playSound를 호출하는 연결 단추 메서드는 단추 위젯의 연결 메서드를 활용합니다. 따라서 연결한 단추를 선택하고 <code>E.connect("clicked", function(){playSound(frequencies.E);});</code> 를 입력하십시오.  <code>connect</code> 함수는 E를 눌렀을 때 일어날 일을 지시합니다.  <code>clicked</code>는 E에서 나타나는 시그널 형식을,  <code>function(){};</code> 은 단추와 관련있는 올바른 음을 재생할 playSound 입니다.

note: (itstool) path: section/title
en: The whole program
ko: 전체 프로그램

note: (itstool) path: section/p
en: So this is what all the parts combined looks like. When running this code, you should be able to tune your guitar (if you have correctly calibrated speakers).
ko: 따라서 이 부분은 모든 부분을 합친 것과 같은 부분입니다. 코드를 실행하면 (음을 제대로 보정한 스피커를 연결했을 경우) 여러분 스스로가 기타를 조율할 수 있어야합니다.

note: (itstool) path: section/title
en: Running the application form Terminal
ko: 터미널에서 프로그램 실행

note: (itstool) path: section/p
en: To run this application open Terminal, go to the folder where your application is stored and then run
ko: 프로그램을 실행하려면 터미널을 열고, 프로그램을 저장한 폴더로 들어간 후 실행하십시오

note: (itstool) path: section/p
en: If you run into problems with the tutorial, compare your code with this <link href="guitar-tuner/guitar-tuner.js">reference code</link>.
ko: 지침서를 따라하는 실행하는 과정에 문제가 있다면, <link href="guitar-tuner/guitar-tuner.js">참조 코드</link>와 여러분의 코드를 비교해보십시오.

[ctx: text]
note: (itstool) path: info/title
en: Guitar tuner (Python)
ko: 기타 조율기(Python)

note: (itstool) path: item/p
en: Basic knowledge of the Python programming language
ko: 파이썬 프로그래밍 언어 기본 지식

note: (itstool) path: item/p
en: Choose <gui>PyGTK (automake)</gui> from the <gui>Python</gui> tab, click <gui>Continue</gui>, and fill out your details on the next few pages. Use <file>guitar-tuner</file> as project name and directory.
ko: <gui>파이썬</gui> 탭에서 <gui>PyGTK (automake)</gui>를 선택하고 <gui>계속</gui>을 누르신 다음 몇가지 페이지에서 세부 내용을 채워나가십시오. 프로젝트 이름과 디렉터리 이름을 <file>guitar-tuner</file>로 정하십시오.

note: (itstool) path: item/p
en: Click <gui>Apply</gui> and the project will be created for you. Open <file>src/guitar_tuner.py</file> from the <gui>Project</gui> or <gui>File</gui> tabs. You should see some code which starts with the lines:
ko: <gui>적용</gui>을 누르면 프로젝트를 만들어줍니다. <gui>프로젝트</gui>나 <gui>파일</gui>탭에서 <file>src/guitar_tuner.py</file> 파일을 여십시오. 다음 줄로 시작하는 코드가 나타납니다:

note: (itstool) path: section/title
en: Run the code for the first time
ko: 첫 코드 실행

note: (itstool) path: section/p
en: Most of the code in the file is template code. It loads an (empty) window from the user interface description file and shows it. More details are given below; skip this list if you understand the basics:
ko: 이 파일의 대부분의 코드는 코드 서식입니다. 사용자 인터페이스 설명 파일에서 (빈)창을 불러오고 보여줍니다. 더 자세한 내용은 아래에 있습니다. 기본을 알고 계신다면 이 부분은 건너 뛰십시오:

note: (itstool) path: item/p
en: The <code>import</code> lines at the top include the tell Python to load the user interface and system libraries needed.
ko: 상단의 <code>import</code> 줄은 파이썬에 사용자 인터페이스와 시스템 라이브러리가 필요함을 알리는 내용이 들어갑니다.

note: (itstool) path: item/p
en: A class is declared that will be the main class for our application. In the <code>__init__</code> method the main window is loaded from the GtkBuilder file (<file>src/guitar-tuner.ui</file>) and the signals are connected.
ko: 프로그램의 주 클래스가 될 클래스를 선언합니다. <code>__init__</code> 메서드에서는 GtkBuilder 파일(<file>src/guitar-tuner.ui</file>)에서 메인 창을 불러오고 시그널을 연결합니다.

note: (itstool) path: item/p
en: Connecting signals is how you define what happens when you push a button, or when some other event happens. Here, the <code>destroy</code> method is called (and quits the app) when you close the window.
ko: 시그널을 연결하는건 단추를 누르거나 어떤 일이 일어나면 동작이 일어나게 하는 방편입니다. 여기서 <code>destroy</code> 메서드는 창을 닫을 때 호출(하고 프로그램을 끝내기)합니다.

note: (itstool) path: item/p
en: The <code>main</code> function is run by default when you start a Python application. It just creates an instance of the main class and starts the main loop to bring up the window.
ko: <code>main</code>은 파이썬 프로그램을 시작할 때 기본으로 시작합니다. 메인 클래스의 인스턴스를 만들고 창을 띄우는 메인 루프를 시작합니다.

note: (itstool) path: section/p
en: This code is ready to be used, so you can run it by clicking <guiseq><gui>Run</gui><gui>Execute</gui></guiseq>.
ko: 이 코드를 사용할 준비가 되었으니 <guiseq><gui>실행</gui><gui>실행</gui></guiseq>을 눌러 프로그램을 실행할 수 있습니다.

note: (itstool) path: section/p
en: A description of the user interface (UI) is contained in the GtkBuilder file. To edit the user interface, open <file>src/guitar_tuner.ui</file>. This will switch to the interface designer. The design window is in the center; widgets and widgets' properties are on the right, and the palette of available widgets is on the left.
ko: 사용자 인터페이스(UI) 설명은 GtkBuilder 파일에 있습니다. 사용자 인터페이스를 편집하려면 <file>src/guitar_tuner.ui</file> 파일을 여십시오. 이 파일을 열면 인터페이스 디자이너로 이동합니다. 디자인 창은 가운데에 있고, 위젯과 위젯 속성은 오른편에, 쓸 수 있는 위젯의 팔레트는 왼편에 있습니다.

note: (itstool) path: section/title
en: Write the signal handler
ko: 시그널 핸들러 작성

note: (itstool) path: section/p
en: To do this, open <file>guitar_tuner.py</file> while the user interface file is still open. Switch to the <gui>Signals</gui> tab, which you already used to set the signal name. Now take the row where you set the <gui>clicked</gui> signal and drag it into to the source file inside the class. The following code will be added to your source file:
ko: 진행하려면 사용자 인터페이스 파일을 열어둔 상태에서 <file>guitar_tuner.py</file> 파일을 여십시오. 앞에서 시그널 이름을 설정한 <gui>시그널</gui> 탭으로 가십시오. 이제 <gui>clicked</gui> 시그널 줄로 가서 소스 파일의 클래스에 이 시그널을 끌어다 넣으십시오. 소스 파일에 다음 코드가 들어갑니다:

note: (itstool) path: section/p
en: This signal handler has two arguments: the usual Python class pointer, and the <code>Gtk.Button</code> that called the function.
ko: 이 시그널 핸들러에는 파이썬 클래스 포인터와 함수를 호출하는 <code>Gtk.Button</code> 인자가 있습니다.

note: (itstool) path: section/p
en: Change the import line in <file>guitar_tuner.py</file>, just at the beginning to :
ko: <file>guitar_tuner.py</file> 파일에 import 줄을 다음과 같이 바꾸십시오:

note: (itstool) path: section/p
en: The <code>Gst</code> includes the GStreamer library. You also need to initialise GStreamer properly which is done in the <code>main()</code> method with this call added above the <code>app = GUI()</code> line:
ko: <code>Gst</code>에는 지스트리머 라이브러리가 들어있습니다. <code>app = GUI()</code> 줄 위에 추가한 이 호출과 <code>main()</code> 메서드 안의 코드로 지스트리머 속성을 초기화해야합니다:

note: (itstool) path: section/p
en: Then, copy the following function into the class in <file>guitar_tuner.py</file> somewhere:
ko: 그 다음 <file>guitar_tuner.py</file>의 클래스 어딘가에 다음 함수 코드를 복사하십시오:

note: (itstool) path: item/p
en: The first three lines create source and sink GStreamer elements and a pipeline element (which will be used as a container for the other two elements). The pipeline is given the name "note"; the source is named "source" and is set to the <code>audiotestsrc</code> source; and the sink is named "output" and set to the <code>autoaudiosink</code> sink (default sound card output).
ko: 처음 세 줄에서는 source와 sink 지스트리머 구성 요소, 파이프라인 구성 요소(source와 sink의 컨테이너로 활용)를 만듭니다. 파이프라인 이름은 "note"라고 지어둡니다. source는 "source"로 이름 붙이고 <code>audiotestsrc</code>로 설정합니다. sink는 "output"으로 이름 붙이고 <code>autoaudiosink</code> sink로 설정합니다(기본은 사운드 카드 출력).

note: (itstool) path: item/p
en: The call to <code>source.set_property</code> sets the <code>freq</code> property of the source element to <code>frequency</code>, which was passed as an argument to the <code>play_sound</code> function. This is just the frequency of the note in Hertz; some useful frequencies will be defined later on.
ko: <code>source.set_property</code> 호출에서는 source 구성 요소의 <code>freq</code> 속성에 <code>play_sound</code> 함수의 인자로 전달한 <code>frequency</code> 값을 설정합니다. 이 값은 헤르쯔 단위의 음 주파수입니다. 쓸만한 주파수는 나중에 정의하겠습니다.

note: (itstool) path: item/p
en: The next two lines call <code>pipeline.add</code>, putting the source and sink into the pipeline. The pipeline can contain multiple other GStreamer elements. In general, you can add as many elements as you like to the pipeline by calling its <code>add</code> method repeatedly.
ko: 다음 두 줄에서는 source 구성 요소와 sink 구성 요소를 파이프라인에 두는 <code>pipeline.add</code> 함수를 호출합니다. 파이프라인에는 여러 지스트리머 구성 요소를 넣을 수 있습니다. 보통 <code>add</code> 메서드를 반복적으로 호출하여 파이프라인에 원하는 만큼 구성 요소를 넣을 수 있습니다.

note: (itstool) path: item/p
en: Next <code>pipeline.set_state</code> is used to start playback, by setting the state of the pipeline to playing (<code>Gst.State.PLAYING</code>).
ko: 다음 <code>pipeline.set_state</code> 함수는 파이프라인 상태를 재생 상태(<code>Gst.State.PLAYING</code>)로 설정하여 음 재생을 시작할 때 사용합니다.

note: (itstool) path: section/p
en: We don't want to play an annoying tone forever, so the last thing <code>play_sound</code> does is to call <code>GObject.timeout_add</code>. This sets a timeout for stopping the sound; it waits for <code>LENGTH</code> milliseconds before calling the function <code>pipeline_stop</code>, and will keep calling it until <code>pipeline_stop</code> returns <code>False</code>.
ko: 음을 짜증나게 무한정 재생하고 싶진 않기에 <code>play_sound</code> 함수에서 마지막으로 할 일은 <code>GObject.timeout_add</code> 함수를 호출하는 일입니다. 이 함수는 음 재생을 멈출 제한 시간을 설정합니다. <code>pipeline_stop</code> 함수를 호출하기 전 <code>LENGTH</code> 밀리초동안 기다리고 <code>pipeline_stop</code> 함수에서 <code>False</code>를 반환하기 전까지 계속 호출합니다.

note: (itstool) path: section/p
en: Now, we'll write the <code>pipeline_stop</code> function which is called by <code>GObject.timeout_add</code>. Insert the following code <em>above</em> the <code>play_sound</code> function:
ko: 이제 <code>GObject.timeout_add</code> 함수에서 호출할  <code>pipeline_stop</code> 함수를 작성하겠습니다. 다음 코드를 <code>play_sound</code> 함수 <em>상단</em>에 넣으십시오:

note: (itstool) path: section/p
en: You need to define the <code>LENGTH</code> constant inside the class, so add this code at the beginning of the main class:
ko: 클래스 안에 <code>LENGTH</code> 상수를 정의해야 하므로, 메인 클래스 시작 부분에 다음 코드를 추가하겠습니다:

note: (itstool) path: section/p
en: The call to <code>pipeline.set_state</code> stops the playback of the pipeline.
ko: <code>pipeline.set_state</code> 함수를 호출하면 파이프라인 재생을 멈춥니다.

note: (itstool) path: section/p
en: We want to play the correct sound when the user clicks a button. First of all, we need to know the frequencies for the six guitar strings, which are defined (at the beginning of the main class) inside a dictionary so we can easily map them to the names of the strings:
ko: 사용자가 단추를 누르면 올바른 음을 나게 해보겠습니다. 우선 (메인 클래스 시작 부분) 딕셔너리에 정의한 기타 각 여섯줄의 주파수를 알아내어 기타 줄에 이름에 쉽게 대응할 수 있어야합니다:

note: (itstool) path: section/p
en: The button that was clicked is passed as an argument (<code>button</code>) to <code>on_button_clicked</code>. We can get the label of that button by using <code>button.get_child</code>, and then get the text from that label using <code>label.get_label</code>.
ko: 누른 단추는 <code>on_button_clicked</code> 함수에 인자(<code>button</code>)로 전달합니다. <code>button.get_child</code> 함수로 단추 레이블 객체를 가져올 수 있고, 해당 레이블 객체에서 <code>label.get_label</code>을 사용하여 텍스트를 가져올 수 있습니다.

note: (itstool) path: section/p
en: The label text is then used as a key for the dictionary and <code>play_sound</code> is called with the frequency appropriate for that note. This plays the tone; we have a working guitar tuner!
ko: 레이블 텍스트는 딕셔너리의 키로 사용하며 음에 해당하는 적당한 주파수로 <code>play_sound</code>를 호출합니다. 이 코드로 음을 재생합니다. 이렇게 해서 동작하는 기타 조율 프로그램을 만듭니다!

note: (itstool) path: section/title
en: Run the application
ko: 프로그램 실행

note: (itstool) path: section/p
en: All of the code should now be ready to go. Click <guiseq><gui>Run</gui><gui>Execute</gui></guiseq> to start the application. Enjoy!
ko: 모든 코드를 실행할 준비를 마쳤습니다. <guiseq><gui>실행</gui><gui>실행</gui></guiseq>을 눌러 프로그램을 시작하시고 즐기세요!

note: (itstool) path: section/p
en: If you run into problems with the tutorial, compare your code with this <link href="guitar-tuner/guitar-tuner.py">reference code</link>.
ko: 지침서를 따라하는 실행하는 과정에 문제가 있다면, <link href="guitar-tuner/guitar-tuner.py">참조 코드</link>와 여러분의 코드를 비교해보십시오.

note: (itstool) path: info/desc
en: Use <link href="http://developer.gnome.org/platform-overview/stable/gtk">GTK+</link> and <link href="http://developer.gnome.org/platform-overview/stable/gstreamer">GStreamer</link> to build a simple guitar tuner application for GNOME. Shows off how to use the interface designer.
ko: 간단한 그놈용 기타 조율 프로그램을 만들 때 <link href="http://developer.gnome.org/platform-overview/stable/gtk">GTK+</link>와 <link href="http://developer.gnome.org/platform-overview/stable/gstreamer">지스트리머</link>를 활용합니다. 인터페이스 사용 방법을 보여드립니다.

note: (itstool) path: synopsis/p
en: In this tutorial you will create an application which plays tones that you can use to tune a guitar. You will learn how to:
ko: 이 따라하기 지침서를 통해 기타를 조율할 때 활용할 수 있는 기타 음 재생 프로그램을 만듭니다. 다음 내용을 배웁니다:

note: (itstool) path: item/p
en: Set up a basic project using the <link xref="getting-ready">Anjuta IDE</link>.
ko: <link xref="getting-ready">안주타 IDE</link>로 기본 프로젝트를 설정합니다.

note: (itstool) path: item/p
en: Create a simple GUI with <app>Anjuta</app>'s UI designer.
ko: <app>안주타</app> 사용자 인터페이스 디자이너로 간단한 GUI를 만듭니다.

note: (itstool) path: item/p
en: Use the <link href="http://developer.gnome.org/platform-overview/stable/gstreamer">GStreamer</link> library to play sounds.
ko: 소리 재생에 <link href="http://developer.gnome.org/platform-overview/stable/gstreamer">지스트리머</link> 라이브러리를 사용합니다.

note: (itstool) path: item/p
en: Basic knowledge of the <link href="https://live.gnome.org/Vala/Tutorial">Vala</link> programming language.
ko: <link href="https://live.gnome.org/Vala/Tutorial">Vala</link> 프로그래밍 언어 기본 지식.

note: (itstool) path: item/p
en: An installed copy of <app>Anjuta</app>.
ko: <app>안주타</app> 설치 사본.

note: (itstool) path: section/title
en: Create a project in <app>Anjuta</app>
ko: <app>안주타</app> 프로젝트 만들기

note: (itstool) path: item/p
en: Start <app>Anjuta</app> and click <gui>Create a new project</gui> or <guiseq><gui>File</gui><gui>New</gui><gui>Project</gui></guiseq> to open the project wizard.
ko: <app>안주타</app> 를 시작하고 <gui>새 프로젝트 만들기</gui> 또는 <guiseq><gui>파일</gui><gui>새로 만들기</gui><gui>프로젝트</gui></guiseq> 를 눌러 프로젝트 마법사를 여십시오.

note: (itstool) path: item/p
en: Click on the <gui>Vala</gui> tab and select <gui>GTK+ (Simple)</gui>. Click <gui>Continue</gui>, and fill out your details on the next few pages. Use <file>guitar-tuner</file> as project name and directory.
ko: <gui>Vala</gui> 탭을 누른 후 <gui>GTK+ (단순)</gui> 항목을 선택하십시오. <gui>계속</gui>을 누르고 다음 일부 페이지에서 세부 내용을 채워나가십시오. 프로젝트 이름과 디렉터리 이름을 <file>guitar-tuner</file>로 설정하십시오.

note: (itstool) path: item/p
en: Make sure that <gui>Configure external packages</gui> is switched <gui>ON</gui>. On the next page, select <link href="http://valadoc.org/gstreamer-0.10/index.htm"><em>gstreamer-0.10</em></link> from the list to include the GStreamer library in your project. Click <gui>Continue</gui>
ko: <gui>외부 패키지 설정</gui>을 <gui>켬</gui>으로 설정했는지 확인하십시오. 다음 페이지의 목록에서 <link href="http://valadoc.org/gstreamer-0.10/index.htm"><em>gstreamer-0.10</em></link>를 선택하여 프로젝트에 지스트리머 라이브러리를 넣으십시오. <gui>계속</gui>을 누르십시오.

note: (itstool) path: item/p
en: Click <gui>Apply</gui> and the project will be created for you. From the <gui>Project</gui> or <gui>Files</gui> tab, open <file>src/guitar_tuner.vala</file> by double-clicking on it. You should see some code which starts with the lines:
ko: <gui>적용</gui>을 누르면 프로젝트를 만들어줍니다. <gui>프로젝트</gui>나 <gui>파일</gui>탭에서 <file>src/guitar_tuner.vala</file> 파일을 두 번 눌러 여십시오. 다음 줄로 시작하는 일부 코드를 볼 수 있습니다:

note: (itstool) path: section/p
en: The code loads an (empty) window from the user interface description file and displays it. More details are given below; you may choose to skip this list if you understand the basics:
ko: 이 코드는 (빈) 창을 사용자 인터페이스 설명 파일에서 불러오고 화면에 나타냅니다. 자세한 내용은 아래에 있습니다. 기본을 이해하셨다면 이 부분은 넘어가셔도 됩니다:

note: (itstool) path: item/p
en: The two <code>using</code> lines import namespaces so we don't have to name them explicitly.
ko: <code>using</code> 선언부 두줄은 이름 여역을 가져오므로 굳이 이름을 적어넣을 필요는 없습니다.

note: (itstool) path: item/p
en: The constructor of the <code>Main</code> class creates a new window by opening a GtkBuilder file (<file>src/guitar-tuner.ui</file>, defined a few lines above), connecting its signals and then displaying it in a window. This GtkBuilder file contains a description of a user interface and all of its elements. You can use Anjuta's editor to design GtkBuilder user interfaces.
ko: <code>Main</code> 클래스 생성자는 GtkBuilder 파일을 열어 새 창을 만들고(위 몇 줄에 정의한 <file>src/guitar-tuner.ui</file>), 시그널을 연결한 다음 창을 화면에 띄웁니다. GtkBiulder 파일에는 사용자 인터페이스 설명과 구성요소 모두를 담고 있습니다. 안주타 편집기를 사용하여 GtkBuilder 사용자 인터페이스를 디자인할 수 있습니다.

note: (itstool) path: note/p
en: Connecting signals is how you define what happens when you push a button, or when some other event happens. Here, the <code>on_destroy</code> function is called (and quits the app) when you close the window.
ko: 시그널 연결은 단추를 눌렀을 때 또는 다른 어떤 일이 일어났을 때 일어날 행동을 정의하는 방식입니다. 여기서 <code>on_destroy</code> 함수는 창을 닫을 때 호출(하고 끝내기) 합니다.

note: (itstool) path: item/p
en: The static <code>main</code> function is run by default when you start a Vala application. It calls a few functions which create the Main class, set up and then run the application. The <code>Gtk.main</code> function starts the GTK main loop, which runs the user interface and starts listening for events (like clicks and key presses).
ko: 정적 <code>main</code> 함수는 Vala 프로그램을 시작할 때 기본으로 실행합니다. Main 클래스를 만들고 설정한 다음 프로그램을 실행하는 일부 함수를 호출합니다. <code>Gtk.main</code> 함수는 사용자 인터페이스를 실행하고 (마우스 누름과 키 누름 같은) 이벤트를 기다리기 시작하는 GTK 메인 루프를 시작합니다.

note: (itstool) path: section/p
en: This code is ready to be used, so you can compile it by clicking <guiseq><gui>Build</gui><gui>Build Project</gui></guiseq> (or press <keyseq><key>Shift</key><key>F7</key></keyseq>). When you do this, a dialog will appear. Change the <gui>Configuration</gui> to <gui>Default</gui> and then click <gui>Execute</gui> to configure the build directory. You only need to do this once, for the first build.
ko: 이 코드를 사용할 준비가 끝났기에 <guiseq><gui>빌드</gui><gui>프로젝트 빌드</gui></guiseq>(또는 <keyseq><key>Shift</key><key>F7</key></keyseq>키)를 눌러 컴파일할 수 있습니다. 이 과정을 수행하면 대화상자가 나타납니다.  <gui>설정</gui>을 <gui>기본</gui>으로 바꾸고 <gui>실행</gui>을 눌러 빌드 디렉터리를 설정하십시오. 처음 빌드하실 때 한 번만 실행하시면 됩니다.

note: (itstool) path: section/p
en: A description of the user interface (UI) is contained in the GtkBuilder file <file>src/guitar_tuner.ui</file> defined at the top of the class. To edit the user interface, open <file>src/guitar_tuner.ui</file> by double-clicking on it in the <gui>Project</gui> or <gui>Files</gui> section. This will switch to the interface designer. The design window is in the center; <gui>Widgets</gui> and the widget properties are on the right, and the <gui>Palette</gui> of available widgets is on the left.
ko: 사용자 인터페이스(UI)설명은 클래서 상단에 정의한 <file>src/guitar_tuner.ui</file> GtkBuilder 파일에 있습니다. 사용자 인터페이스를 편집하려면 <gui>프로젝트</gui> 또는 <gui>파일</gui> 섹션에서 <file>src/guitar_tuner.ui</file> 파일을 두 번 눌러 여십시오. 이 동작을 통해 인터페이스 디자이너 프로그램으로 옮겨갑니다. 디자인 창은 가운데 있고, <gui>위젯</gui> 과 위젯 속성은 오른편에, 사용할 수 있는 위젯의 <gui>팔레트</gui>는 왼편에 있습니다.

note: (itstool) path: section/p
en: The layout of every UI in GTK+ is organized using boxes and tables. Let's use a vertical GtkButtonBox here to assign six GtkButtons, one for each of the six guitar strings.
ko: GTK+의 모든 UI 배치는 상자와 테이블 안에 모아둡니다. 기타 줄 각 한개를 의미하는 GtkButton 6개를 모아둘 수직 방향 GtkButtonBox를 사용해보겠습니다.

note: (itstool) path: item/p
en: In the <gui>Palette</gui> tab, from the <gui>Containers</gui> section, select a <gui>Button Box</gui> (GtkButtonBox) by clicking on the icon. Then click on the design window in the center to place it into the window. A dialog will display where you can set the <gui>Number of items</gui> to <input>6</input>. Then click <gui>Create</gui>.
ko: <gui>컨테이너</gui> 섹션의 <gui>팔레트-</gui> 탭에서 아이콘을 눌러 <gui>Button Box</gui>(GtkButtonBox)를 선택하십시오. 그 후 디자인 창 한가운데를 눌러 창에 넣으십시오. <gui>항목 수</gui>를 <input>6</input>으로 설정할 수 있는 대화상자가 나타납니다. 설정하고 나면 <gui>만들기</gui>를 누르십시오.

note: (itstool) path: note/p
en: You can also change the <gui>Number of elements</gui> and the <gui>Orientation</gui> in the <gui>General</gui> tab on the right.
ko: 우측 <gui>일반</gui> 탭에서 <gui>항목 수</gui>와 <gui>방향</gui>을 설정할 수도 있습니다.

note: (itstool) path: item/p
en: Now, from the <gui>Control and Display</gui> section of the <gui>Palette</gui> choose a <gui>Button</gui> (GtkButton) by clicking on it. Place it into the first section of the GtkButtonBox by clicking in the first section.
ko: 이제 <gui>팔레트</gui>의 <gui>컨트롤 및 표시</gui> 섹션에서  <gui>Button</gui> (GtkButton)을 눌러 선택하십시오. 처음 섹션을 눌러서 GtkButtonBox의 처음 섹션에 두십시오.

note: (itstool) path: item/p
en: While the button is still selected, scroll down in the <gui>General</gui> tab on the right to the <gui>Label</gui> property, and change it to <gui>E</gui>. This will be the low E guitar string.
ko: 단추를 선택한 상태라면 우측 <gui>일반</gui> 탭에서 스크롤을 내려 <gui>레이블</gui> 속성을 찾아 <gui>E</gui>로 바꾸십시오. 낮은 E 음 기타 현 입니다.

note: (itstool) path: note/p
en: The <gui>General</gui> tab is located in the <gui>Widgets</gui> section on the right.
ko: <gui>일반</gui> 탭은 우측 <gui>위젯</gui> 섹션에 있습니다.

note: (itstool) path: item/p
en: Click on the <gui>Signals</gui> tab in the <gui>Widgets</gui> section on the right, and look for the <code>clicked</code> signal of the button. You can use this to connect a signal handler that will be called when the button is clicked by the user. To do this, click on the signal and type <code>main_on_button_clicked</code> in the <gui>Handler</gui> column and press the <key>Enter</key>.
ko: 우측의 <gui>위젯</gui> 섹션에서 <gui>시그널</gui>을 누르고 단추의 <code>clicked</code> 시그널을 찾으십시오. 단추를 사용자가 눌렀을 때 호출할 시그널 핸들러에 이 시그널을 연결할 수 있습니다. 이렇게 하려면 시그널을 선택하고 <gui>핸들러</gui> 열에 <code>main_on_button_clicked</code>를 입력한 후 <key>Enter</key>키를 누르십시오.

note: (itstool) path: section/p
en: This section will show you how to create the code to produce sounds. <link href="http://developer.gnome.org/platform-overview/stable/gstreamer">GStreamer</link> is GNOME's multimedia framework — you can use it for playing, recording, and processing video, audio, webcam streams and the like. Here, we'll be using it to produce single-frequency tones.
ko: 이 섹션은 음을 재생하는 코드를 작성하는 법을 보여줍니다. <link href="http://developer.gnome.org/platform-overview/stable/gstreamer">지스트리머</link>는 그놈 멀티미디어 프레임워크입니다. 동영상, 오디오, 웹캠 스트림 같은 매체를 재생하고, 녹음/녹화하고 처리할 때 이 프레임워크를 사용할 수 있습니다. 여기서는 단일 주파수 음을 재생할 때 이 프레임워크를 사용하겠습니다.

note: (itstool) path: section/p
en: Conceptually, GStreamer works as follows: You create a <link href="http://gstreamer.freedesktop.org/data/doc/gstreamer/head/manual/html/section-intro-basics-bins.html"><em>pipeline</em></link> containing several processing elements going from the <em>source</em> to the <em>sink</em> (output). The source can be an image file, a video, or a music file, for example, and the output could be a widget or the soundcard.
ko: 개념상 지스트리머든 다음과 같이 동작합니다.  <em>source</em>에서 <em>sink</em>(출력)으로의 다양한 처리 흐름을 담는 <link href="http://gstreamer.freedesktop.org/data/doc/gstreamer/head/manual/html/section-intro-basics-bins.html"><em>파이프라인</em></link>을 만듭니다. source는 그림 파일, 동영상, 음악 파일이 될 수 있으며, 출력 모양새는 위젯 또는 사운드 카드의 출력일 수 있습니다.

note: (itstool) path: section/p
en: In this example we will use a tone generator source called <code>audiotestsrc</code> and send the output to the default system sound device, <code>autoaudiosink</code>. We only need to configure the frequency of the tone generator; this is accessible through the <code>freq</code> property of <code>audiotestsrc</code>.
ko: 여기 단순 예제에서는 <code>audiotestsrc</code> 라는 음 재생기 소스를 사용하고 기본 시스템 사운드 장치 <code>autoaudiosink</code>로 출력을 내보내겠습니다. 우리는 여기서 음 재생기 주파수만 설정하면 됩니다.  <code>audiotestsrc</code>의 <code>freq</code> 속성을 사용하면 됩니다.

note: (itstool) path: section/p
en: We need to add a line to initialize GStreamer; put the following code on the line above the <code>Gtk.init</code> call in the <code>main</code> function:
ko: 지스트리머를 초기화하는 코드 한 줄을 넣어야합니다. 다음 코드를 <code>main</code> 함수의 <code>Gtk.init</code> 코드 위에 넣으십시오:

note: (itstool) path: section/p
en: Then, copy the following function into <file>guitar_tuner.vala</file> inside our <code>Main</code> class:
ko: 그리고 다음 함수 코드를 <code>Main</code> 클래스의 <file>guitar_tuner.vala</file> 파일 안에 복사해넣으십시오:

note: (itstool) path: item/p
en: The first three lines create source and sink GStreamer elements (<link href="http://valadoc.org/gstreamer-0.10/Gst.Element.html"><code>Gst.Element</code></link>), and a <link href="http://valadoc.org/gstreamer-0.10/Gst.Pipeline.html">pipeline element</link> (which will be used as a container for the other two elements). Those are class variables so they are defined outside the method. The pipeline is given the name "note"; the source is named "source" and is set to the <code>audiotestsrc</code> source; and the sink is named "output" and set to the <code>autoaudiosink</code> sink (default sound card output).
ko: 처음 다섯줄에서는 source와 sink 지스트리머 구성 요소(<link href="http://valadoc.org/gstreamer-0.10/Gst.Element.html"><code>Gst.Element</code></link>), <link href="http://valadoc.org/gstreamer-0.10/Gst.Pipeline.html">파이프라인 구성 요소</link>(source와 sink의 컨테이너로 활용)를 만듭니다. 여기 언급한 구성요소는 클래스 변수이므로 밖에서는 메서드로 정의합니다. 파이프라인 이름은 "note"라고 지어둡니다. source는 "source"로 이름 붙이고 <code>audiotestsrc</code>로 설정합니다. sink는 "output"으로 이름 붙이고 <code>autoaudiosink</code> sink로 설정합니다(기본은 사운드 카드 출력).

note: (itstool) path: item/p
en: The call to <link href="http://valadoc.org/gobject-2.0/GLib.Object.set.html"><code>source.set</code></link> sets the <code>freq</code> property of the source element to <code>frequency</code>, which is passed in as an argument to the <code>play_sound</code> function. This is just the frequency of the note in Hertz; some useful frequencies will be defined later on.
ko: <code>play_sound</code> 함수 인자로 넘긴 <code>frequency</code> 값을 <link href="http://valadoc.org/gobject-2.0/GLib.Object.set.html"><code>source.set</code></link> 호출로 source 구성 요소의 <code>freq</code>  속성을 설정합니다. 이 값은 헤르쯔 단위의 주파수입니다 쓸만한 주파수 값은 나중에 정의하겠습니다.

note: (itstool) path: item/p
en: <link href="http://valadoc.org/gstreamer-0.10/Gst.Bin.add.html"><code>pipeline.add</code></link> puts the source and sink into the pipeline. The pipeline is a <link href="http://valadoc.org/gstreamer-0.10/Gst.Bin.html"><code>Gst.Bin</code></link>, which is just an element that can contain multiple other GStreamer elements. In general, you can add as many elements as you like to the pipeline by adding more calls to <code>pipeline.add</code>.
ko: <link href="http://valadoc.org/gstreamer-0.10/Gst.Bin.add.html"><code>pipeline.add</code></link>  파이프라인에 source와 sink를 둡니다. 파이프라인은 다른 지스트리머 구성 요소를 여럿 넣을 수 있는 <link href="http://valadoc.org/gstreamer-0.10/Gst.Bin.html"><code>Gst.Bin</code></link> 입니다. 보통 <code>pipeline.add</code> 에 호출을 추가하여 원하는 만큼 구성 요소를 넣을 수 있습니다.

note: (itstool) path: item/p
en: Next, <link href="http://valadoc.org/gstreamer-0.10/Gst.Element.link.html"><code>sink.link</code></link> is used to connect the elements together, so the output of source (a tone) goes into the input of sink (which is then output to the sound card). <link href="http://www.valadoc.org/gstreamer-0.10/Gst.Element.set_state.html"><code>pipeline.set_state</code></link> is then used to start playback, by setting the <link href="http://www.valadoc.org/gstreamer-0.10/Gst.State.html">state of the pipeline</link> to playing (<code>Gst.State.PLAYING</code>).
ko: 다음, <link href="http://valadoc.org/gstreamer-0.10/Gst.Element.link.html"><code>sink.link</code></link>는 구성 요소를 서로 연결하여 source의 출력이 sink의 입력으로 들어가게 할 때(그리고 나중에 이 흐름은 사운드 카드로 출력함) 사용합니다. 그 다음 <link href="http://www.valadoc.org/gstreamer-0.10/Gst.Element.set_state.html"><code>pipeline.set_state</code></link>로 <link href="http://www.valadoc.org/gstreamer-0.10/Gst.State.html">파이프라인 상태</link>를 재생(<code>Gst.State.PLAYING</code>) 상태로 설정하여 재생을 시작합니다.

note: (itstool) path: item/p
en: We don't want to play an annoying tone forever, so the last thing <code>play_sound</code> does is to add a <link href="http://www.valadoc.org/glib-2.0/GLib.TimeoutSource.html"><code>TimeoutSource</code></link>. This sets a timeout for stopping the sound; it waits for 200 milliseconds before calling a signal handler defined inline that stops and destroys the pipeline. It returns <code>false</code> to remove itself from the timeout, otherwise it would continue to be called every 200 ms.
ko: 음을 무한정 지겹게 재생하고 싶지는 않기 때문에 <code>play_sound</code> 함수에서 <link href="http://www.valadoc.org/glib-2.0/GLib.TimeoutSource.html"><code>TimeoutSource</code></link>를 추가합니다. TimeoutSource로 음 재생을 멈출 제한 시간을 설정합니다. 파이프라인을 멈추고 해체하는 코드를 정의한 시그널 핸들러를 호출하기 전 200 밀리초 동안 기다립니다. 주어진 시간이 지나면 자체를 해체할 목적으로 <code>false</code>를 반환합니다. 그렇지 않으면 200 밀리초마다 계속 실행합니다.

note: (itstool) path: section/p
en: In the UI designer, you made it so that all of the buttons will call the same function, <gui>on_button_clicked</gui>, when they are clicked. Actually we type <gui>main_on_button_clicked</gui> which tells the UI designer that this method is part of our <code>Main</code>. We need to add that function in the source file.
ko: UI 디자이너에서 모든 단추를 만들어서 이 단추에 동일한 함수 단추를 눌렀을 때 동일한 함수 <gui>on_button_clicked</gui>를 호출하도록 연결할 차례입니다. 실제로 UI 디자이너에서 입력한 <gui>main_on_button_clicked</gui>는 Main의 메서드를 말합니다. 소스 파일에 이 함수를 추가해야합니다.

note: (itstool) path: section/p
en: To do this, in the user interface file (guitar_tuner.ui) select one of the buttons by clicking on it, then open <file>guitar_tuner.vala</file> (by clicking on the tab in the center). Switch to the <gui>Signals</gui> tab on the right, which you used to set the signal name. Now take the row where you set the <gui>clicked</gui> signal and drag and drop it into to the source file at the beginning of the class. The following code will be added to your source file:
ko: 소스 파일에 함수를 추가하려면 사용자 인터페이스 파일(guitar_tuner.ui)에서 단추 하나를 눌러 선택하고, (가운데 탭을 눌러) <file>guitar_tuner.vala</file> 파일을 여십시오. 시그널 이름을 설정하는 오른편의 <gui>시그널</gui> 탭으로 옮겨가십시오. 이제 앞서 설정한 <gui>clicked</gui> 시그널 줄을 클래스 앞부분의 소스 파일에 끌어다 높으십시오. 이 동작을 통해 소스 파일에 다음 코드를 추가합니다:

note: (itstool) path: note/p
en: You can also just type the code at the beginning of the class instead of using the drag and drop.
ko: 끌어다 놓는 방식 대신 클래스 앞 부분에 코드를 직접 입력할 수도 있습니다.

note: (itstool) path: section/p
en: This signal handler has only one argument: the <link href="http://valadoc.org/gtk+-3.0/Gtk.Widget.html"><code>Gtk.Widget</code></link> that called the function (in our case, always a <link href="http://valadoc.org/gtk+-3.0/Gtk.Button.html"><code>Gtk.Button</code></link>).
ko: 시그널 핸들러의 인자는 <link href="http://valadoc.org/gtk+-3.0/Gtk.Widget.html"><code>Gtk.Widget</code></link>(우리 같은 경우, 항상 <link href="http://valadoc.org/gtk+-3.0/Gtk.Button.html"><code>Gtk.Button</code></link>) 하나뿐입니다.

note: (itstool) path: section/title
en: Define the signal handler
ko: 시그널 핸들러 정의

note: (itstool) path: section/p
en: We want to play the correct sound when the user clicks a button. For this, we flesh out the signal handler which we defined above, <code>on_button_clicked</code>. We could have connected every button to a different signal handler, but that would lead to a lot of code duplication. Instead, we can use the label of the button to figure out which button was clicked:
ko: 사용자가 단추를 누르면 올바른 음이 나오게 하려고 합니다. 이렇게 하려면 위에서 정의한 시그널 핸들러에 코드를 덧붙여야합니다. 모든 단추에 각자 다른 시그널 핸들러를 연결할 수 있지만, 같은 코드를 여러번 쓸 수 있습니다. 이 대신 어떤 단추를 눌렀는지 판단할 때 단추 레이블을 활용할 수 있습니다:

note: (itstool) path: section/p
en: The <code>Gtk.Button</code> that was clicked is passed as an argument (<code>sender</code>) to <code>on_button_clicked</code>. We can get the label of that button by using <code>get_child</code>, and then get the text from that label using <code>get_label</code>.
ko: 누른 <code>Gtk.Button</code>는 <code>on_button_clicked</code>의 인자(<code>sender</code>)로 전달합니다. <code>get_child</code>로 단추의 레이블을 가져올 수 있고, 해당 레이블에서 <code>get_label</code>로 텍스트를 가져올 수 있습니다.

note: (itstool) path: section/p
en: The switch statement compares the label text to the notes that we can play, and <code>play_sound</code> is called with the frequency appropriate for that note. This plays the tone; we have a working guitar tuner!
ko: switch 구문은 우리가 연주할 수 있는 음의 레이블 텍스트를 비교하고, 표시 음에 적당한 주파수로 <code>play_sound</code>를 호출합니다. 이 동작 과정을 통해 음을 재생합니다. 이렇게 하여 동작하는 기타 조율 프로그램을 만들었습니다!

note: (itstool) path: section/p
en: If you run into problems with the tutorial, compare your code with this <link href="guitar-tuner/guitar-tuner.vala">reference code</link>.
ko: 지침서를 따라하는 실행하는 과정에 문제가 있다면, <link href="guitar-tuner/guitar-tuner.vala">참조 코드</link>와 여러분의 코드를 비교해보십시오.

note: (itstool) path: section/title
en: Further reading
ko: 더 읽을거리

note: (itstool) path: section/p
en: To find out more about the Vala programming language you might want to check out the <link href="http://live.gnome.org/Vala/Tutorial">Vala Tutorial</link> and the <link href="http://valadoc.org/">Vala API Documentation</link>
ko: Vala 프로그래밍 언어에 대해 더 알아보려면 <link href="http://live.gnome.org/Vala/Tutorial">Vala 따라하기 지침서</link>와 <link href="http://valadoc.org/">Vala API 문서</link>를 확인해보시면 좋습니다.

note: (itstool) path: info/desc
en: Your first GNOME application!
ko: 첫 그놈 프로그램!

note: (itstool) path: page/title
en: 1. Hello, GNOME!
ko: 1. 안녕, 그놈!

note: (itstool) path: synopsis/p
en: This tutorial will show you how to write your first GNOME application in JavaScript. You will use JavaScript to write for GNOME the same way you would for the web. Afterwards, you will learn how to use "native" widgets, to write applications that look and feel like other GNOME apps.
ko: 이 지침서에서는 자바스크립으로 첫 그놈 프로그램을 작성하는 방법을 알려드립니다. 웹 프로그램을 작성했던 것처럼 동일한 방식으로 그놈 프로그램 작성시 자바스크립트언어를 활용합니다. 그 다음, 다른 그놈 앱 처럼 보이는 프로그램을 작성할 목적으로 "자체" 위젯을 활용하는 방법을 알아보겠습니다.

note: (itstool) path: note/p
en: Have you gotten GNOME installed on your computer, and <link xref="set-up-gedit.js">gedit</link> set up to write code with? You'll want to do these things first.
ko: 컴퓨터에 그놈을 설치하고 코드를 작성할 <link xref="set-up-gedit.js">지에디트</link>를 설정하셨죠? 우선 이 과정을 거쳐야합니다.

note: (itstool) path: section/title
en: Let's start with a web page
ko: 웹 페이지로 시작하죠

note: (itstool) path: section/p
en: Here's some basic HTML, CSS, and JavaScript code. Does this look familiar?
ko: HTML, CSS, JavaScript 기본 코드가 몇개 있습니다. 어디서 많이 본 것 같죠?

note: (itstool) path: section/p
en: Let's save this as <file>hellognome.html</file>, and see what it looks like when we run it!
ko: 이걸 <file>hellognome.html</file> 파일로 저장하고 실행했을 때 어떻게 나오는지 살펴보도록 하죠!

note: (itstool) path: section/p
en: You <em>can</em> run the above code by opening <file>hellognome.html</file> in a web browser. But here, we're going to create a GNOME application that runs our web app inside of it, just like you see in the screenshot. You'll be able to resize and maximize the window, and click the X in the corner to close it, just like you'd expect from any other GNOME app. The difference is that this one will run our web code inside of it.
ko: 웹 브라우저에서 <file>hellognome.html</file> 파일을 열면 위 코드를 실행<em>할 수 있습니다</em>. 하지만 스크린샷으로 보시듯이 웹 앱을 실행할 그놈 프로그램을 만들려고 합니다. 창 크기를 조절하거나 최대로 확대할 수 있으며, 다른 그놈 앱처럼 구석의 X를 눌러 닫을 수 있습니다. 차이점이 있다면 프로그램에서 왭 코드를 실행한다는 점입니다.

note: (itstool) path: section/p
en: The best part? We're going to continue to use JavaScript, to write all the parts that make our app work with GNOME. Let's look at the code, and see how it's done!
ko: 대부분은요? 그놈에서 동작하는 앱의 모든 부분을 작성할 때 JavaScript를 사용하는 편으로 계속 진행하겠습니다. 코드를 보고 어떻게 돌아가는지 보도록 하죠!

note: (itstool) path: section/title
en: Creating a GNOME window to frame our web app
ko: 웹 앱에 맞출 그놈 창 만들기

note: (itstool) path: section/p
en: First, we need to tell GNOME that this is a JavaScript application, which uses gjs. Gjs is GNOME's way of turning your JavaScript code into instructions it understands, so this line always has to go at the start of your applications.
ko: 우선 그놈에게 gjs를 사용하는 JavaScript 프로그램임을 알려야 합니다. gjs는 JavaScript 코드를 이해할 수 있는 기계 명령으로 바꾸는 그놈의 처리 수단입니다. 따라서 프로그램 시작 부분에 항상 이 줄을 넣어야합니다.

note: (itstool) path: section/p
en: Then we should set the versions of the libraries we'll be using.
ko: 그 다음 우리가 사용할 라이브러리 버전을 설정해야합니다.

note: (itstool) path: section/p
en: After that, we need to tell GNOME which libraries we want to import.
ko: 그 다음 우리가 가져올 라이브러리를 그놈에게 알려야겠죠.

note: (itstool) path: section/p
en: Just like how add-on libraries like jQuery let us do extra things with JavaScript, each of these libraries gives us new capabilities for our GNOME apps:
ko: jQuery가 JavaScript으로 할 수 있는 추가 행동을 우리에게 알려주도록 라이브러리를 추가하는 방식처럼, 이 라이브러리는 그놈 앱에서 처리할 수 있는 새 기능을 제공해줍니다:

note: (itstool) path: item/p
en: <file>Gtk</file> is the basic part of any GNOME application, which lets you create windows and widgets and tie them together.
ko: <file>Gtk</file>는 그놈 프로그램의 기본적인 부분이며, 창과 위젯을 만들어 한데 묶어둘 수 있습니다.

note: (itstool) path: item/p
en: <file>GLib</file> is a helper library, which lets us do things like tell GNOME where the <file>hellognome.html</file> file we created is.
ko: <file>GLib</file>는 우리가 만든 <file>hellognome.html</file> 파일에서 그놈에서 처리할 수 있는 동작이 가능하게 하는 보조 라이브러리입니다.

note: (itstool) path: item/p
en: And <file>Webkit</file> is a web rendering engine, which we'll use to basically create a browser window to open our HTML file with.
ko: 그리고 <file>Webkit</file>은 HTML 파일을 여는 브라우저 창을 만들 때 사용하는 웹 렌더링 엔진입니다.

note: (itstool) path: section/p
en: Now we create the application itself:
ko: 이제 프로그램 그 자체를 만들어보죠:

note: (itstool) path: section/p
en: This will look familiar to you if you've worked with object-oriented JavaScript before. That's right; our whole application is a class called HelloGNOME.
ko: 이 코드는 이전에 다루어 보았다면 객체 지향 자바스크립트와 비슷해보일겝니다. 맞습니다. 이 전체 프로그램은 HelloGNOME 클래스입니다.

note: (itstool) path: section/p
en: Here's some code you will more or less copy-and-paste for every JavaScript application you build. It creates a new Application, and then binds its activate and startup signals to functions that make the window show itself and build its user interface, respectively.
ko: 여러분이 빌드한 모든 JavaScript 프로그램을 덜 또는 덜 복사하야 붙여넣을 코드 일부입니다. 이 코드로 새 프로그램을 만들고, activate 시그널과 startup 시그널을 함수에 바인딩하여 창을 나타내고 사용자 인터페이스를 구성합니다.

note: (itstool) path: section/p
en: What does that mean? Well, everything in a GNOME application sends out a signal when something important happens. A button might send out the clicked signal when you click on it, for instance. Our job is to connect the signals to functions which handle them, and make the things that we want to have happen occur. We do this using each object's connect method, which takes two arguments: The signal we want to handle, and the bound function, which we have to use to tell connect which function we want to have handle the signal.
ko: 무슨 얘길까요? 그놈 프로그램의 모든 부분에서는 어떤 중요한 동작이 일어날 때 시그널을 내보냅니다. 예컨대, 단추를 누르면 clicked 시그널을 내보냅니다. 우리는 시그널을 처리할 함수와 연결하고 어떤 동작을 취할 코드를 만들겠습니다. 각각 두 인자를 가진 객체의 연결 메서드를 활용하겠습니다. 우리가 처리하고자 하는 시그널, 그리고 우리가 처리하고자 하는 시그널을 어떤 함수와 연결할 지 지시할 때 사용하는 Lang.bind 함수를 인자로 전달합니다.

note: (itstool) path: section/p
en: In this case, we want _onActivate to handle the activate signal, and _onStartup to handle the startup signal. _onActivate just tells the window to present itself; so basically, whenever you <keyseq><key>Alt</key> <key>Tab</key></keyseq> to the application it appears, like you would expect it to. _onStartup calls _buildUI, which is the function that creates our user interface and is the next part that we will look at.
ko: 이 경우 activate 시그널을 처리할 때 _onActivate 함수를, startup 시그널을 처리할 때 _onStartup을 사용하겠습니다. _onActivate는 창 자체를 나타내러고 지시합니다. 그래서 기본적으로는 <keyseq><key>Alt</key> <key>Tab</key></keyseq> 키를 누를 때마다 예상하던 대로 프로그램이 나타납니다. _onStartup 함수에서 사용자 인터페이스를 만들며 다음에  우리가 살펴볼 _buildUI를 호출합니다.

note: (itstool) path: note/p
en: When you copy and paste the above code for your own applications, be sure to change the class name to a unique one each time.
ko: 위 코드를 프로그램에 복사하여 붙여넣을 때마다, 바꿀 클래스 이름이 유일한 이름인지 확인하십시오.

note: (itstool) path: section/title
en: Designing our window's UI
ko: 창 UI 디자인

note: (itstool) path: section/p
en: In the _buildUI function, we're going to tell GNOME about our window and the things inside it, one at a time. After that, we're going to connect everything together and put it all on display.
ko: _buildUI 함수에서 그놈에게 창과 창에 있는 내용을 한번에 하나씩 언급하고 있습니다. 그 다음 개별 요소를 함께 연결하고 화면에 한번에 넣습니다.

note: (itstool) path: section/p
en: The first object we create is an ApplicationWindow. It needs a title to go in the title bar, and its application property needs to be the application that we created, above. Beyond that, there are various ways of customizing how it looks, which the <link xref="GtkApplicationWindow.js">ApplicationWindow</link> reference page will go into more detail about. As you can see here, we gave it a default height and width (measured in pixels), and told GNOME we want our window to appear in the center of the screen.
ko: 우리가 만들 첫 객체는 ApplicationWindow입니다. 제목 표시줄에 들어갈 제목, 우리가 위에서 만든 프로그램에 필요한 application 속성이 필요합니다. 모양새를 바꾸는 방법에는 여러가지가 있지만 <link xref="GtkApplicationWindow.js">ApplicationWindow</link> 참고 페이지의 내용에서 자세한 내막을 설명해줍니다. 여기서 보시듯, (픽셀 단위) 기본 너비, 높이 값을 설정하고 그놈에게 화면 한가운데에 창을 나타내고 싶음을 지시합니다.

note: (itstool) path: section/p
en: Remember how we imported Webkit right at the start? Here we're creating a new instance of a Webkit class called a WebView, which is more or less a browser window you can put inside of your app. After that, we then give it the URI that we want it to load when the application starts up.
ko: 시작 부분에서 Webkit을 어떻게 가져왔는지 기억하시죠? 여기서는 앱을 안에다 넣고 실행할 수 있는 더도 덜도 아닌 웹 브라우저, WebView라고 하는 Webkit 클래스의 새 인스턴스를 만들겠습니다. 그 다음 프로그램을 시작할 때 우리가 불러올 URI를 설정하겠습니다.

note: (itstool) path: section/p
en: We <em>could</em> just give it a web URI, like <link href="http://gnome.org">http://gnome.org</link>. Instead, here we use a couple of GLib helper functions to tell the WebView where our <file>hellognome.html</file> file is. GLib.get_current_dir returns the directory that our app's running in, and GLib.filename_to_uri turns our file's path and filename into a URI that the WebView's load_uri function understands. (filename_to_uri's second parameter should be null unless you know what it's used for and have a reason for changing it.)
ko: <link href="http://gnome.org">http://gnome.org</link>와 같은 웹 URI를 그냥 설정 <em>할 수 있습니다</em>. 대신 우리가 작성한 <file>hellognome.html</file> 파일이 어디에 있는지 WebView에 알려줄 GLib 보조 함수 몇가지를 활용하겠습니다. GLib.get_current_dir에서는 앱을 실행할 디렉터리를 반환하고 GLib.filename_to_uri에서는 WebView의 load_uri 함수가 이해할 수 있도록 파일의 경로와 파일 이름을 URI 형식으로 반환합니다(filename_to_uri의 두번째 매개변수는 용도와 값을 바꿔야 할 이유를 정확하게 알기 전까지는 null 값이어야 합니다).

note: (itstool) path: section/p
en: Each window can hold one, and only one, widget. Normally, we'd use a container widget like a <link xref="grid.js">Grid</link> to put multiple widgets into, then use the window's add function to add the Grid to it. Here, we just need the WebView, so that's all we add to the window. After that, as the last part of the _buildUI function that creates our window, we tell the window to show itself and its contents.
ko: 각 창은 하나 그리고 오직 하나의 위젯만을 소유할 수 있습니다. 보통 여러 위젯을 넣을 때 <link xref="grid.js">Grid</link>와 같은 컨테이너 위젯을 활용하고 창의 추가 함수로 Grid 안에 넣습니다. 우리는 WebView만 필요하기 때문에, WebView를 창에 넣기만 하면 됩니다. 그 다음 창을 만드는 _buildUI 함수의 마지막 부분으로 창에게 자신과 창의 내용을 보여주도록 지시하겠습니다.

note: (itstool) path: section/p
en: Finally, we create a new instance of our HelloGNOME class, and tell GNOME to run it.
ko: 마지막으로 HelloGNOME 클래스의 새 인스턴스를 만들고 그놈에게 이 코드를 실행하라고 지시하겠습니다.

note: (itstool) path: section/title
en: Running your GNOME application
ko: 그놈 프로그램 실행

note: (itstool) path: section/p
en: Now that we've created our first GNOME application, it's time to test it out! You don't need to compile your app or install any special software for this; GNOME has gjs built in, to let it run GNOME Shell. Just save <file>hellognome.html</file> and our actual application, <file>hellognome.js</file>, to a directory you can get to with the terminal. (They usually open onto your home directory, the one that's called by your username.) After that, open a terminal, go there, and type:
ko: 이제 우리는 첫 그놈 프로그램을 만들었으니 시험해볼 떄가 왔습니다. 만드신 프로그램을 컴파일하거나 특별한 프로그램 마냥 설치할 필요가 없습니다. 그놈에는 그놈 셸을 실행하게 하는 gjs를 자체적으로 보유하고 있습니다. 그냥 터미널 상에서 접근할 수 있는 그 어떤 디렉터리에든 <file>hellognome.html</file> 파일과 실제 프로그램 <file>hellognome.js</file>파일을 저장하십시오(보통 사용자 이름이 붙은 '내 폴더'를 엽니다). 그 후 터미널을 열고 다음 명령을 입력하십시오:

note: (itstool) path: section/p
en: You should see more or less the same screenshot as before, with a button that you can click to make a short message appear.
ko: 앞서 보신바와 같이 간단한 메시지를 띄우는 단추가 나타나는, 더 혹은 덜 유사한 화면을 볼 수 있어야합니다.

note: (itstool) path: note/p
en: You can use the terminal command
ko: 터미널 명령을 사용핧 수 있습니다.

note: (itstool) path: note/screen
en:  <output style="prompt">$ </output>cd <var>(directory name)</var>
ko:  <output style="prompt">$ </output>cd <var>(디렉터리 이름)</var>

note: (itstool) path: note/p
en: to navigate between directories inside the Terminal, in order to get to where you saved the files. There is also an extension for Nautilus, GNOME's file manager, which lets you right-click anywhere inside it to open a terminal window right there. Check the app you use to install new software (like Add/Remove Programs or the Software Center) for it.
ko: 터미널에서 저장한 파일이 어디에있는지 찾을 때 여러 디렉터리를 탐색하는 명령입니다. 그놈 파일 관리자 노틸러스에는 파일 탐색 창 어디에서든 마우스 오른쪽 단추를 누른 후 해당 위치에서 터미널을 여는 확장 기능도 있습니다. 새 프로그램을 설치할 때 사용하는 앱(프로그램 추가/제거 또는 소프트웨어 센터)을 확인해보십시오.

note: (itstool) path: section/p
en: <link xref="02_welcome_to_the_grid.js">Continue on to the next tutorial</link> to learn how to build "native" GNOME applications that look and feel like the others, instead of a webview with HTML code inside. Or take a look at some <link xref="beginner.js#samples">code samples</link>, if you'd like to see example code for each Gtk widget.
ko: HTML 코드와 웹 뷰 코드 대신, 다른 프로그램 같이 "자체" 그놈 프로그램을 빌드하는 방법을 알아보려면  <link xref="02_welcome_to_the_grid.js">다음 따라하기 지침서로 계속 진행하십시오</link>. 아니면 Gtk 위젯 예제 코드를 보고 싶으시면 일부 <link xref="beginner.js#samples">코드 예제</link>를 살펴보십시오.

note: (itstool) path: section/p
en: Finally, if you want to just build GNOME applications using JavaScript libraries designed for the web, you can basically stop here and go do that! Check out <link xref="beginner.js#tutorials">the later tutorials</link> if you'd like to see how to create a .desktop file for your application, which will let it appear in your desktop's Activities menu with all your other apps.
ko: 마지막으로 웹용으로 만든 JavaScript 라이브러리로 그놈 프로그램을 만들어보고 싶다면, 그냥 여기서 멈추고 계속 진행하실 수 있습니다. 다른 앱처럼 데스크톱의 현재 활동 메뉴에 프로그램이 나타나도록 .desktop 파일을 만드는 방법을 알아보려면 <link xref="beginner.js#tutorials">다음 따라하기 지침서</link>를 확인해보십시오.

note: (itstool) path: info/desc
en: Creating a small "Hello, World" application using GTK+.
ko: GTK+로 작은 "Hello, World" 프로그램을 만듭니다.

note: (itstool) path: note/p
en: For a detailed walk-through of creating a GTK+ dialog in C, see <link href="https://developer.gnome.org/gtk3/stable/gtk-getting-started.html">Getting Started with GTK+</link>
ko: C 언어로 GTK+ 대화상자를 만드는 자세한 설명은 <link href="https://developer.gnome.org/gtk3/stable/gtk-getting-started.html">GTK+ 시작하기</link>를 참고하십시오

note: (itstool) path: page/p
en: Writing a hello world GTK+ dialog in C can be done as seen in the code sample below:
ko: C 언어로의 hello world GTK+ 대화 상자 프로그램 작성은, 아래 보여드리는 예제 코드처럼 할 수 있습니다:

note: (itstool) path: page/p
en: GtkApplication initializes GTK+. It also connects the <gui>x</gui> button that's automatically generated along with the window to the "destroy" signal. We can start building our first window. We do this by creating a variable called <var>window</var> and assigning it a gtk_application_window_new. The window title can be any string you want it to be. To be on the safe side, it's best to stick to UTF-8 encoding. The code above will create a dialog window similar to what can be seen below:
ko: GtkApplication은 GTK+를 초기화합니다. 또한 창을 만들 때 자동으로 붙인 <gui>x</gui> 단추를 "destroy" 시그널에 연결합니다. 첫 창 만들기를 시작할 수 있습니다. <var>window</var> 변수를 만들고 gtk_application_window_new를 할당하겠습니다. 제목은 원하는대로 지을 수 있습니다. 안전한 방편으로, UTF-8 인코딩으로 작성하시는게 좋습니다. 위 코드는 아래와 같이 보이는 대화상자 창을 만듭니다:

note: (itstool) path: info/desc
en: A basic "hello, world" application
ko: 기본 "hello, world" 프로그램

note: (itstool) path: page/title
en: How to build, install and create a <file>tar.xz</file> of a Hello World program
ko: Hello World 프로그램의 <file>tar.xz</file> 파일을 빌드하고, 설치하고, 만들기

note: (itstool) path: synopsis/p
en: This tutorial will demonstrate how to:
ko: 이 지침서에서는 다음 방법을 보여줍니다:

note: (itstool) path: item/p
en: create a small "Hello, World" application using JavaScript and GTK+
ko: JavaScript와 GTK+로 간단한 "Hello, World" 프로그램 만들기

note: (itstool) path: item/p
en: make the <file>.desktop</file> file
ko: <file>.desktop</file> 파일 만들기

note: (itstool) path: item/p
en: how to set up the build system
ko: 빌드 시스템 구성 방법

note: (itstool) path: section/title
en: Create the program
ko: 프로그램 만들기

note: (itstool) path: section/p
en: This needs to be the first line of your script:
ko: 스크립트의 첫줄에 다음 줄이 들어가있어야합니다:

note: (itstool) path: section/p
en: It tells the script to use <link href="https://live.gnome.org/Gjs/">Gjs</link>. Gjs is a JavaScript binding for GNOME.
ko: 이 부분은 스크립트에서 <link href="https://live.gnome.org/Gjs/">Gjs</link>를 활용하겠다고 알려줍니다. gjs는 그놈용 자바스크립트 바인딩입니다.

note: (itstool) path: section/p
en: In order for our script to work with GNOME, we need to import GNOME libraries via GObject Introspection. Here we import the language bindings and GTK+, the library which contains the graphical widgets used to make GNOME applications.
ko: 우리가 작성한 스크립트가 그놈에서 동작하게 하려면, 그놈 라이브러리를 GObject 인트로스펙션으로 가져와야합니다. 여기서 우리는 언어 바인딩과 그놈 프로그램을 만들 때 그래픽 위젯이 들어있는 GTK+ 라이브러리를 임포팅합니다.

note: (itstool) path: section/p
en: GtkApplication initializes GTK+. It also connects the <gui>x</gui> button that's automatically generated along with the window to the "destroy" signal.
ko: GtkApplication은 GTK+를 초기화합니다. 또한 창을 만들 때 자동으로 붙인 <gui>x</gui> 단추를 "destroy" 시그널에 연결합니다.

note: (itstool) path: section/p
en: We can start building our first window. We do this by creating a variable called <var>_window</var> and assigning it a new Gtk.ApplicationWindow.
ko: 첫 창 만들기로 시작하겠습니다. <var>_window</var> 변수를 만들고 Gtk.ApplicationWindow 새 객체를 할당하겠습니다.

note: (itstool) path: section/p
en: We give the window a property called <var>title</var>. The title can be any string you want it to be. To be on the safe side, it's best to stick to UTF-8 encoding.
ko: 창에 <var>title</var> 속성을 설정해야합니다. 제목은 원하는대로 지을 수 있습니다. 안전한 방편으로, UTF-8 인코딩으로 작성하시는게 좋습니다.

note: (itstool) path: section/p
en: Now we have a window which has a title and a working "close" button. Let's add the actual "Hello World" text.
ko: 이제 제목과 동작하는 "닫기" 단추가 붙은 창을 만들었습니다. 이제 실제 "Hello World" 문구를 찍어보겠습니다.

note: (itstool) path: section/title
en: Label for the window
ko: 창 레이블

note: (itstool) path: section/p
en: A text label is one of the GTK+ widgets we can use, on account of having imported the GTK+ library. To use it, we create a new variable called label, and assign it a new Gtk.Label. Then we give it properties inside the curly braces {}. In this case, we're setting the text that the label will hold. Finally, we create and run the application:
ko: 텍스트 레이블은 GTK+ 라이브러리에서 가져와서 사용할 수 있는 GTK+ 위젯 중 하나입니다. 텍스트 레이블을 사용하려면 레이블이라는 새 변수를 만들고 새 Gtk.Label을 할당합니다. 그 다음 {} 중괄호에 속성 값을 넣습니다. 지금 같은 경우, 레이블 값을 유지할 문장을 설정합니다. 마지막으로 프로그램을 만들고 실행하겠습니다:

note: (itstool) path: section/p
en: Gtk.ApplicationWindow can only hold one widget at a time. To construct more elaborate programs you need to create a holder widget like Gtk.Grid inside the window, and then add all the other widgets to it.
ko: Gtk.ApplicationWindow는 한번에 위젯 하나만 가질 수 있습니다. 프로그램을 더 정교하게 만들려면 Gtk.Grid 같은 홀더 위젯을 창 안에 만들어 넣고 그 안에 위젯을 추가해야합니다.

note: (itstool) path: section/p
en: The complete file:
ko: 완전한 파일 내용:

note: (itstool) path: section/title
en: Running the application from terminal
ko: 터미널에서 프로그램 실행

note: (itstool) path: section/p
en: To run this application, first save it as hello-world.js. Then open Terminal, go to the folder where your application is stored and run:
ko: 이 프로그램을 실행하려면 우선 hello-world.js 파일 이름으로 저장하십시오. 그 다음 터미널을 열고 프로그램을 저장한 폴더로 이동한 다음 실행하십시오:

note: (itstool) path: section/title
en: The <file>.desktop.in</file> file
ko: <file>.desktop.in</file> 파일

note: (itstool) path: section/p
en: Running applications from the Terminal is useful at the beginning of the application making process. To have fully working <link href="https://developer.gnome.org/integration-guide/stable/mime.html.en">application integration</link> in GNOME 3 requires a desktop launcher. For this you need to create a <file>.desktop</file> file. The <file>.desktop</file> file describes the application name, the used icon and various integration bits. A deeper insight into the <file>.desktop</file> file can be found <link href="http://developer.gnome.org/desktop-entry-spec/">here</link>. The <file>.desktop.in</file> file will create the <file>.desktop</file>.
ko: 터미널에서의 프로그램 실행은 프로그램을 처음 만드는 단계에서 상당히 유용합니다. 그놈 3에서 완벽하게 <link href="https://developer.gnome.org/integration-guide/stable/mime.html.en">프로그램 통합</link>하여 동작할 수 있게 하려면 데스크톱 실행 아이콘이 필요합니다. 이 아이콘을 만들려면 <file>.desktop</file> 파일을 만들어야합니다.  파일은 프로그램 이름, 사용 아이콘, 다양한 통합 부분을 서술합니다. <file>.desktop</file> 파일에 대한 더 자세한 관점은 <link href="http://developer.gnome.org/desktop-entry-spec/">여기</link>에 있습니다. <file>.desktop.in</file> 파일로 <file>.desktop</file> 파일을 만듭니다.

note: (itstool) path: note/p
en: Before continuing, resave <file>hello-world.js</file> as <file>hello-world</file>. Then run this in the command line:
ko: 계속하기 전에 <file>hello-world.js</file> 파일을 <file>hello-world</file>로 다시 저장하십시오. 그 다음 명령줄에서 다음 명령을 실행하십시오:

note: (itstool) path: section/p
en: The example shows you the minimum requirements for a <code>.desktop.in</code> file.
ko: 예제에서는 <code>.desktop.in</code> 파일에서 최소한 필요한 내용을 보여줍니다.

note: (itstool) path: section/p
en: Save this as <file>hello-world.desktop.in</file>. Now let's go through some parts of the <code>.desktop.in</code> file.
ko: 이 내용을  <file>hello-world.desktop.in</file> 파일로 저장하십시오. 이제 <code>.desktop.in</code> 파일 부분으로 들어가보겠습니다.

note: (itstool) path: item/p
en: The application name.
ko: 프로그램 이름입니다.

note: (itstool) path: item/p
en: A short description of the application.
ko: 프로그램의 간단한 설명입니다.

note: (itstool) path: item/p
en: Specifies a command to execute when you choose the application from the menu. In this example exec just tells where to find the <file>hello-world</file> file and the file takes care of the rest.
ko: 메뉴에서 프로그램을 선택했을 때 실행할 명령을 지정합니다. 이 예제에서는 <file>hello-world</file> 파일을 어디서 찾는지 알려주며 파일을 다루는 방식은 나머지 부분에서 다룹니다.

note: (itstool) path: item/p
en: Specifies whether the command in the Exec key runs in a terminal window.
ko: Exec 키의 명령을 터미널 창에서 실행할 지 여부를 지정합니다.

note: (itstool) path: section/p
en: To put your application into the appropriate category, you need to add the necessary categories to the Categories line. More information on the different categories can be found in the <link href="http://standards.freedesktop.org/menu-spec/latest/apa.html">menu specification</link>.
ko: 프로그램을 적당한 분류에 넣으려면 Categories 줄에 필요한 분류 이름을 추가해야합니다. 다른 분류에 대한 자세한 정보는 <link href="http://standards.freedesktop.org/menu-spec/latest/apa.html">메뉴 명세</link>에 있습니다.

note: (itstool) path: section/p
en: In this example we use an existing icon. For a custom icon you need to have a .svg file of your icon, stored in <file>/usr/share/icons/hicolor/scalable/apps</file>. Write the name of your icon file to the .desktop.in file, on line 7. More information on icons in: <link href="https://live.gnome.org/GnomeGoals/AppIcon">Installing Icons for Themes</link> and <link href="http://freedesktop.org/wiki/Specifications/icon-theme-spec">on freedesktop.org: Specifications/icon-theme-spec</link>.
ko: 이 예제에서는 이미 있는 아이콘을 사용하겠습니다. 개별 아이콘을 사용하려면 <file>/usr/share/icons/hicolor/scalable/apps</file> 경로에 저장한 svg 아이콘 파일이 필요합니다. 아이콘 파일 이름을 .desktop.in file 파일 7번째 줄에 적어 넣으십시오. 더 자세한 아이콘 정보는 <link href="https://live.gnome.org/GnomeGoals/AppIcon">테마 아이콘 설치</link>와 <link href="http://freedesktop.org/wiki/Specifications/icon-theme-spec">on freedesktop.org: Specifications/icon-theme-spec</link>에 있습니다.

note: (itstool) path: section/title
en: The build system
ko: 빌드 시스템

note: (itstool) path: section/p
en: To make your application truly a part of the GNOME 3 system you need to install it with the help of autotools. The autotools build will install all the necessary files to all the right places.
ko: 그놈 3의 일부 프로그램을 만들려면 autotools의 도움을 받아 설치해야합니다. autotools 빌드는 필요한 모든 파일을 모든 올바른 경로에 설치합니다.

note: (itstool) path: section/p
en: For this you need to have the following files:
ko: 진행하려면 다음 파일이 필요합니다:

note: (itstool) path: section/p
en: After the <file>autogen.sh</file> file is ready and saved, run:
ko: <file>autogen.sh</file> 파일을 준비했고 저장하고 나면, 다음을 실행하십시오:

note: (itstool) path: section/p
en: Information users should read first. This file can be blank.
ko: 사용자가 우선 읽어야 할 내용입니다. 이 파일은 비워둘 수 있습니다.

note: (itstool) path: section/p
en: When you have the <file>hello-world</file>, <file>hello-world.desktop.in</file>, <file>Makefile.am</file>, <file>configure.ac</file> and <file>autogen.sh</file> files with correct information and permissions, create a <file>README</file> file with installation instructions. Below is a sample of what suitable README instructions may look like:
ko: 올바른 정보와 권한을 설정한 <file>hello-world</file>, <file>hello-world.desktop.in</file>, <file>Makefile.am</file>, <file>configure.ac</file>, <file>autogen.sh</file> 파일을 갖추고 나면, <file>README</file> 파일을 만들어 설치 방법을 적어 넣으십시오. README에 적당한 절차 내용을 넣은 예제를 아래에 보여드리겠습니다:

note: (itstool) path: section/code
en: To build and install this program, run these commands from a terminal:
    
    ./autogen.sh --prefix=/home/$USER/.local
    make install
    
    -------------
    When running the first command $USER will be replaced by your username.
    
    Running the first command above creates the following files:
    
    aclocal.m4
    autom4te.cache
    config.log
    config.status
    configure
    hello-world.desktop
    install-sh
    missing
    Makefile.in
    Makefile
    
    Running "make install", installs the application in /home/your_username/.local/bin
    and installs the hello-world.desktop file in /home/your_username/.local/share/applications
    
    You can now run the application by typing "Hello World" in the Overview.
    
    ----------------
    To uninstall, type:
    
    make uninstall
    
    ----------------
    To create a tarball type:
    
    make distcheck
    
    This will create hello-world-1.0.tar.xz
ko: 이 프로그램을 빌드하고 설치하려면, 아래 명령을 터미널에서 실행하십시오:
    
    ./autogen.sh --prefix=/home/$USER/.local
    make install
    
    -------------
    처음 명령을 실행할 때 $USER 는 사용자 이름으로 바뀝니다.
    
    위 처음 명령을 실행하면 아래 파일을 만듭니다:
    
    aclocal.m4
    autom4te.cache
    config.log
    config.status
    configure
    hello-world.desktop
    install-sh
    missing
    Makefile.in
    Makefile
    
    "make install"을 실행하면, /home/your_username/.local/bin 경로에 프로그램을 설치하며
    /home/your_username/.local/share/applications 경로에 hello-world.desktop 파일을 설치합니다
    
    이제 개요에서 "Hello World"를 입력하면 프로그램을 실행할 수 있습니다.
    
    ----------------
    설치한 프로그램을 제거하려면:
    
    make uninstall
    
    ----------------
    타르볼 파일을 만들려면:
    
    make distcheck
    
    위 명령은 hello-world-1.0.tar.xz 파일을 만듭니다

[ctx: text]
note: (itstool) path: info/title
en: Hello World (Python)
ko: Hello World(Python)

note: (itstool) path: item/p
en: create a small "Hello, World" application using Python and GTK+
ko: 파이썬과 GTK+를 사용한 작은 "Hello, World" 프로그램을 만듭니다

note: (itstool) path: section/p
en: Gtk.Application initializes GTK+. It also connects the <gui>x</gui> button that's automatically generated along with the window to the "destroy" signal.
ko: Gtk.Application은 GTK+를 초기화합니다. 또한 창을 만들 때 자동으로 붙인 <gui>x</gui> 단추를 "destroy" 시그널에 연결합니다.

note: (itstool) path: section/p
en: We can start building our first window. We do this by creating a class called <var>MyWindow</var> and assigning it a Gtk.ApplicationWindow.
ko: 첫 창 만들기를 시작할 수 있습니다. <var>MyWindow</var> 클래스를 만들고 Gtk.ApplicationWindow를 할당하겠습니다.

note: (itstool) path: section/p
en: A text label is one of the GTK+ widgets we can use, on account of having imported the GTK+ library. To use it, we create a variable called <var>label</var> and set the text that the label will hold. Finally, we create and run the application:
ko: 텍스트 레이블은 가져온 GTK+ 라이브러리에 들어있어 우리가 활용할 수 있는 GTK+ 위젯 중 하나입니다. 이 위젯을 사용하려, <var>label</var> 변수를 만들고, 계속 표시해 둘 텍스트를 설정하겠습니다. 최종적으로, 프로그램을 만들고 실행합니다:

note: (itstool) path: section/p
en: To run this application, first save it as hello-world.py. Then open Terminal, go to the folder where your application is stored and run:
ko: 이 프로그램을 실행하려면 우선 hello-world.py로 저장하십시오. 그 다음 터미널을 여시고 프로그램을 저장한 폴더로 이동하신 다음 실행하십시오:

note: (itstool) path: section/p
en: Now let's go through some parts of the <code>.desktop.in</code> file.
ko: 이제 <code>.desktop.in</code> 파일 부분으로 들어가보겠습니다.

note: (itstool) path: section/p
en: When you have the <file>hello-world</file>, <file>hello-world.desktop.in</file>, <file>Makefile.am</file>, <file>configure.ac</file> and <file>autogen.sh</file> files with correct information and rights, the <file>README</file> file can include the following instructions:
ko: 올바른 내용을 넣고 권한을 설정한 <file>hello-world</file>, <file>hello-world.desktop.in</file>, <file>Makefile.am</file>, <file>configure.ac</file>, <file>autogen.sh</file> 파일을 갖췄다면, <file>README</file> 파일에 다음 내용을 넣을 수 있습니다:

note: (itstool) path: item/p
en: create a small "Hello, World" application using GTK+
ko: GTK+로 간단한 "Hello, World" 프로그램을 만듭니다

note: (itstool) path: section/p
en: We can start building our first window. We do this by creating a variable called <var>window</var> and assigning it a new Gtk.ApplicationWindow.
ko: 첫 창 만들기를 시작할 수 있습니다. <var>window</var> 변수를 만들어 Gtk.ApplicationWindow를 할당하겠습니다.

note: (itstool) path: section/p
en: We give the window a title using <code>set_title</code>. The title can be any string you want it to be. To be on the safe side, it's best to stick to UTF-8 encoding.
ko: <code>set_title</code>로 창 제목을 설정하겠습니다. 여러분이 원하는대로 제목을 지을 수 있습니다. 안전한 방편으로 UTF-8 인코딩 방식으로 제목을 넣으시는게 좋습니다.

note: (itstool) path: section/p
en: Finally, we create and run the application:
ko: 마지막으로 프로그램을 만들고 실행하겠습니다:

note: (itstool) path: section/p
en: To run this application, first save it as hello-world.vala. Then open Terminal, go to the folder where your application is stored.
ko: 이 프로그램을 실행하려면 우선 hello-world.vala로 저장하십시오. 터미널을 연 다음 프로그램을 저장한 폴더로 이동하십시오.

note: (itstool) path: section/p
en: Compile the program:
ko: 프로그램을 컴파일하시고요:

note: (itstool) path: section/p
en: Run the program:
ko: 프로그램을 실행하시죠:

note: (itstool) path: section/p
en: When you have the <file>hello-world.c</file>, <file>hello-world.desktop.in</file>, <file>Makefile.am</file>, <file>configure.ac</file> and <file>autogen.sh</file> files with correct information and rights, the <file>README</file> file can include the following instructions:
ko: 제대로 된 정보를 올바르게 갖춘 <file>hello-world.c</file>, <file>hello-world.desktop.in</file>, <file>Makefile.am</file>, <file>configure.ac</file>, <file>autogen.sh</file> 파일을 두었다면, <file>README</file> 파일에 다음 내용을 넣을 수 있습니다:

[ctx: text]
note: (itstool) path: info/title
en: Image (C)
ko: Image(C)

note: (itstool) path: info/desc
en: A widget displaying an image
ko: 그림을 표시하는 위젯

note: (itstool) path: page/p
en: This GtkApplication displays an image file from the current directory.
ko: 이 GtkApplication에서는 현재 디렉터리의 그림파일을 보여줍니다.

note: (itstool) path: note/p
en: If the image file isn't loaded successfully, the image will contain a "broken image" icon. The <file>filename.png</file> needs to be in the current directory for this code to work. Use your favorite picture!
ko: 그림 파일을 제대로 불러오지 않았다면, 그림에 "깨진 그림" 아이콘이 들어갑니다. 이 코드가 동작하려면 현재 디렉터리에 <file>filename.png</file> 파일이 있어야합니다. 원하는 그림을 사용하세요!

[ctx: text]
note: (itstool) path: info/title
en: Image (Python)
ko: Image(Python)

note: (itstool) path: note/p
en: If the image file is not loaded successfully, the image will contain a "broken image" icon. <file>filename.png</file> needs to be in the current directory for this code to work.
ko: 그림 파일을 제대로 불러오지 않았다면, 그림에 "깨진 그림" 아이콘이 들어갑니다. 이 코드가 동작하려면 현재 디렉터리에 <file>filename.png</file> 파일이 있어야합니다.

note: (itstool) path: section/p
en: Another way to obtain what we have in the example is to create the image as an instance of another class and add it to the instance of <code>MyWindow</code> in the <code>do_activate(self)</code> method:
ko: 우리 예제에서 그림을 다른 클래스의 인스턴스로 만들고 <code>do_activate(self)</code> 메서드에서 <code>MyWindow</code>의 인스턴스로 초기화 하는 다른 방법이 있습니다:

note: (itstool) path: note/p
en: To use this code snippet, you will need to add the code that imports <code>Gtk</code> and <code>GdkPixbuf</code> from <code>gi.repository</code> and lines that instantiate the <code>MyApplication</code> window.
ko: 이 코드 부분을 사용하려면, <code>gi.repository</code>에서 <code>Gtk</code>와 <code>GdkPixbuf</code>를 임포팅하는 코드와 <code>MyApplication</code> 창을 초기화하는 여러 줄의 코드를 추가해야 합니다.

note: (itstool) path: section/title
en: Useful methods for an Image widget
ko: Image 위젯에 쓸만한 메서드

note: (itstool) path: item/p
en: To load an image over a network use <code>set_from_pixbuf(pixbuf)</code>, where <code>pixbuf</code> is a <link href="https://developer.gnome.org/gdk-pixbuf/unstable/index.html"> GdkPixbuf</link>.
ko: 네트워크에서 그림을 불러오려면 <code>set_from_pixbuf(pixbuf)</code> 함수를 사용하십시오. 여기서 <code>pixbuf</code>는 <link href="https://developer.gnome.org/gdk-pixbuf/unstable/index.html"> GdkPixbuf</link>입니다.

note: (itstool) path: item/p
en: If <code>preserve_aspect_ratio=True</code> we can use <code>new_from_file_at_size(filename, width, height)</code>. If <code>width</code> or <code>height</code> is <code>-1</code>, it is not constrained.
ko: <code>preserve_aspect_ratio=True</code>이면, <code>new_from_file_at_size(filename, width, height)</code> 함수를 사용할 수 있습니다. <code>width</code> 또는 <code>height</code> 값이 <code>-1</code>이면 제약을 받지 않습니다.

note: (itstool) path: item/p
en: For loading from an input stream, see <code>new_from_stream()</code> and <code>new_from_stream_at_scale()</code> in the documentation.
ko: 입력 스트림에서 불러오는 방법을 알아보려면, 문서에서 <code>new_from_stream()</code>함수와 <code>new_from_stream_at_scale()</code>함수 내용을 참고하십시오.

[ctx: text]
note: (itstool) path: info/title
en: Image (Vala)
ko: Image(Vala)

[ctx: text]
note: (itstool) path: info/title
en: Image viewer (C)
ko: 그림 보기(C)

note: (itstool) path: info/desc
en: A little bit more than a simple "Hello world" Gtk application.
ko: 간단한 "Hello world" Gtk 프로그램에 약간의 무언가가 더 들어갑니다.

note: (itstool) path: page/title
en: Image viewer
ko: 그림 보기

note: (itstool) path: synopsis/p
en: In this tutorial, you will learn:
ko: 이 지침서를 통해 다음을 배웁니다:

note: (itstool) path: item/p
en: Some basic concepts of C/GObject programming
ko: C/GObject 프로그래밍 일부 기본 개념

note: (itstool) path: item/p
en: How to write a Gtk application in C
ko: C 언어로 Gtk 프로그램을 작성하는 방법

note: (itstool) path: item/p
en: Choose <gui>GTK+ (Simple)</gui> from the <gui>C</gui> tab, click <gui>Continue</gui>, and fill out your details on the next few pages. Use <file>image-viewer</file> as project name and directory.
ko: <gui>C</gui> 탭에서 <gui>GTK+ (단순)</gui>를 선택하고, <gui>계속</gui>을 누른 다음, 나타난 페이지에서 몇가지 자세한 내용을 입력하십시오. 프로젝트 이름과 디렉터리에 <file>image-viewer</file>를 입력하십시오.

note: (itstool) path: item/p
en: Make sure that <gui>Use GtkBuilder for user interface</gui> is disabled as we will create the UI manually in this tutorial. Check the <link xref="guitar-tuner.c">Guitar-Tuner</link> tutorial if you want to learn how to use the interface builder.
ko: 앞서 따라하기 지침을 통해 사용자 인터페이스를 직접 만들 예정이므로 <gui>사용자 인터페이스에 GtkBuilder 사용</gui> 설정을 껐는지 확인하십시오. 인터페이스 빌더 사용법을 알아보려면 <link xref="guitar-tuner.c">기타 조율 프로그램</link> 따라하기 지침서를 확인하십시오.

note: (itstool) path: section/p
en: C is a rather verbose language, so don't be surprised that the file contains quite a lot of code. Most of it is template code. It loads an (empty) window and shows it. More details are given below; skip this list if you understand the basics:
ko: C는 장황하게 하나하나 다 따지고 들어가야 하는 언어니, 좀 많은 코드가 들어가 있는 파일에 놀라지 않으셔도 됩니다. 대부분은 서식 코드입니다. 이 코드에서는 (빈) 창을 불러와 열고 화면에 나타냅니다. 자세한 내용은 아래에 있습니다. 기본을 이미 알고 있다면 이 부분은 건너뛰십시오:

note: (itstool) path: item/p
en: The <code>create_window</code> function creates a new (empty) window and connects a signal to exit the application when that window is closed.
ko: <code>create_window</code> 함수는 (비어있는) 새 창을 만들고 창을 닫을 때 프로그램을 빠져나갈 시그널을 연결합니다.

note: (itstool) path: section/title
en: Creating the user interface
ko: 사용자 인터페이스 만들기

note: (itstool) path: section/p
en: Now we will bring life into the empty window. GTK organizes the user interface with <code>GtkContainer</code>s that can contain other widgets and even other containers. Here we will use the simplest available container, a <code>GtkBox</code>:
ko: 이제 비어있는 창에 숨결을 불어넣겠습니다. GTK는 다른 위젯을 넣을 수 있고 다른 컨테이너도 넣을 수 있는 <code>GtkContainer</code>로  사용자 인터페이스를 모아둡니다. 여기서는 여러가지 컨테이너 중 가장 간단한 <code>GtkBox</code>를 사용하겠습니다:

note: (itstool) path: item/p
en: The first lines create the widgets we want to use: a button for opening up an image, the image view widget itself and the box we will use as a container. The macros like <code>GTK_BOX</code> are used for dynamic type checking and casting which is needed as C doesn't support object-orientation out-of-the-box.
ko: 첫 줄은 우리가 쓰려는 그림을 여는 단추, 그림 보기 위젯 그 자체, 컨테이너로 쓸 박스 위젯을 만듭니다. <code>GTK_BOX</code> 같은 매크로는 동적 자료형 검사와 객체지향을 지원하지 않는 C 언어에서 특별하게 캐스팅할 목적으로 사용합니다.

note: (itstool) path: item/p
en: The calls to <code>gtk_box_pack_start</code> add the two widgets to the box and define their behaviour. The image will expand into any available space while the button will just be as big as needed. You will notice that we don't set explicit sizes on the widgets. In GTK this is usually not needed as it makes it much easier to have a layout that looks good in different window sizes. Next, the box is added to the window.
ko: <code>gtk_box_pack_start</code> 호출로 박스에 두 위젯을 추가하고 동작을 정의합니다. 그림은 활용 가능한 공간만큼 충분히 확장하고, 단추는 필요한 만큼만 커집니다. 위젯의 크기를 분명하게 설정하지 않음을 알아채셨을 겁니다. GTK에서는 창 크기가 달라져도 보기 좋은 배치를 쉽게하기에 직접 설정할 필요가 없습니다. 이 과정이 끝나면 박스를 창에 추가합니다.

note: (itstool) path: item/p
en: We need to define what happens when the user clicks on the button. GTK uses the concept of <em>signals</em>. When the button is clicked, it fires the <em>clicked</em> signal, which we can connect to some action. This is done using the <code>g_signal_connect</code> function which tells GTK to call the <code>on_image_open</code> function when the button is clicked and to pass the image as an additional argument to that function. We will define the <em>callback</em> in the next section.
ko: 단추를 사용자가 눌렀을 때 어떤 일이 일어날 지 정해야합니다. GTK는 <em>시그널</em> 개념을 활용합니다. 단추를 누르면, 어떤 동작과 연결할 수 있는 <em>clicked</em> 시그널을 방출합니다. 사용자가 단추를 누르면  <code>on_image_open</code> 함수를 호출하여 그림을 이 함수의 인자로 전달하라고 GTK에 지시할 때 <code>g_signal_connect</code> 함수를 사용하면 됩니다. 다음 섹션에서 <em>콜백</em>을 정의하겠습니디.

note: (itstool) path: item/p
en: The last <code>g_signal_connect()</code> makes sure that the application exits when the window is closed.
ko: 마지막 <code>g_signal_connect()</code> 함수에서는 창을 닫을 때 프로그램을 빠져나갈지를 확인합니다.

note: (itstool) path: item/p
en: As a last step, make sure to replace the <code>gtk_widget_show</code> call in the <code>main()</code> function by <code>gtk_widget_show_all()</code> to show the window and all the widgets it contains.
ko: 마지막 단계에서는 창과 창이 담고 있는 모든 위젯을 보여줄 <code>main()</code> 함수의 <code>gtk_widget_show</code> 호출을<code>gtk_widget_show_all()</code> 함수로 바꾸었는지 확인하십시오.

note: (itstool) path: section/title
en: Showing the image
ko: 그림 표시

note: (itstool) path: section/p
en: We will now define the signal handler for the <em>clicked</em> signal or the button we mentioned before. Add this code before the <code>create_window()</code> method.
ko: <em>clicked</em> 시그널이나 위에서 전에 언급한 단추의 시그널 핸들러를 정의하겠습니다. <code>create_window()</code> 메서드 전에 이 코드를 추가하십시오.

note: (itstool) path: section/p
en: This is a bit more complicated than anything we've attempted so far, so let's break it down:
ko: 지금까지 우리가 다루어왔던 어떤 코드보다 조금 복잡하니 하나씩 뜯어보도록 하겠습니다:

note: (itstool) path: item/p
en: The first argument of the signal is always the widget that sent the signal. Sometimes other arguments related to the signal come after that, but <em>clicked</em> doesn't have any. Next is the <code>user_data</code> argument which is a pointer to the data we passed when connecting the signal. In this case it is our <code>GtkImage</code> object.
ko: 시그널의 첫 인자는 언제나 시그널로 보낼 위젯입니다. 때로는 시그널과 관련된 다른 인자가 오기도 하지만, <em>clicked</em> 시그널은 그렇지 않습니다. 그 다음은 시그널을 연결할 때 우리가 넘길 데이터를 가리키는 <code>user_data</code> 포인터 인자입니다. 이 경우 <code>GtkImage</code> 객체입니다.

note: (itstool) path: item/p
en: The next interesting line is where the dialog for choosing the file is created using <code>gtk_file_chooser_dialog_new</code>. The function takes the title of the dialog, the parent window of the dialog and several options like the number of buttons and their corresponding values.
ko: 다음 관심을 가질 부분에서는 <code>gtk_file_chooser_dialog_new</code>를 사용하여 선택한 파일을 만드는 대화상자입니다. 함수에서는 대화상자 제목, 대화상자의 상위 창, 여러 단추에 관련된 값 같은 다양한 옵션을 취합니다.

note: (itstool) path: item/p
en: Notice that we are using <em>stock</em> button names from Gtk, instead of manually typing "Cancel" or "Open". The advantage of using stock names is that the button labels will already be translated into the user's language.
ko: 참고로 "취소", "열기"를 직접 입력하는 대신, Gtk에서 <em>stock</em> 단추 이름을 활용합니다  스톡 이름은 사용자가 쓰는 언어로 미리 번역해둔 단추 레이블을 활용한다는 점입니다.

note: (itstool) path: item/p
en: The next two lines restrict the <gui>Open</gui> dialog to only display files which can be opened by GtkImage. A filter object is created first; we then add all kinds of files supported by <code>GdkPixbuf</code> (which includes most image formats like PNG and JPEG) to the filter. Finally, we set this filter to be the <gui>Open</gui> dialog's filter.
ko: 다음 두 줄은 <gui>열기</gui> 대화 상자에서 GtkImage로만 열 수 있는 파일을 표시하도록 제한합니다. 필터 객체를 우선 만듭니다. 그 다음 <code>GdkPixbuf</code>에서 지원하는 파일 종류(PNG와 JPEG 같은 대부분의 그림 형식)를 필터에 추가합니다. 마지막으로 이 필터를 <gui>열기</gui> 대화 상자의 필터로 설정합니다.

note: (itstool) path: item/p
en: <code>gtk_dialog_run</code> displays the <gui>Open</gui> dialog. The dialog will wait for the user to choose an image; when they do, <code>gtk_dialog_run</code> will return the value <code>GTK_RESPONSE_ACCEPT</code> (it would return <code>GTK_RESPONSE_CANCEL</code> if the user clicked <gui>Cancel</gui>). The <code>switch</code> statement tests for this.
ko: <code>gtk_dialog_run</code>는 <gui>Open</gui> 대화상자를 보여줍니다. 대화상자는 사용자의 그림 선택을 기다립니다. 사용자가 그림을 선택하면 <code>gtk_dialog_run</code> 함수에서 <code>GTK_RESPONSE_ACCEPT</code> 값을 반환합니다(사용자가 <gui>취소</gui>를 누르면 <code>GTK_RESPONSE_CANCEL</code> 값을 반환합니다). <code>switch</code> 구문은 이 값을 확인합니다.

note: (itstool) path: item/p
en: Assuming that the user did click <gui>Open</gui>, the next line sets the <code>file</code> property of the GtkImage to the filename of the image selected by the user. The GtkImage will then load and display the chosen image.
ko: 사용자가 <gui>열기</gui>를 눌렀다고 한 상황에서, 다음 줄에서 GtkImage의 <code>file</code> 속성 값을 사용자가 선택한 그림 파일 이름으로 설정합니다. GtkImage는 선택한 그림을 불러오고 화면에 표시합니다.

note: (itstool) path: item/p
en: In the final line of this method, we destroy the <gui>Open</gui> dialog because we don't need it any more. Destroying automatically hides the dialog.
ko: 이 메서드의 마지막 줄에서는 <gui>열기</gui> 대화상자는 더 이상 필요 없으니 해체합니다. 해체할 때 대화 상자를 자동으로 숩깁니다.

note: (itstool) path: section/p
en: If you haven't already done so, choose the <file>Debug/src/image-viewer</file> application in the dialog that appears. Finally, hit <gui>Run</gui> and enjoy!
ko: 아직 끝나지 않았다면, 화면에 나타나는 대화상자에서 <file>Debug/src/image-viewer</file> 프로그램을 선택하십시오. 마지막으로 <gui>실행</gui>을 누르고 즐기세요!

note: (itstool) path: section/p
en: If you run into problems with the tutorial, compare your code with this <link href="image-viewer/image-viewer.c">reference code</link>.
ko: 지침서를 따라하는 실행하는 과정에 문제가 있다면, <link href="image-viewer/image-viewer.c">참조 코드</link>와 여러분의 코드를 비교해보십시오.

note: (itstool) path: item/p
en: Have the user select a directory rather than a file, and provide controls to cycle through all of the images in a directory.
ko: 파일을 선택하기 보단 디렉터리를 선택하게 하고, 디렉터리의 모든 그림을 보여줄 수 있는 컨트롤을 제어 기능을 제공합니다.

note: (itstool) path: item/p
en: Apply random filters and effects to the image when it is loaded and allow the user to save the modified image.
ko: 사용자가 그림을 불러오고 수정한 그림을 저장할 때 임의 필터와 효과를 그림에 적용하십시오.

note: (itstool) path: item/p
en: <link href="http://www.gegl.org/api.html">GEGL</link> provides powerful image manipulation capabilities.
ko: <link href="http://www.gegl.org/api.html">GEGL</link>에서는 강력한 그림 편집 기능을 제공합니다.

note: (itstool) path: item/p
en: Allow the user to load images from network shares, scanners, and other more complicated sources.
ko: 네트워크 공유, 스캐너, 다른 복잡한 공급원에서 그림을 불러올 수 있습니다.

note: (itstool) path: item/p
en: You can use <link href="http://library.gnome.org/devel/gio/unstable/">GIO</link> to handle network file transfers and the like, and <link href="http://library.gnome.org/devel/gnome-scan/unstable/">GNOME Scan</link> to handle scanning.
ko: 네트워크 파일 전송 같은 동작을 처리할 때 <link href="http://library.gnome.org/devel/gio/unstable/">GIO</link>를 사용할 수 있습니다. 그리고 스캐너를 다룰 때는 <link href="http://library.gnome.org/devel/gnome-scan/unstable/">그놈 스캔</link>을 활용하시면 됩니다.

note: (itstool) path: info/desc
en: A little bit more than a simple "Hello world" GTKmm application.
ko: 간단한 "Hello world" Gtkmm 프로그램에 약간의 무언가가 더 들어갑니다.

note: (itstool) path: item/p
en: Some basic concepts of C++/GObject programming
ko: C++/GObject 프로그래밍 일부 기본 개념

note: (itstool) path: item/p
en: How to write a Gtk application in C++
ko: C++ 프로그래밍 언어로 Gtk 프로그램을 작성하는 방법

note: (itstool) path: item/p
en: Choose <gui>GTKmm (Simple)</gui> from the <gui>C++</gui> tab, click <gui>Forward</gui>, and fill out your details on the next few pages. Use <file>image-viewer</file> as project name and directory.
ko: <gui>C++</gui> 탭에서 <gui>GTKmm (단순)</gui>을 선택하고, <gui>계속</gui>을 누른 다음, 나타난 페이지에서 몇가지 자세한 내용을 입력하십시오. 프로젝트 이름과 디렉터리에 <file>image-viewer</file>를 입력하십시오.

note: (itstool) path: item/p
en: Make sure that <gui>Use GtkBuilder for user interface</gui> is disabled as we will create the UI manually in this tutorial. Check the <link xref="guitar-tuner.cpp">Guitar-Tuner</link> tutorial if you want to learn how to use the interface builder.
ko: 앞서 따라하기 지침을 통해 사용자 인터페이스를 직접 만들 예정이므로 <gui>사용자 인터페이스에 GtkBuilder 사용</gui> 설정을 껐는지 확인하십시오. 인터페이스 빌더 사용법을 알아보려면 <link xref="guitar-tuner.cpp">기타 조율 프로그램</link> 따라하기 지침서를 확인하십시오.

note: (itstool) path: item/p
en: Click <gui>Apply</gui> and the project will be created for you. Open <file>src/main.cc</file> from the <gui>Project</gui> or <gui>File</gui> tabs. You should see some code which starts with the lines:
ko: <gui>적용</gui>을 누르면 프로젝트를 만들어줍니다. <gui>프로젝트</gui>나 <gui>파일</gui>탭에서 <file>src/main.cc</file> 파일을 여십시오. 다음 줄로 시작하는 일부 코드를 볼 수 있습니다:

note: (itstool) path: item/p
en: The three <code>#include</code> lines at the top include the <code>config</code> (useful autoconf build defines), <code>gtkmm</code> (user interface) and <code>iostream</code> (C++-STL) libraries. Functions from these libraries are used in the rest of the code.
ko: 상단의 <code>#include</code> 세 줄은 <code>config</code> (쓸만한 autoconf 빌드 정의), <code>gtkmm</code> (사용자 인터페이스), <code>iostream</code> (C++-STL) 라이브러리입니다. 이 라이브러리로부터 온 함수는 코드 나머지 부분에서 활용합니다.

note: (itstool) path: item/p
en: The <code>main</code> function creates a new (empty) window and sets the window title.
ko: <code>main</code> 함수는 (비어있는) 새 창을 만들고 창 제목을 설정합니다.

note: (itstool) path: item/p
en: The <code>kit::run()</code> call starts the GTKmm main loop, which runs the user interface and starts listening for events (like clicks and key presses). As we give the window as an argument to that function, the application will automatically exit when that window is closed.
ko: <code>kit::run()</code> 호출은 GTKmm 메인 루프를 시작하며, 메인 루프에서는 사용자 인터페이스를 실행하고 이벤트(마우스 단추 누름 키보드 키 누름) 대기를 시작합니다. 창을 해당 함수에 인자로 전달하여, 창을 닫을 때 프로그램에서 자동으로 빠져나갑니다.

note: (itstool) path: section/p
en: Now we will bring life into the empty window. GTKmm organizes the user interface with <code>Gtk::Container</code>s that can contain other widgets and even other containers. Here we will use the simplest available container, a <code>Gtk::Box</code>:
ko: 이제 비어있는 창에 숨결을 불어넣겠습니다. GTKmm에는 다른 위젯을 넣을 수 있고 다른 컨테이너도 넣을 수 있는 <code>Gtk::Container</code>로  사용자 인터페이스를 모아둡니다. 여기서는 여러가지 컨테이너 중 가장 간단한 <code>Gtk::Box</code>를 사용하겠습니다:

note: (itstool) path: item/p
en: The first lines create the widgets we want to use: a button for opening up an image, the image view widget itself and the box we will use as a container.
ko: 첫번째 줄에서는 우리가 쓰려는 위젯을 만듭니다. 그림을 여는 단추, 그림 보기 위젯 자체, 컨테이너로 쓸 상자 위젯이 있습니다.

note: (itstool) path: item/p
en: The calls to <code>pack_start</code> add the two widgets to the box and define their behaviour. The image will expand into any available space while the button will just be as big as needed. You will notice that we don't set explicit sizes on the widgets. In GTKmm this is usually not needed as it makes it much easier to have a layout that looks good in different window sizes. Next, the box is added to the window.
ko: <code>pack_start</code> 호출로 박스에 두 위젯을 추가하고 동작을 정의합니다. 그림은 활용 가능한 공간만큼 충분히 확장하고, 단추는 필요한 만큼만 커집니다. 위젯의 크기를 분명하게 설정하지 않음을 알아채셨을 겁니다. GTKmm에서는 창 크기가 달라져도 보기 좋은 배치를 쉽게하기에 직접 설정할 필요가 없습니다. 이 과정이 끝나면 박스를 창에 추가합니다.

note: (itstool) path: item/p
en: We need to define what happens when the user clicks on the button. GTKmm uses the concept of <em>signals</em>. When the button is clicked, it fires the <em>clicked</em> signal, which we can connect to some action. This is done using the <code>signal_clicked().connect</code> method which tells GTKmm to call the <code>on_open_image</code> function when the button is clicked. We will define the <em>callback</em> in the next section.
ko: 단추를 사용자가 눌렀을 때 어떤 일이 일어날 지 정해야합니다. GTKmm에서는 <em>시그널</em> 개념을 활용합니다. 단추를 누르면, 어떤 동작과 연결할 수 있는 <em>clicked</em> 시그널을 방출합니다. 사용자가 단추를 누르면 <code>on_image_open</code> 함수를 호출하여 그림을 이 함수의 인자로 전달하라고 GTK에 지시할 때 <code>signal_clicked().connect</code> 메서드를 사용하면 됩니다. 다음 섹션에서 <em>콜백</em>을 정의하겠습니디.

note: (itstool) path: item/p
en: The last step is to show all widgets in the window using <code>show_all_children()</code>. This is equivalent to using the <code>show()</code> method on all our child widgets.
ko: 마지막 단계에서는 <code>show_all_children()</code> 함수로 창의 모든 위젯을 나타냅니다. 이는 모든 하우 위젯을 나타내는 <code>show()</code> 메서드의 활용법과 같습니다.

note: (itstool) path: section/p
en: We will now define the signal handler for the <em>clicked</em> signal or the button we mentioned before. Add this code before the <code>main</code> method.
ko: 이제 <em>clicked</em> 시그널이나 위에서 언급한 단추에 대한 시그널 핸들러를 정했습니다. 이 코드는 <code>main</code> 메서드 전에 추가하십시오.

note: (itstool) path: item/p
en: The dialog for choosing the file is created using the <code>Gtk::FileChooserDialog</code> constructor. This takes the title and type of the dialog. In our case, it is an <em>Open</em> dialog.
ko: 파일을 선택하는 대화상자를 <code>Gtk::FileChooserDialog</code> 생성자로 만들었습니다. 이 생성자는 제목과 대화상자 형식을 취합니다. 지금 같은 경우는 <em>열기</em> 대화상자입니다.

note: (itstool) path: item/p
en: The next two lines add an <em>Open</em> and a <em>Close</em> button to the dialog.
ko: 다음 두 줄은 대화상자의 <em>열기</em>, <em>닫기</em> 단추를 추가합니다.

note: (itstool) path: item/p
en: The second argument to the <code>add_button()</code> method is a value to identify the clicked button. We use predefined values provided by GTKmm here, too.
ko: <code>add_button()</code> 메서드의 두번째 인자는 누른 단추를 식별하는 값입니다. GTKmm에서 주는 기 정의값을 사용했습니다.

note: (itstool) path: item/p
en: The next two lines restrict the <gui>Open</gui> dialog to only display files which can be opened by <code>Gtk::Image</code>. A filter object is created first; we then add all kinds of files supported by <code>Gdk::Pixbuf</code> (which includes most image formats like PNG and JPEG) to the filter. Finally, we set this filter to be the <gui>Open</gui> dialog's filter.
ko: 다음 두 줄은 <gui>열기</gui> 대화 상자에서 <code>Gtk::Image</code>로만 열 수 있는 파일을 표시하도록 제한합니다. 필터 객체를 우선 만듭니다. 그 다음 <code>Gdk::Pixbuf</code>에서 지원하는 파일 종류(PNG와 JPEG 같은 대부분의 그림 형식)를 필터에 추가합니다. 마지막으로 이 필터를 <gui>열기</gui> 대화 상자의 필터로 설정합니다.

note: (itstool) path: item/p
en: <code>Glib::RefPtr</code> is a smart pointer used here, that makes sure that the filter is destroyed when there is no reference to it anymore.
ko: <code>Glib::RefPtr</code>는 여기서 사용한 지능형 포인터로, 더 이상 참조할 코드가 없을 때, 필터를 해체했는지 확인합니다.

note: (itstool) path: item/p
en: <code>dialog.run</code> displays the <gui>Open</gui> dialog. The dialog will wait for the user to choose an image; when they do, <code>dialog.run</code> will return the value <code>Gtk::RESPONSE_ACCEPT</code> (it would return <code>Gtk::RESPONSE_CANCEL</code> if the user clicked <gui>Cancel</gui>). The <code>switch</code> statement tests for this.
ko: <code>dialog.run</code>은 <gui>열기</gui> 대화 상자를 표시합니다. 대화 상자는 사용자의 그림 선택을 기다립니다. 사용자가 그림을 선택하면 <code>dialog.run</code> 에서 <code>Gtk::RESPONSE_ACCEPT</code> 값을 반환합니다(<gui>취소</gui>를 누르면 <code>Gtk::RESPONSE_CANCEL</code> 값을 반환합니다). <code>switch</code> 구문에서는 어떤 값을 반환했는지 확인합니다.

note: (itstool) path: item/p
en: We hide the <gui>Open</gui> dialog because we don't need it any more. The dialog would be hidden later anyway, as it is only a local variable and is destroyed (and therefore hidden) when the scope ends.
ko: 이 메서드의 마지막 줄에서는 <gui>열기</gui> 대화상자는 더 이상 필요 없으니 해체합니다.  지역 변수로서 실행 범위가 끝나면 나중에 해체하므로(숨김) 대화 상자는 여하튼 나중에 숨길 수도 있습니다.

note: (itstool) path: item/p
en: Assuming that the user did click <gui>Open</gui>, the next line loads the file into the <code>Gtk::Image</code> so that it is displayed.
ko: 사용자가 <gui>열기</gui>를 눌렀다고 한 상황에서, 다음 줄에서 파일을 <code>Gtk::Image</code>에 불러와서 화면에 표시합니다.

note: (itstool) path: section/p
en: If you run into problems with the tutorial, compare your code with this <link href="image-viewer/image-viewer.cc">reference code</link>.
ko: 지침서를 따라하는 실행하는 과정에 문제가 있다면, <link href="image-viewer/image-viewer.cc">참조 코드</link>와 여러분의 코드를 비교해보십시오.

[ctx: text]
note: (itstool) path: info/title
en: Image viewer (JavaScript)
ko: 그림 보기(JavaScript)

note: (itstool) path: info/desc
en: A little bit more than a simple "Hello world" application - write an image viewer in GTK+. Includes an introduction to the JavaScript language.
ko: 간단한 "Hello world" 프로그램에 약간의 무언가가 더 들어갑니다 - GTK+의 그림 보기를 작성합니다. JavaScript 언어 소개 내용도 들어있습니다.

note: (itstool) path: synopsis/p
en: In this tutorial, we're going to write a very simple GTK application that loads and displays an image file. You will learn how to:
ko: 아 따라하기 안내서에서는 그림 파일을 불러와서 나타내는 매우 간단한 GTK 프로그램을 작성해보겠습니다. 다음 내용을 배웁니다:

note: (itstool) path: item/p
en: Write a basic GTK user interface in JavaScript
ko: JavaScript로 기본 GTK 사용자 인터페이스 작성하기

note: (itstool) path: item/p
en: Deal with events by connecting signals to signal handlers
ko: 시그널 핸들러에 시그널을 연결하여 이벤트 처리하기

note: (itstool) path: item/p
en: Lay out GTK user interfaces using containers
ko: 컨테이너로 GTK 사용자 인터페이스 배치하기

note: (itstool) path: item/p
en: Load and display image files
ko: 그림 파일 불러오고 표시하기

note: (itstool) path: item/p
en: An installed copy of the <em>gjs</em> interpreter
ko: <em>gjs</em> 인터프리터 설치 사본

note: (itstool) path: item/p
en: Basic knowledge of any object-orientated programming language
ko: 객체지향 프로그래밍 언어 기본 지식

note: (itstool) path: item/p
en: Choose <gui>Generic Javascript</gui> from the <gui>JS</gui> tab, click <gui>Forward</gui>, and fill out your details on the next few pages. Use <file>image-viewer</file> as project name and directory.
ko: <gui>JS</gui> 탭에서 <gui>일반 Javascript</gui>을 선택하고 <gui>다음</gui>을 누른 후 일부 페이지에 세부 내용을 채워나가십시오 프로젝트 이름과 디렉터리 이름을 <file>image-viewer</file>로 설정하십시오.

note: (itstool) path: item/p
en: Click <gui>Apply</gui> and the project will be created for you. Open <file>src/main.js</file> from the <gui>Project</gui> or <gui>File</gui> tabs. It contains very basic example code.
ko: <gui>적용</gui>을 누르면 프로젝트를 만들어줍니다. <gui>프로젝트</gui>나 <gui>파일</gui>탭에서 <file>src/main.js</file> 파일을 여십시오. 매우 기본적인 예제 코드가 들어있습니다.

note: (itstool) path: section/title
en: JavaScript basics: Hello World
ko: JavaScript 기본: Hello World

note: (itstool) path: section/p
en: Before we start writing the image viewer, let's find out more about the way JavaScript is used in GNOME. Of course, your very first contact with any programming language should be the Hello World program which can already be found in <file>main.js</file>:
ko: 그림 보기 프로그램 작성을 시작하기 전에 그놈에서 JavaScript를 활용하는 방법을 더 알아보기로 하겠습니다. 아, 물론 어떤 프로그래밍 언어를 처음 접하는 코드는 <file>main.js</file> 파일로도 찾을 수 있는 Hello world 프로그램입니다:

note: (itstool) path: section/p
en: This should look quite natural if you're familiar with almost any other programming language. The function <code>print</code> is called with the argument <code>"Hello world!"</code>, which will be printed on the screen. Note that each line of code ends with a semicolon.
ko: 다른 대부분의 프로그래밍 언어에 익숙하다면 이 부분이 자연스러워 보일지도 모르겠습니다. <code>print</code> 함수는 화면에 출력할 <code>"Hello world!"</code> 인자 값으로 호출합니다. 참고로 각 코드의 줄은 세미콜론으로 끝납니다.

note: (itstool) path: section/title
en: Classes in JavaScript
ko: JavaScript 클래스

note: (itstool) path: section/p
en: This is the standard way to define a class in JavaScript:
ko: 이 방법이 JavaScript에서 클래스를 정의하는 표준 방식입니다:

note: (itstool) path: section/p
en: This defines a class called <code>MyClass</code>. Let's go through each part of the class definition:
ko: <code>MyClass</code> 클래스를 정의합니다. 클래스 정의 각 부분을 살펴보겠습니다:

note: (itstool) path: item/p
en: <code>function MyClass</code> is the constructor of the class — its name must match the class's name. You can access any member of the class by using the <code>this</code> object; here, the constructor calls the class's <code>_init</code> method.
ko: <code>function MyClass</code> 는 클래스 생성자입니다. 이름은 클래스 이름과 같아야합니다. <code>this</code> 객체를 활용하여 클래서의 어떤 구성원이든 접근할 수 있습니다. 여기서, 생성자는 클래스의 <code>_init</code> 메서드를 호출합니다.

note: (itstool) path: item/p
en: The <code>MyClass.prototype</code> block is where you define the <em>structure</em> of the class. Each class is made up of methods (functions) and fields (variables); there are three methods and two fields in this example.
ko: <code>MyClass.prototype</code> 블록은 클래스의 <em>structure</em>를 정의합니다. 각 클래스는 메서드(함수)와 필드(변수)로 만듭니다. 예제에서는 메서드 3개와 필드 2개로 이루어졌습니다.

note: (itstool) path: item/p
en: The first method defined here is called <code>_init</code>, and we specify that it is a function with no arguments:
ko: 여기서 정의한 첫 메서드는 <code>_init</code>이며, 인자 값을 주지 않는 함수로 지정합니다:

note: (itstool) path: item/p
en: We write the function inside some curly braces. Two fields are defined here, <code>propertyA</code> and <code>propertyB</code>. The first is set to a string and the second is set to an integer (10). The function doesn't return any value.
ko: 중괄호 안에 함수를 작성하겠습니다. <code>propertyA</code>와 <code>propertyB</code> 필드 두개를 여기에서 정했습니다. 처음은 문자열로 설정하고 두번째는 정수(10진수) 값으로 설정합니다. 이 함수는 어떤 값도 반환하지 않습니다.

note: (itstool) path: item/p
en: The next method is called <code>aMethod</code> and has two arguments, which it prints out when you call it. The final method is <code>dumpProperties</code>, and prints the fields <code>propertyA</code> and <code>propertyB</code>.
ko: 다음 메서드는 <code>aMethod</code>이며, 이 함수를 호출할 때 화면에 출력할 인자 두 개가 있습니다. 마지막은 <code>propertyA</code>, <code>propertyB</code> 필드를 출력하는 <code>dumpProperties</code>메서드입니다.

note: (itstool) path: item/p
en: Note how the class definition (prototype) is arranged; each function definition is separated by a comma.
ko: 클래스 정의(프로토타입) 정돈 법을 정리해두십시오. 각 함수 정의는 쉼표로 구분합니다.

note: (itstool) path: section/p
en: Now that MyClass has been defined, we can play with it:
ko: 이제 MyClass 클래스를 정의했으니 가지고 놀 수 있습니다:

note: (itstool) path: section/p
en: This code creates a new instance of the class called <code>o</code>, runs <code>aMethod</code>, changes <code>propertyA</code> to a different string, and then calls <code>dumpProperties</code> (which outputs the fields).
ko: 이 코드는 클래스의 새 인스턴스 <code>o</code>를 만들고, <code>aMethod</code>를 실행하며 <code>propertyA</code> 값을 다른 문자열 값으로 바꾼 후, (필드 내용을 출력하는) <code>dumpProperties</code> 메서드를 호출합니다.

note: (itstool) path: section/p
en: Save the code in the <file>main.js</file> and then run it by using <guiseq><gui>Run</gui><gui>Execute</gui></guiseq> from the menu or using the toolbar.
ko: <file>main.js</file> 코드를 저장하고 메뉴에서 <guiseq><gui>실행</gui><gui>실행</gui></guiseq>을 누르거나 도구 모음의 단추를 눌러 실행하십시오.

note: (itstool) path: section/title
en: A first Gtk application
ko: 첫 gtk 프로그램

note: (itstool) path: section/p
en: Let's see what a very basic Gtk application looks like in JavaScript:
ko: JavaScript로 작성한 Gtk 프로그램의 가장 기본적인 부분이 어떻게 생겼는지 보도록 하겠습니다:

note: (itstool) path: section/p
en: Let's take a look at what's happening:
ko: 어떤 동작이 일어나는지 살펴보죠:

note: (itstool) path: item/p
en: The first line imports the Gtk namespace (that is, it includes the Gtk library). The libraries are provided by GObject Introspection (gi), which provides language bindings for many GNOME libraries.
ko: 첫 줄은 (Gtk 라이브러리가 있는) Gtk 이름 영역을 임포팅합니다. 라이브러리에는 많은 그놈 라이브러리의 언어 바인딩이 들어있는 GObject 인트로스펙션(gi)이 있습니다.

note: (itstool) path: item/p
en: <code>Gtk.init</code> initializes the Gtk library; this statement is mandatory for all Gtk programs.
ko: <code>Gtk.init</code>은 Gtk 라이브러리를 초기화합니다. 모든 Gtk 프로그램의 필수 구문입니다.

note: (itstool) path: item/p
en: The next line creates the main window by creating a new <code>Gtk.Window</code> object. You can pass several properties to the window's constructor by using the syntax <code>{property: value, property: value, ...}</code>. In this case we are setting the title of the window.
ko: 다음 줄에서는 새 <code>Gtk.Window</code> 객체로 메인 창을 만듭니다. <code>{property: value, property: value, ...}</code> 문법으로 창 생성자에 몇가지 속성 값을 전달할 수 있습니다. 지금 같은 경우는 창 제목을 설정합니다.

note: (itstool) path: item/p
en: The next line explicitly shows the window. In Gtk, every widget is hidden by default.
ko: 다음 줄에서는 분명하게 창을 보여줍니다. Gtk에서는 모든 창을 기본으로 숨겨둡니다.

note: (itstool) path: item/p
en: Finally, <code>Gtk.main</code> runs the main loop — in other words, it executes the program. The main loop listens for events (signals) from the user interface and then calls a signal handler which will do something useful. We'll learn more about signals shortly.
ko: 마지막으로 <code>Gtk.main</code>에서 메인 루프를 실행합니다. 다시 말해, 프로그램을 실행합니다. 메인 루프에서는 사용자 인터페이스의 이벤트(시그널)를 기다리며, 어디선가 내보낸 시그널을 찾으면 쓸만한 시그널 핸들러를 호출합니다. 시그널에 대해 간단하게 앞으로 더 알아볼 예정입니다.

note: (itstool) path: section/p
en: Save the code in <file>main.js</file> and run it. You will notice that the application does not quit when you close the window. This is because we haven't set up a signal handler to deal with the window's <code>destroy</code> (close) signal yet. We'll do this shortly, but for now you can just hit <keyseq><key>Ctrl</key><key>C</key></keyseq> in the terminal window to quit the program.
ko: <file>main.js</file> 파일에 코드를 저장하고 실행해보십시오. 창을 닫아도 프로그램이 안 끝나는 모습이 나타납니다. 아직 창의 <code>destroy</code>(닫기) 시그널을 시그널 핸들러에서 처리하도록 설정하지 않았기 때문입니다. 곧 이 부분을 진행하겠지만, 지금은 터미널 창에서 <keyseq><key>Ctrl</key><key>C</key></keyseq> 키를 눌러 프로그램을 끝낼 수 있습니다.

note: (itstool) path: section/title
en: Adding classes
ko: 클래스 추가

note: (itstool) path: section/p
en: The proper way of doing Gtk programming is by using classes. Let's rewrite the simple code you just wrote using classes:
ko: 적당한 Gtk 프로그래밍 방식은 클래스 사용 방식입니다. 간단한 코드를 클래스 코드로 다시 작성해보도록 하겠습니다:

note: (itstool) path: section/p
en: Notice that the program is the same; we just moved the window creation code to our own <code>ImageViewer</code> class. The class's constructor calls the <code>_init</code> method, which creates and shows the window. We then create an instance of the class before running the main loop (<code>Gtk.main</code>).
ko: 프로그램이 같다는 사실을 알아채실겁니다. 창을 만드는 코드를 <code>ImageViewer</code>클래스로 옮겼을 뿐입니다. 이 클래스 생성자에서는 창을 만들고 보여주는 <code>_init</code> 메서드를 호출합니다. 그 다음 메인 루프(<code>Gtk.main</code>)를 실행하기 전 클래스의 인스턴스를 만듭니다.

note: (itstool) path: section/p
en: This code is modular and can be split into multiple files easily. This makes it cleaner and easier to read.
ko: 이 코드는 모듈식이며 여러 파일로 쉽게 나눌 수 있습니다. 이렇게 하면 코드가 간명해지고 알아보기 쉬워집니다.

note: (itstool) path: section/title
en: Signals
ko: 시그널

note: (itstool) path: section/p
en: Signals are one of the key concepts in Gtk programming. Whenever something happens to an object, it emits a signal; for example, when a button is clicked it gives off the <code>clicked</code> signal. If you want your program to do something when that event occurs, you must connect a function (a "signal handler") to that signal. Here's an example:
ko: 시그널은 Gtk 프로그래밍의 핵심 개념입니다. 객체에 언제 어떤 일이 일어나든지 시그널을 내보냅니다. 예를 들어 단추를 누르면 <code>clicked</code> 시그널을 내줍니다. 동작이 일어났을때 프로그램에서 무언가를 하게 하려면 시그널에 함수(시그널 핸들러)를 연결해야합니다. 예제는 다음과 같습니다:

note: (itstool) path: section/p
en: The last two lines create a <code>Gtk.Button</code> called <code>b</code> and connect its <code>clicked</code> signal to the <code>button_clicked</code> function, which is defined above. Every time the button is clicked, the code in the <code>button_clicked</code> function will be executed. It just prints a message here.
ko: 마지막 두 줄은 <code>Gtk.Button</code>의 인스턴스 <code>b</code>를 만들고 <code>clicked</code> 시그널을 위에서 정의한 <code>button_clicked</code> 함수에 연결합니다. 항상 단추를 누를 때마다 <code>button_clicked</code> 함수를 실행합니다. 이 함수는 여기에 적어둔 메시지를 출력하는 동작만 합니다.

note: (itstool) path: section/p
en: The syntax for connecting any signal to a function is:
ko: 시그널을 함수에 연결하는 문법은 다음과 같습니다:

note: (itstool) path: section/p
en: You can find signal definitions for any object in the <link href="https://developer.gnome.org/gtk3/stable/gtkobjects.html">GTK class reference</link>.
ko: <link href="https://developer.gnome.org/gtk3/stable/gtkobjects.html">GTK 클래스 참고서</link>에서 임의의 객체에 대한 시그널 정의를 찾아볼 수 있습니다.

note: (itstool) path: note/p
en: You can simplify the code by making use of an inline function definition:
ko: 인라인 함수 정의 활용으로 코드를 단순하게 작성할 수 있습니다:

note: (itstool) path: section/title
en: Closing the window
ko: 창 닫기

note: (itstool) path: section/p
en: When you close a Gtk window it's not really closed, it's hidden. This allows you to keep the window around (which is useful if you want to ask the user if they really want to close the window, for example).
ko: Gtk 창을 닫을 때 실제로는 창이 닫히지 않고 숨겨져 있습니다. 이렇게 하여 창을 유지할 수 있습니다(예를 들자면 사용자에게 정말 창을 닫을지 물어볼 때 이런 방식이 쓸만합니다).

note: (itstool) path: section/p
en: In our case, we really do just want to close the window. The simplest way of doing this is by connecting the <code>hide</code> signal of the GtkWindow object to a function that closes the application. Go back to the <file>image-viewer.js</file> file and add the following code to the <code>_init</code> method, on the line above <code>this.window.show</code>:
ko: 지금과 같은 경우는 창을 실제로 닫으려고 합니다. 가장 간단하게 처리하는 방법은 프로그램을 닫는 함수에 GtkWindow 객체의 <code>hide</code> 시그널을 연결하는 방법입니다. <file>image-viewer.js</file> 파일로 돌아가서 다음 코드를 <code>_init</code> 메서드의 <code>this.window.show</code> 코드 위에 추가하십시오:

note: (itstool) path: section/p
en: This connects the <code>hide</code> signal of the window to Gtk's <code>main_quit</code> function, which ends the execution of the Gtk main loop. Once the main loop finishes, the function <code>Gtk.main</code> returns. Our program would continue to run any code written after the <code>Gtk.main ();</code> line, but since we don't have any code after that point, the program just ends.
ko: 이 코드는<code>hide</code> 시그널을 Gtk 메인 루프 실행을 끝내는 Gtk의 <code>main_quit</code> 함수에 연결합니다. 메인 루프를 끝내고 나면 <code>Gtk.main</code> 함수에서 반환 값을 내보냅니다. 이 프로그램에서는 <code>Gtk.main ();</code> 코드 줄 다음에 작성한 어떤 코드든 계속 실행하려 하겠지만 이후에 어떤 코드도 없기 때문에 프로그램을 그냥 끝냅니다.

note: (itstool) path: section/title
en: Containers: Laying-out the user interface
ko: 컨테이너: 사용자 인터페이스를 두는 공간

note: (itstool) path: section/p
en: Widgets (controls, such as buttons and labels) can be arranged in the window by making use of <em>containers</em>. You can organize the layout by mixing different types of containers, like boxes and grids.
ko: (단추 레이블 같은 컨트롤) 위젯은 <em>컨테이너</em>를 사용하여 창에서 배치를 정돈할 수 있습니다. 박스, 그리드 등 여러가지 형태의 컨테이너를 섞어 사용하여 배치를 이룰 수 있습니다.

note: (itstool) path: section/p
en: A <code>Gtk.Window</code> is itself a type of container, but you can only put one widget directly into it. We would like to have two widgets, an image and a button, so we must put a "higher-capacity" container inside the window to hold the other widgets. A number of <link href="http://library.gnome.org/devel/gtk/stable/GtkContainer.html">container types</link> are available, but we will use a <code>Gtk.Box</code> here. A <code>Gtk.Box</code> can hold several widgets, organized horizontally or vertically. You can do more complicated layouts by putting several boxes inside another box and so on.
ko: <code>Gtk.Window</code>는 그 자체로 컨테이너의 한 종류지만 이 컨테이너에는 위젯을 한번에 하나씩만 넣을 수 있습니다. 여기에 우리는 그림과 단추, 두가지 위젯을 넣으려고 하기 때문에, 창 하나에 다른 위젯을 붙여둘 "공간이 더 많은" 컨테이너를 넣어야합니다. 쓸 수 있는 <link href="http://library.gnome.org/devel/gtk/stable/GtkContainer.html">컨테이너 형식</link>은 여러가지가 있지만, 여기서는 <code>Gtk.Box</code>를 사용합니다. <code>Gtk.Box</code> 는 가로 세로 방향으로 여러 위젯을 붙일 수 있습니다. 다른 여러가지 박스를 붙여서 보다 더 복잡한 배치를 만들 수 있습니다.

note: (itstool) path: note/p
en: There is a graphical user interface designer called <app>Glade</app> integrated in <app>Anjuta</app> which makes UI design really easy. For this simple example, however, we will code everything manually.
ko: <app>안주타</app>에 통합한 <app>글레이드</app> 사용자 인터페이스 디자인 프로그램이 있습니다. 이 프로그램은 사용자 인터페이스를 쉽게 만들 수 있게 해줍니다. 그러나 이 간단한 예제로 모든 코드를 직접 작성해보겠습니다.

note: (itstool) path: section/p
en: Let's add the box and widgets to the window. Insert the following code into the <code>_init</code> method, immediately above the <code>this.window.show</code> line:
ko: 박스와 위젯을 창에 추가해보겠습니다. 다음 코드를 <code>_init</code> 메서드의 <code>this.window.show</code>줄 바로 위에 넣으십시오:

note: (itstool) path: section/p
en: The first line creates a <code>Gtk.Box</code> called <code>main_box</code> and sets two of its properties: the <code>orientation</code> is set to vertical (so widgets are arranged in a column), and the <code>spacing</code> between the widgets is set to 0 pixels. The next line then adds the newly-created <code>Gtk.Box</code> to the window.
ko: 첫 줄은 <code>Gtk.Box</code>의 인스턴스 <code>main_box</code>를 만들고 인스턴스의 속성 두개를 설정합니다. <code>orientation</code>은 수직 방향으로 설정(따라서 위젯을 수직 방향으로 배치합니다)하고, 위젯 사이의 공간 <code>spacing</code> 값은 0 픽셀로 설정합니다. 다음 줄은 창에 새로 만든 <code>Gtk.Box</code>를 추가합니다.

note: (itstool) path: section/p
en: So far the window only contains an empty <code>Gtk.Box</code>, and if you run the program now you will see no changes at all (the <code>Gtk.Box</code> is a transparent container, so you can't see that it's there).
ko: 지금까지 창에는 빈 <code>Gtk.Box</code>만 넣었기에 지금 프로그램을 실행하면 어떤 변화도 없음을 볼 수 있습니다(<code>Gtk.Box</code>는 투명 컨테이너라서 그 무엇도 볼 수 없습니다).

note: (itstool) path: section/title
en: Packing: Adding widgets to the container
ko: 패킹: 컨테이너에 위젯 추가

note: (itstool) path: section/p
en: To add some widgets to the <code>Gtk.Box</code>, insert the following code directly below the <code>this.window.add (main_box)</code> line:
ko: 일부 위젯을 <code>Gtk.Box</code>에 추가하려면 다음 코드를 직접 <code>this.window.add (main_box)</code> 코드 줄 아래에 넣으십시오:

note: (itstool) path: section/p
en: The first line creates a new <code>Gtk.Image</code> called <code>image</code>, which will be used to display an image file. Then, the image widget is added (<em>packed</em>) into the <code>main_box</code> container using <code>Gtk.Box</code>'s <link href="http://library.gnome.org/devel/gtk/stable/GtkBox.html#gtk-box-pack-start"><code>pack_start</code></link> method.
ko: 첫 줄에서는 그림 파일을 나타낼 때 쓸 새 <code>Gtk.Image</code> 인스턴스 <code>image</code>를 만듭니다. 그 다음 그림 위젯을 <code>Gtk.Box</code>의 <link href="http://library.gnome.org/devel/gtk/stable/GtkBox.html#gtk-box-pack-start"><code>pack_start</code></link> 메서드로 <code>main_box</code>에 추가(<em>패킹</em>)합니다.

note: (itstool) path: section/p
en: <code>pack_start</code> takes 4 arguments: the widget that is to be added to the <code>Gtk.Box</code> (<code>child</code>); whether the <code>Gtk.Box</code> should grow larger when the new widget is added (<code>expand</code>); whether the new widget should take up all of the extra space created if the <code>Gtk.Box</code> gets bigger (<code>fill</code>); and how much space there should be, in pixels, between the widget and its neighbors inside the <code>Gtk.Box</code> (<code>padding</code>).
ko: <code>pack_start</code> 메서드에는 <code>Gtk.Box</code>에 추가할 위젯(<code>child</code>) 인자, 새 위젯을 추가했을 때 <code>Gtk.Box</code>를 더 크게 할지 여부(<code>expand</code>) 인자, <code>Gtk.Box</code>가 커졌을 때 모든 여분 공간을 차지할 지 여부(<code>fill</code>) 인자, <code>Gtk.Box</code>에서 위젯 간 설정할 간격(<code>padding</code>) 인자가 있습니다.

note: (itstool) path: section/p
en: Gtk containers (and widgets) dynamically expand to fill the available space, if you let them. You don't position widgets by giving them a precise x,y-coordinate location in the window; rather, they are positioned relative to one another. This makes handling window resizing much easier, and widgets should automatically take a sensible size in most situations.
ko: Gtk 컨테이너(와 위젯)은 여분 공간을 동적으로 채우도록 설정하면 그렇게 보여줍니다. 창에서 정확한 x,y 좌표 값을 주어 위젯 위치를 설정할 수 없습니다. 다만 서로 상대적 위치에 둘 수 있습니다. 이렇게 하면 창 크기 조절을 더 쉽게할 수 있고, 위젯든 대부분의 경우 타당한 크기를 가집니다.

note: (itstool) path: section/p
en: Also note how the widgets are organized in a hierarchy. Once packed in the <code>Gtk.Box</code>, the <code>Gtk.Image</code> is considered a <em>child</em> of the <code>Gtk.Box</code>. This allows you to treat all of the children of a widget as a group; for example, you could hide the <code>Gtk.Box</code>, which would also hide all of its children at the same time.
ko: 또한 위젯은 서로 계층적 관계를 가짐을 참고하십시오. <code>Gtk.Box</code>에 패킹하면, <code>Gtk.Image</code>는 <code>Gtk.Box</code>의 <em>하위 요소</em>로 간주합니다. 이렇게 하여 모든 하위 위젯을 그룹 단위로 다룰 수 있습니다. 예를 들면, <code>Gtk.Box</code>와 이 컨테이너에 들어있는 모든 하위 컨테이나와 위젯을 동시에 숨길 수 있습니다.

note: (itstool) path: section/p
en: Now insert these two lines, below the two you just added:
ko: 이제 다음 두 줄을 방금 추가한 두 줄 아래에 추가하십시오:

note: (itstool) path: section/p
en: These lines are similar to the first two, but this time they create a <code>Gtk.Button</code> and add it to <code>main_box</code>. Notice that we are setting the <code>expand</code> argument (the second one) to <code>false</code> here, whereas it was set to <code>true</code> for the <code>Gtk.Image</code>. This will cause the image to take up all available space and the button to take only the space it needs. When you maximize the window, the button size will remain the same, but the image size will increase, taking up all of the rest of the window.
ko: 이 줄은 처음 두 줄과 비슷하지만 <code>Gtk.Button</code>을 만들어 <code>main_box</code>에 추가합니다. 여기서 (두번째) <code>expand</code> 인자 값을 <code>Gtk.Image</code>에 대해서는 <code>true</code> 로 설정했음에 반해 <code>false</code>로 설정했음에 유의하십시오. 이 함수로 그림을 활용 가능한 공간을 차지하게 하며 단추는 필요한 공간만 차지하게 합니다. 창을 죄대로 확장하면 단추 크기는 그대로지만, 그림은 창 나머지 공간을 차지하면서 커집니다.

note: (itstool) path: section/p
en: Finally, we must change the <code>this.window.show ();</code> line to read:
ko: 마지막으로 <code>this.window.show ();</code> 함수를 다음으로 바꿔야합니다:

note: (itstool) path: section/p
en: This will show the child of the Gtk window, and all of its children, and its children's children, and so on. (Remember that Gtk widgets are all hidden by default.)
ko: 이 코드는 Gtk 창의 하위 구성 요소와 해당 요소의 모든 하위 구성 요소를 보여줍니다(기본적으로 Gtk 위젯은 숨겨둔 상태임을 기억하십시오).

note: (itstool) path: section/title
en: Loading the image: Connecting to the button's <code>clicked</code> signal
ko: 그림을 불러옵니다: 단추의 <code>clicked</code> 시그널에 연결

note: (itstool) path: section/p
en: When the user clicks on the <gui>Open</gui> button, a dialog should appear so that the user can choose a picture. Once chosen, the picture should be loaded and shown in the image widget.
ko: 사용자가 <gui>열기</gui> 단추를 누르면, 대화 상자가 나타나 그림을 선택할 수 있습니다. 그림을 선택하고 나면 그림을 불러오고 그림 위젯에 표시합니다.

note: (itstool) path: section/p
en: The first step is to connect the <code>clicked</code> signal of the button to a signal handler function, which we call <code>_openClicked</code>. Put this code immediately after the <code>var open_button = new Gtk.Button</code> line where the button was created:
ko: 첫 단계에서는 단추의 <code>clicked</code> 시그널을, 우리가 호출할 시그널 핸들러 함수 <code>_openClicked</code>에 연결합니다. 이 코드를 단추를 만드는 <code>var open_button = new Gtk.Button</code> 줄 바로 다음에 넣으십시오:

note: (itstool) path: section/p
en: We are using the <em>Lang</em> JavaScript helper here. It allows us to connect a <em>class method</em> to the signal, rather than a plain function (without a class) which we had used before for the window's <code>hide</code> signal. Don't worry about this for now, it's just a technical detail. For it to work, you also need to put the following line at the top of the file:
ko: <em>Lang</em> JavaScript 보조 라이브러리를 사용하고 있습니다. 창의 <code>hide</code> 시그널에 대한 (클래스 없는) 생짜 함수를 쓰기보다는, 시그널에 <em>클래스 메서드</em> 를 연결할 수 있습니다. 지금은 걱정하실 필요가 없습니다. 그냥 기술적으로 자세한 이야기일 뿐이죠. 동작하게 하려면 파일의 상단에 다음 줄을 넣어야합니다:

note: (itstool) path: section/title
en: Loading the image: Writing the signal's callback
ko: 그림 불러오기: 시그널 콜백 작성

note: (itstool) path: section/p
en: Now we can create the <code>_openClicked()</code> method. Insert the following into the <code>ImageViewer.prototype</code> code block, after the <code>_init</code> method (and not forgetting the comma):
ko: 이제 <code>_openClicked()</code> 메서드를 만들었습니다. 다음 코드를 <code>_init</code> 메서드 다음의 <code>ImageViewer.prototype</code> 코드 블럭에 넣으십시오(그리고 콤마 표시를 빼먹지 마십시오):

note: (itstool) path: item/p
en: The line beginning with <code>var chooser</code> creates an <gui>Open</gui> dialog, which the user can use to choose files. We set four properties: the title of the dialog; the action (type) of the dialog (it's an "open" dialog, but we could have used <code>SAVE</code> if the intention was to save a file; <code>transient_for</code>, which sets the parent window of the dialog; and <code>modal</code> which, if set to <code>true</code>, prevents the user from clicking on another area of the application until the dialog is closed.
ko: <code>var chooser</code>로 시작하는 줄에서는 사용자가 파일을 선택할 수 있는 <gui>열기</gui> 대화 상자를 만듭니다. 대화 상자 제목, 대화 상자 동작(형식) ("열기" 대화 상자지만, 파일을 저장하려고 할 때는 <code>SAVE</code>를 쓸 수 있습니다), 대화 상자의 상위 창을 설정하는 <code>transient_for</code>,  <code>true</code>로 설정하면 대화상자를 닫기 전까지 그 어떤 것도 누를 수 없게 하는 <code>modal</code> 속성을 지정합니다.

note: (itstool) path: item/p
en: The next two lines add <gui>Cancel</gui> and <gui>Open</gui> buttons to the dialog. The second argument of the <code>add_button</code> method is the (integer) value that is returned when the button is pressed: 0 for <gui>Cancel</gui> and 1 for <gui>Open</gui>.
ko: 다음 두 줄은 대화상자에 <gui>취소</gui> 단추와 <gui>열기</gui> 단추를 만듭니다. <code>add_button</code> 메서드의 두번째  인자는 단추를 눌렀을 때 반환하는 (정수) 값입니다. <gui>취소</gui>는 0, <gui>열기</gui>는 1입니다.

note: (itstool) path: item/p
en: <code>set_default_response</code> determines the button that will be activated if the user double-clicks a file or presses <key>Enter</key>. In our case, we are using the <gui>Open</gui> button as default (which has the value 1).
ko: <code>set_default_response</code>에서는 파일을 두번 누르거나 <key>Enter</key> 키를 눌렀을 때 활성화 할 단추를 결정합니다. 지금의 경우는 <gui>열기</gui> 단추(단추 값은 1)를 기본으로 사용합니다.

note: (itstool) path: item/p
en: The next three lines restrict the <gui>Open</gui> dialog to only display files which can be opened by <code>Gtk.Image</code>. A filter object is created first; we then add all kinds of files supported by <code>Gdk.Pixbuf</code> (which includes most image formats like PNG and JPEG) to the filter. Finally, we set this filter to be the <gui>Open</gui> dialog's filter.
ko: 다음 두 줄은 <gui>열기</gui> 대화 상자에서 <code>Gtk.Image</code>로만 열 수 있는 파일을 표시하도록 제한합니다. 필터 객체를 우선 만듭니다. 그 다음 <code>Gdk.Pixbuf</code>에서 지원하는 파일 종류(PNG와 JPEG 같은 대부분의 그림 형식)를 필터에 추가합니다. 마지막으로 이 필터를 <gui>열기</gui> 대화 상자의 필터로 설정합니다.

note: (itstool) path: item/p
en: <code>chooser.run</code> displays the <gui>Open</gui> dialog. The dialog will wait for the user to choose an image; when they do, <code>chooser.run</code> will return the value <output>1</output> (it would return <output>0</output> if the user clicked <gui>Cancel</gui>). The <code>if</code> statement tests for this.
ko: <code>dialog.run</code>은 <gui>열기</gui> 대화 상자를 표시합니다. 대화 상자는 사용자의 그림 선택을 기다립니다. 사용자가 그림을 선택하면 <code>dialog.run</code> 에서 <output>1</output> 값을 반환합니다(<gui>취소</gui>를 누르면 <output>0</output> 값을 반환합니다). <code>if</code> 구문에서는 어떤 값을 반환했는지 확인합니다.

note: (itstool) path: item/p
en: Assuming that the user did click <gui>Open</gui>, the next line sets the <code>file</code> property of the <code>Gtk.Image</code> to the filename of the image selected by the user. The <code>Gtk.Image</code> will then load and display the chosen image.
ko: 사용자가 <gui>열기</gui>를 눌렀다고 한 상황에서, 다음 줄에서 <code>Gtk.Image</code>의 <code>file</code> 속성 값을 사용자가 선택한 그림 파일 이름으로 설정합니다. <code>Gtk.Image</code>는 선택한 그림을 불러오고 화면에 표시합니다.

note: (itstool) path: item/p
en: In the final line of this method, we destroy the <gui>Open</gui> dialog because we don't need it any more.
ko: 이 메서드의 마지막 줄에서는 <gui>열기</gui> 대화상자는 더 이상 필요 없으니 해체합니다.

note: (itstool) path: section/p
en: All of the code you need should now be in place, so try running the code. That should be it; a fully-functioning image viewer (and a whistlestop tour of JavaScript and Gtk) in not much time at all!
ko: 필요한 모든 코드를 제자리에 넣었으니 코드를 실행해보겠습니다. 제대로 동작할겝니다. 이렇게 하여 기능이 완전하게 동작하는 그림 보기 프로그램(JavaScript와 Gtk를 활용한 간단한 맛보기)을 그리 길지 않은 시간 동안에 만들었습니다!

note: (itstool) path: section/p
en: If you run into problems with the tutorial, compare your code with this <link href="image-viewer/image-viewer.js">reference code</link>.
ko: 지침서를 따라하는 실행하는 과정에 문제가 있다면, <link href="image-viewer/image-viewer.js">참조 코드</link>와 여러분의 코드를 비교해보십시오.

[ctx: text]
note: (itstool) path: info/title
en: Image viewer (Python)
ko: 그림 보기(Python)

note: (itstool) path: info/desc
en: A little bit more than a simple "Hello world" application - write an image viewer in GTK.
ko: 간단한 "Hello world" 프로그램에 약간의 무언가가 더 들어갑니다 - GTK로 그림 보기 프로그램을 작성합니다.

note: (itstool) path: item/p
en: Write a basic GTK user interface in Python
ko: 파이썬 언어로 기본 GTK 사용자 인터페이스 작성하기

note: (itstool) path: item/p
en: Basic knowledge of the python programming language
ko: 파이썬 프로그래밍 언어 기본 지식

note: (itstool) path: item/p
en: Choose <gui>PyGTK (automake)</gui> from the <gui>Python</gui> tab, click <gui>Continue</gui>, and fill out your details on the next few pages. Use <file>image-viewer</file> as project name and directory.
ko: <gui>Python</gui> 탭에서 <gui>PyGTK (automake)</gui>를 선택하고, <gui>계속</gui>을 누른 다음, 나타난 페이지에서 몇가지 자세한 내용을 입력하십시오. 프로젝트 이름과 디렉터리에 <file>image-viewer</file>를 입력하십시오.

note: (itstool) path: item/p
en: Be sure to disable <gui>Use GtkBuilder for user interface</gui> as we will build the user interface manually in this example. For an example of using the interface designer, check the <link xref="guitar-tuner.py">Guitar-Tuner demo</link>.
ko: 이 예제의 사용자 인터페이스를 직접 만들 예정이므로 <gui>사용자 인터페이스에 GtkBuilder 사용</gui> 설정을 껐는지 확인하십시오. 인터페이스 빌더 사용법을 알아보려면 <link xref="guitar-tuner.py">기타 조율 프로그램 데모</link>를 확인하십시오.

note: (itstool) path: item/p
en: Click <gui>Apply</gui> and the project will be created for you. Open <file>src/image_viewer.py</file> from the <gui>Project</gui> or <gui>File</gui> tabs. It contains very basic example code.
ko: <gui>적용</gui>을 누르면 프로젝트를 만들어줍니다. <gui>프로젝트</gui>나 <gui>파일</gui>탭에서 <file>src/image_viewer.py</file>를 여십시오.여기엔 매우 기본적인 예제 코드가 들어있습니다.

note: (itstool) path: section/p
en: Let's see what a very basic Gtk application looks like in Python:
ko: 아주 기본적인 파이썬 Gtk 프로그램이 어떻게 생겼는지 살펴보겠습니다:

note: (itstool) path: item/p
en: In the <code>__init__</code> method of the <code>GUI</code> class creates an (empty) <code>Gtk.Window</code>, sets its title and then connects a signal to quit the application once the window is closed. That's pretty simple overall, more on signals later.
ko: <code>GUI</code> 클래스의 <code>__init__</code> 메서드에서 (비어 있는) <code>Gtk.Window</code>를 만들고, 제목을 설정하며, 창을 닫을 떄 프로그램을 끝내는 시그널을 연결합니다. 전체적으로 좀 간단한데 시그널에 대한 더 많은 내용은 나중에 다루겠습니다.

note: (itstool) path: item/p
en: Next, <code>destroy</code> is defined which just quits the application. It is called by the <code>destroy</code> signal connected above.
ko: 다음, <code>destroy</code>는 프로그램 끝내기를 정의합니다. 위에서 연결한 <code>destroy</code> 시그널에서 호출합니다.

note: (itstool) path: item/p
en: The rest of the file does initialisation for Gtk and displays the GUI.
ko: 파일의 나머지 부분에서는 Gtk를 초기화하고 GUI를 보여줍니다.

note: (itstool) path: section/p
en: This code is ready to run, so try it using <guiseq><gui>Run</gui><gui>Execute</gui></guiseq>. It should show you an empty window.
ko: 코드를 실행할 준비가 끝났으니 <guiseq><gui>실행</gui><gui>실행</gui></guiseq>을 눌러보겠습니다. 빈 창이 나타나야합니다.

note: (itstool) path: section/p
en: Let's add the box and widgets to the window. Insert the following code into the <code>__init__</code> method, immediately after the <code>window.connect_after</code> line:
ko: 창에 박스와 위젯을 추가해보겠습니다. 다음 코드를 <code>window.connect_after</code><code>__init__</code> 메서드의 <code>window.connect_after</code> 줄 바로 다음에 넣으십시오:

note: (itstool) path: section/p
en: The first line creates a <code>Gtk.Box</code> called <code>box</code> and the following lines set two of its properties: the <code>orientation</code> is set to vertical (so the widgets are arranged in a column), and the <code>spacing</code> between the widgets is set to 5 pixels. The next line then adds the newly-created <code>Gtk.Box</code> to the window.
ko: 첫 줄은 <code>Gtk.Box</code>의 인스턴스 <code>main_box</code>를 만들고 인스턴스의 속성 두개를 설정합니다. <code>orientation</code>은 수직 방향으로 설정(따라서 위젯을 수직 방향으로 배치합니다)하고, 위젯 사이의 공간 <code>spacing</code> 값은 5 픽셀로 설정합니다. 다음 줄은 창에 새로 만든 <code>Gtk.Box</code>를 추가합니다.

note: (itstool) path: section/p
en: To add some widgets to the <code>Gtk.Box</code>, insert the following code directly below the <code>window.add (box)</code> line:
ko: <code>Gtk.Box</code>에 어떤 위젯을 추가하려면 다음 코드를 직접 <code>window.add (box)</code> 줄 다음에 추가하십시오:

note: (itstool) path: section/p
en: The first line creates a new <code>Gtk.Image</code> called <code>image</code>, which will be used to display an image file. As we need that later on in the signal handler, we will define it as a class-wide variable. You need to add <code>image = 0</code> to the beginning of the <code>GUI</code> class. Then, the image widget is added (<em>packed</em>) into the <code>box</code> container using GtkBox's <link href="http://library.gnome.org/devel/gtk/stable/GtkBox.html#gtk-box-pack-start"><code>pack_start</code></link> method.
ko: 첫 줄에서는 그림 파일을 나타낼 때 쓸 새 <code>Gtk.Image</code> 인스턴스 <code>image</code>를 만듭니다. 다음에 시그널 핸들러가 필요하므로 클래스 범위 변수를 정의하겠습니다. <code>GUI</code> 클래스 시작 부분에 <code>image = 0</code>를 추가하십시오. 그 다음 GtkBox의 <link href="http://library.gnome.org/devel/gtk/stable/GtkBox.html#gtk-box-pack-start"><code>pack_start</code></link> 메서드로  <code>box</code> 컨테이너에 그림 위젯을 추가(<em>패킹</em>)합니다.

note: (itstool) path: section/p
en: <code>pack_start</code> takes 4 arguments: the widget that is to be added to the GtkBox (<code>child</code>); whether the <code>Gtk.Box</code> should grow larger when the new widget is added (<code>expand</code>); whether the new widget should take up all of the extra space created if the <code>Gtk.Box</code> gets bigger (<code>fill</code>); and how much space there should be, in pixels, between the widget and its neighbors inside the <code>Gtk.Box</code> (<code>padding</code>).
ko: <code>pack_start</code> 메서드에는 <code>Gtk.Box</code>에 추가할 위젯(<code>child</code>) 인자, 새 위젯을 추가했을 때 <code>Gtk.Box</code>를 더 크게 할지 여부(<code>expand</code>) 인자, <code>Gtk.Box</code>가 커졌을 때 모든 여분 공간을 차지할 지 여부(<code>fill</code>) 인자, <code>Gtk.Box</code>에서 위젯 간 설정할 간격(<code>padding</code>) 인자가 있습니다.

note: (itstool) path: section/p
en: These lines are similar to the first two, but this time they create a <code>Gtk.Button</code> and add it to <code>box</code>. Notice that we are setting the <code>expand</code> argument (the second one) to <code>False</code> here, whereas it was set to <code>True</code> for the <code>Gtk.Image</code>. This will cause the image to take up all available space and the button to take only the space it needs. When you maximize the window, the button size will remain the same, but the image size will increase, taking up all of the rest of the window.
ko: 이 줄은 처음 두 줄과 비슷하지만 <code>Gtk.Button</code>을 만들어 <code>main_box</code>에 추가합니다. 여기서 (두번째) <code>expand</code> 인자 값을 <code>Gtk.Image</code>에 대해서는 <code>True</code> 로 설정했음에 반해 <code>False</code>로 설정했음에 유의하십시오. 이 함수로 그림을 활용 가능한 공간을 차지하게 하며 단추는 필요한 공간만 차지하게 합니다. 창을 죄대로 확장하면 단추 크기는 그대로지만, 그림은 창 나머지 공간을 차지하면서 커집니다.

note: (itstool) path: section/p
en: When the user clicks on the <gui>Open Image...</gui> button, a dialog should appear so that the user can choose a picture. Once chosen, the picture should be loaded and shown in the image widget.
ko: 사용자가 <gui>그림 열기...</gui> 단추를 누르면, 대화 상자가 나타나 그림을 선택할 수 있습니다. 그림을 선택하고 나면 그림을 불러오고 그림 위젯에 표시합니다.

note: (itstool) path: section/p
en: The first step is to connect the <code>clicked</code> signal of the button to a signal handler function, which we call <code>on_open_clicked</code>. Put this code immediately after the <code>button = Gtk.Button()</code> line where the button was created:
ko: 첫 단계에서는 단추의 <code>clicked</code> 시그널을, 우리가 호출할 시그널 핸들러 함수 <code>on_open_clicked</code>에 연결합니다. 이 코드를 단추를 만드는 <code>button = Gtk.Button()</code> 줄 바로 다음에 넣으십시오:

note: (itstool) path: section/p
en: This will connect the <code>clicked</code> signal to <code>on_open_clicked</code> method that we will define below.
ko: 이 코드는 아래에 정의할 <code>on_open_clicked</code> 메서드에 <code>clicked</code>시그널을 연결합니다.

note: (itstool) path: section/p
en: Now we can create the <code>on_open_clicked</code> method. Insert the following into the <code>GUI</code> class code block, after the <code>__init__</code> method:
ko: 이제 <code>on_open_clicked</code> 메서드를 만들겠습니다. <code>GUI</code> 클래스 코드 블록의 <code>__init__</code> 메서드 다음에 다음 코드를 넣으십시오:

note: (itstool) path: item/p
en: The line beginning with <code>dialog</code> creates an <gui>Open</gui> dialog, which the user can use to choose files. We set three properties: the title of the dialog; the action (type) of the dialog (it's an "open" dialog, but we could have used <code>SAVE</code> if the intention was to save a file; and <code>transient_for</code>, which sets the parent window of the dialog.
ko: <code>dialog</code>로 시작하는 줄에서는 사용자가 파일을 선택할 수 있는 <gui>열기</gui> 대화 상자를 만듭니다. 대화 상자 제목, 대화 상자 동작(형식) ("열기" 대화 상자지만, 파일을 저장하려고 할 때는 <code>SAVE</code>를 쓸 수 있습니다), 대화 상자의 상위 창을 설정하는 <code>transient_for</code> 속성을 설정합니다.

note: (itstool) path: item/p
en: <code>dialog.run</code> displays the <gui>Open</gui> dialog. The dialog will wait for the user to choose an image; when they do, <code>dialog.run</code> will return the value <output>1</output> (it would return <output>0</output> if the user clicked <gui>Cancel</gui>). The <code>if</code> statement tests for this.
ko: <code>dialog.run</code>은 <gui>열기</gui> 대화 상자를 표시합니다. 대화 상자는 사용자의 그림 선택을 기다립니다. 사용자가 그림을 선택하면 <code>dialog.run</code> 에서 <output>1</output> 값을 반환합니다(<gui>취소</gui>를 누르면 <output>0</output> 값을 반환합니다). <code>if</code> 구문에서는 어떤 값을 반환했는지 확인합니다.

note: (itstool) path: section/p
en: All of the code you need should now be in place, so try running the code. That should be it; a fully-functioning image viewer (and a whistlestop tour of Python and Gtk) in not much time at all!
ko: 필요한 모든 코드를 제자리에 넣었으니 코드를 실행해보겠습니다. 제대로 동작할겝니다. 이렇게 하여 기능이 완전하게 동작하는 그림 보기 프로그램(JavaScript와 Gtk를 활용한 간단한 맛보기)을 그리 길지 않은 시간 동안에 만들었습니다!

note: (itstool) path: section/p
en: If you run into problems with the tutorial, compare your code with this <link href="image-viewer/image-viewer.py">reference code</link>.
ko: 지침서를 따라하는 실행하는 과정에 문제가 있다면, <link href="image-viewer/image-viewer.py">참조 코드</link>와 여러분의 코드를 비교해보십시오.

[ctx: text]
note: (itstool) path: info/title
en: Image viewer (Vala)
ko: 그림 보기(Vala)

note: (itstool) path: info/desc
en: A little bit more than a simple "Hello world" GTK+ application.
ko: 간단한 "Hello world" GTK+ 프로그램에 약간의 무언가가 더 들어갑니다.

note: (itstool) path: synopsis/p
en: In this tutorial you will create an application which opens and displays an image file. You will learn:
ko: 이 따라하기 지침서에서는 그림 파일을 열고 보여주는 프로그램을 만듭니다. 다음을 배워나갑니다:

note: (itstool) path: item/p
en: How to set up a basic project using the <link xref="getting-ready">Anjuta IDE</link>.
ko: <link xref="getting-ready">안주타 IDE</link>로 기본 프로젝트를 설정하는 방법.

note: (itstool) path: item/p
en: How to write a <link href="http://developer.gnome.org/platform-overview/stable/gtk">Gtk application</link> in Vala
ko: Vala 프로그래밍 언어로 <link href="http://developer.gnome.org/platform-overview/stable/gtk">Gtk 프로그램</link>을 작성하는 방법

note: (itstool) path: item/p
en: Some basic concepts of <link href="http://developer.gnome.org/gobject/stable/">GObject</link> programming
ko: <link href="http://developer.gnome.org/gobject/stable/">GObject</link> 프로그래밍 일부 기본 개념

note: (itstool) path: item/p
en: You may find the <link href="http://valadoc.org/gtk+-3.0/">gtk+-3.0</link> API Reference useful, although it is not necessary to follow the tutorial.
ko: 이 따라하기 지침서에선 별로 필요하지 않지만 쓸만한 <link href="http://valadoc.org/gtk+-3.0/">gtk+-3.0</link> API 참고서를 찾아보시는 것도 좋습니다.

note: (itstool) path: item/p
en: From the <gui>Vala</gui> tab choose <gui>GTK+ (Simple)</gui>, click <gui>Continue</gui>, and fill out your details on the next page. Use <file>image-viewer</file> as project name and directory.
ko: <gui>Vala</gui> 탭에서 <gui>GTK+ (단순)</gui>을 선택하고 <gui>계속</gui>을 누른 다음, 나타난 페이지에서 몇가지 자세한 내용을 입력하십시오. 프로젝트 이름과 디렉터리에 <file>image-viewer</file>를 입력하십시오.

note: (itstool) path: item/p
en: Make sure that <gui>Use GtkBuilder for user interface</gui> is unchecked as we will create the UI manually in this tutorial.
ko: 따라하기 지침을 통해 사용자 인터페이스를 직접 만들 예정이므로 <gui>사용자 인터페이스에 GtkBuilder 사용</gui> 설정을 껐는지 확인하십시오.

note: (itstool) path: note/p
en: You will learn how to use the interface builder in the <link xref="guitar-tuner.vala">Guitar-Tuner</link> tutorial.
ko: <link xref="guitar-tuner.vala">기타 조율 프로그램</link> 따라하기 지침서에서 인터페이스 빌더 사용법을 배웁니다.

note: (itstool) path: item/p
en: Click <gui>Continue</gui> then <gui>Apply</gui> and the project will be created for you. Open <file>src/image_viewer.vala</file> from the <gui>Project</gui> or <gui>File</gui> tabs. You will see this code:
ko: <gui>계속</gui>을 누르고 <gui>적용</gui>을 누르면 프로젝트를 만들어줍니다. <gui>프로젝트</gui>나 <gui>파일</gui>탭에서 <file>src/image_viewer.vala</file> 파일을 여십시오. 다음 코드가 나타납니다:

note: (itstool) path: section/p
en: The code loads an (empty) window from the user interface description file and shows it. More details are given below; skip this list if you understand the basics:
ko: 이 코드는 (빈) 창을 사용자 인터페이스 설명 파일에서 불러오고 화면에 나타냅니다. 자세한 내용은 아래에 있습니다. 기본을 이해하셨다면 이 부분은 넘어가셔도 됩니다:

note: (itstool) path: item/p
en: The two <code>using</code> lines at the top import namespaces so we don't have to name them explicitly.
ko: 상단의 <code>using</code> 줄 두 줄에서는 이름 영역을 임포팅하여 해당 이름을 코드상에서 굳이 언급할 필요가 없게 해줍니다.

note: (itstool) path: item/p
en: The constructor of the <code>Main</code> class creates a new (empty) window and connects a <link href="https://live.gnome.org/Vala/SignalsAndCallbacks">signal</link> to exit the application when that window is closed.
ko: <code>Main</code> 클래스의 생성자는 (비어 있는) 새 창을 만들고 창을 닫을 때 프로그램을 빠져나갈 <link href="https://live.gnome.org/Vala/SignalsAndCallbacks">시그널</link>을 연결합니다.

note: (itstool) path: item/p
en: The <code>static main</code> function is run by default when you start a Vala application. It calls a few functions which create the <code>Main</code> class, set up and then run the application. The <link href="http://valadoc.org/gtk+-3.0/Gtk.main.html"><code>Gtk.main</code></link> function starts the GTK <link href="http://en.wikipedia.org/wiki/Event_loop">main loop</link>, which runs the user interface and starts listening for events (like clicks and key presses).
ko: <code>static main</code> 함수는 Vala 프로그램을 시작할 때 기본으로 실행하는 함수입니다. <code>Main</code> 클래스를 만들고 설정한 다음 프로그램을 실행하는 몇가지 함수를 호출합니다. <link href="http://valadoc.org/gtk+-3.0/Gtk.main.html"><code>Gtk.main</code></link> 함수는 사용자 인터페이스를 실행하고 이벤트(마우스 단추 누름과 키 누름) 대기를 시작하는 GTK <link href="http://en.wikipedia.org/wiki/Event_loop">메인 루프</link>를 시작합니다.

note: (itstool) path: section/p
en: Change the <gui>Configuration</gui> to <gui>Default</gui> and then press <gui>Execute</gui> to configure the build directory. You only need to do this once, for the first build.
ko: <gui>설정</gui>을 <gui>기본</gui>으로 바꾸고 <gui>실행</gui>을 눌러 빌드 디렉터리를 설정하십시오. 처음 빌드 때 한 번만 실행하면 됩니다.

note: (itstool) path: section/p
en: Now we will bring life into the empty window. GTK organizes the user interface with <link href="http://www.valadoc.org/gtk+-2.0/Gtk.Container.html"><code>Gtk.Container</code></link>s that can contain other widgets and even other containers. Here we will use the simplest available container, a <link href="http://unstable.valadoc.org/gtk+-2.0/Gtk.Box.html"><code>Gtk.Box</code></link>.
ko: 이제 비어있는 창에 숨결을 불어넣겠습니다. GTK는 다른 위젯을 넣을 수 있고 다른 컨테이너도 넣을 수 있는 <link href="http://www.valadoc.org/gtk+-2.0/Gtk.Container.html"><code>Gtk.Container</code></link>로  사용자 인터페이스를 모아둡니다. 여기서는 여러가지 컨테이너 중 가장 간단한 <link href="http://unstable.valadoc.org/gtk+-2.0/Gtk.Box.html"><code>Gtk.Box</code></link>를 사용하겠습니다.

note: (itstool) path: section/p
en: Add the following lines to the top of the <code>Main</code> class:
ko: <code>Main</code> 클래스 상단에 다음 줄을 추가하십시오:

note: (itstool) path: section/p
en: Now replace the current constructor with the one below:
ko: 이제 현재 생성자를 아래 내용으로 바꾸겠습니다:

note: (itstool) path: item/p
en: The first two lines are the parts of the GUI that we will need to access from more than one method. We declare them up here so that they are accessible throughout the class instead of only in the method where they are created.
ko: 처음 두 줄은 하나 이상의 메서드에서 접근할 GUI 부분입니다. 이 부분을 여기에 선언하여 메서드를 만든 부분에서만 쓰는게 아니라 전 클래스에 걸쳐 쓸 수 있게 합니다.

note: (itstool) path: item/p
en: The first lines of the constructor create the empty window. The next lines create the widgets we want to use: a button for opening up an image, the image view widget itself and the box we will use as a container.
ko: 생성자 처음 줄에서는 빈 창을 만듭니다. 다음 줄에서는 우리가 쓰려는 위젯을 만듭니다. 그림을 여는 단추, 그림 보기 위젯 자체, 컨테이너로 쓸 상자 위젯이 있습니다.

note: (itstool) path: item/p
en: The calls to <link href="http://unstable.valadoc.org/gtk+-2.0/Gtk.Box.pack_start.html"><code>pack_start</code></link> add the two widgets to the box and define their behaviour. The image will expand into any available space whereas the button will just be as big as needed. You will notice that we don't set explicit sizes on the widgets. In GTK this is usually not needed as it makes it much easier to have a layout that looks good in different window sizes. Next, the box is added to the window.
ko: <link href="http://unstable.valadoc.org/gtk+-2.0/Gtk.Box.pack_start.html"><code>pack_start</code></link> 호출로 박스에 두 위젯을 추가하고 동작을 정의합니다. 그림은 활용 가능한 공간만큼 충분히 확장하고, 단추는 필요한 만큼만 커집니다. 위젯의 크기를 분명하게 설정하지 않음을 알아채셨을 겁니다. GTK에서는 창 크기가 달라져도 보기 좋은 배치를 쉽게하기에 직접 설정할 필요가 없습니다. 이 과정이 끝나면 박스를 창에 추가합니다.

note: (itstool) path: item/p
en: We need to define what happens when the user clicks on the button. GTK uses the concept of <em>signals</em>.
ko: 단추를 사용자가 눌렀을 때 어떤 일이 일어날 지 정해야합니다. GTK는 <em>시그널</em> 개념을 활용합니다.

note: (itstool) path: item/p
en: When the <link href="http://valadoc.org/gtk+-3.0/Gtk.Button.html">button</link> is clicked, it fires the <link href="http://valadoc.org/gtk+-3.0/Gtk.Button.clicked.html"><code>clicked</code></link> signal, which we can connect to some action (defined in a <link href="https://live.gnome.org/Vala/SignalsAndCallbacks">callback</link> method).
ko: <link href="http://valadoc.org/gtk+-3.0/Gtk.Button.html">Button</link>을 누르면, 어떤 동작(<link href="https://live.gnome.org/Vala/SignalsAndCallbacks">콜백</link> 메서드에 정의)을 연결할 수 있는 <link href="http://valadoc.org/gtk+-3.0/Gtk.Button.clicked.html"><code>clicked</code></link> 시그널을 내보냅니다.

note: (itstool) path: item/p
en: This is done using the <code>connect</code> method of the button's <code>clicked</code> signal, which in this case tells GTK to call the (yet undefined) <code>on_image_open</code> callback method when the button is clicked. We will define the <em>callback</em> in the next section.
ko: 사용자가 단추를 누르면 (아직 정하지 않은) <code>on_image_open</code> 콜백 메서드를 호출하여 그림을 이 함수의 인자로 전달하라고 GTK에 지시할 때 <code>connect</code> 메서드를 사용하면 됩니다. 다음 섹션에서 <em>콜백</em>을 정의하겠습니디.

note: (itstool) path: item/p
en: In the callback, we need to access the <code>window</code> and <code>image</code> widgets, which is why we defined them as private members at the top of our class.
ko: 콜백 함수에서 <code>window</code>위젯과 <code>image</code> 위젯에 접근해야합니다. 이게 바로 클래스 상단에서 전용 멤버 인스턴스로 설정한 이유입니다.

note: (itstool) path: item/p
en: The last <code>connect</code> call makes sure that the application exits when the window is closed. The code generated by Anjuta called an <code>on_destroy</code> callback method which called <link href="http://www.valadoc.org/gtk+-2.0/Gtk.main_quit.html"><code>Gtk.main_quit</code></link>, but just connecting our signal to <code>main_quit</code> directly is easier. You can delete the <code>on_destroy</code> method.
ko: 마지막으로 <code>connect</code> 호출에서는 창을 닫았을 때 프로그램을 끝낼지 확인합니다. 안주타에서 만든 코드는 <link href="http://www.valadoc.org/gtk+-2.0/Gtk.main_quit.html"><code>Gtk.main_quit</code></link>를 호출하는 <code>on_destroy</code>  콜백 메서드를 호출하지만, 시그널을 <code>main_quit</code>에 바로 연결하는게 더 쉽습니다. <code>on_destroy</code> 메서드를 지울 수 있습니다.

note: (itstool) path: section/p
en: We will now define the signal handler for the <code>clicked</code> signal for the button we mentioned before. Add this code after the constructor:
ko: 앞서 언급한 단추의 <code>clicked</code> 시그널을 처리할 시그널 핸들러를 정의하겠습니다. 이 코드를 생성자 다음에 추가하십시오:

note: (itstool) path: section/p
en: This is a bit complicated, so let's break it down:
ko: 좀 복잡하니 하나씩 살펴보도록 하죠:

note: (itstool) path: note/p
en: A signal handler is a type of callback method that is called when a signal is emitted. Here the terms are used interchangeably.
ko: 시그널 핸들러는 시그널을 어딘가에서 내보냈을 때 콜백 함수를 호출하게 하는 방식입니다. 이 용어는 서로 바꿔서 사용합니다.

note: (itstool) path: item/p
en: The first argument of the callback method is always the widget that sent the signal. Sometimes other arguments related to the signal come after that, but <em>clicked</em> doesn't have any.
ko: 콜백 메서드의 첫번째 인자는 항상 시그널을 보낸 위젯입니다. 때로는 뒤 따라오는 다른 인자가 시그널에 관련이 있지만, <em>clicked</em>는 그렇지 않습니다.

note: (itstool) path: item/p
en: In this case the <code>button</code> sent the <code>clicked</code> signal, which is connected to the <code>on_open_image</code> callback method:
ko: 이 경우 <code>button</code>에서 <code>on_open_image</code> 콜백 함수에 연결한 <code>clicked</code>  시그널을 내보냅니다:

note: (itstool) path: item/p
en: The <code>on_open_image</code> method takes the button that emitted the signal as an argument:
ko: <code>on_open_image</code> 메서드는 시그널을 방출한 단추를 인저로 취합니다:

note: (itstool) path: item/p
en: The next interesting line is where the dialog for choosing the file is created. <link href="http://www.valadoc.org/gtk+-3.0/Gtk.FileChooserDialog.html"><code>FileChooserDialog</code></link>'s constructor takes the title of the dialog, the parent window of the dialog and several options like the number of buttons and their corresponding values.
ko: 다음 흥미로운 부분은 파일을 선택하는 대화상자를 만드는 부분입니다. <link href="http://www.valadoc.org/gtk+-3.0/Gtk.FileChooserDialog.html"><code>FileChooserDialog</code></link>의 생성자는 대화 상자 제목, 대화 상자의 상위 창, 단추 갯수와 각각의 값 같은 몇가지 옵션을 취합니다.

note: (itstool) path: item/p
en: Notice that we are using <link href="http://unstable.valadoc.org/gtk+-3.0/Gtk.Stock.html"><em>stock</em></link> button names from Gtk, instead of manually typing "Cancel" or "Open". The advantage of using stock names is that the button labels will already be translated into the user's language.
ko: 직접 "취소" 또는 "열기"라고 입력하는 대신, Gtk에서 가져온 <link href="http://unstable.valadoc.org/gtk+-3.0/Gtk.Stock.html"><em>stock</em></link> 단추 이름을 사용하고 있음을 참고하십시오. 스톡 이름을 사용하면 사용자의 언어로 이미 번역한 단추 레이블을 사용합니다.

note: (itstool) path: item/p
en: The next two lines restrict the <gui>Open</gui> dialog to only display files which can be opened by <em>GtkImage</em>. GtkImage is a widget which displays an image. A filter object is created first; we then add all kinds of files supported by <link href="http://www.valadoc.org/gdk-pixbuf-2.0/Gdk.Pixbuf.html"><code>Gdk.Pixbuf</code></link> (which includes most image formats like PNG and JPEG) to the filter. Finally, we set this filter to be the <gui>Open</gui> dialog's filter.
ko: 다음 두 줄은 <gui>열기</gui> 대화 상자에서 <em>GtkImage</em>로만 열 수 있는 파일을 표시하도록 제한합니다. 필터 객체를 우선 만듭니다. 그 다음 <link href="http://www.valadoc.org/gdk-pixbuf-2.0/Gdk.Pixbuf.html"><code>Gdk.Pixbuf</code></link>에서 지원하는 파일 종류(PNG와 JPEG 같은 대부분의 그림 형식)를 필터에 추가합니다. 마지막으로 이 필터를 <gui>열기</gui> 대화 상자의 필터로 설정합니다.

note: (itstool) path: item/p
en: <link href="http://www.valadoc.org/gtk+-3.0/Gtk.Dialog.run.html"><code>dialog.run</code></link> displays the <gui>Open</gui> dialog. The dialog will wait for the user to choose an image; when they do, <code>dialog.run</code> will return the <link href="http://www.valadoc.org/gtk+-3.0/Gtk.ResponseType.html">ResponseType</link> value <code>ResponseType.ACCEPT</code> (it would return <code>ResponseType.CANCEL</code> if the user clicked <gui>Cancel</gui>). The <code>switch</code> statement tests for this.
ko: <link href="http://www.valadoc.org/gtk+-3.0/Gtk.Dialog.run.html"><code>dialog.run</code></link>은 <gui>열기</gui> 대화 상자를 표시합니다. 대화 상자는 사용자의 그림 선택을 기다립니다. 사용자가 그림을 선택하면 <code>dialog.run</code> 에서 <code>ResponseType.ACCEPT</code> 값을 반환합니다(<gui>취소</gui>를 누르면 <code>ResponseType.CANCEL</code> 값을 반환합니다). <code>switch</code> 구문에서는 어떤 값을 반환했는지 확인합니다.

note: (itstool) path: item/p
en: Assuming that the user did click <gui>Open</gui>, the next lines get the filename of the image selected by the user, and tell the <code>GtkImage</code> widget to load and display the selected image.
ko: 사용자가 <gui>열기</gui>를 눌렀다고 한 상황에서, 다음 줄에서 사용자가 선택한 그림의 파일 이름을 가져오고,  <code>GtkImage</code> 위젯으로 선택한 그림을 불러오고 화면에 표시합니다.

note: (itstool) path: item/p
en: Destroying automatically hides the dialog.
ko: 해체할 때는 대화상자를 자동으로 숨깁니다.

note: (itstool) path: section/p
en: If you haven't already done so, choose the <file>src/image-viewer</file> application in the dialog that appears. Finally, hit <gui>Run</gui> and enjoy!
ko: 아직 끝나지 않았다면, 대화상자에 나타난 <file>src/image-viewer</file> 프로그램을 선택하십시오. 마지막으로 <gui>실행</gui>을 선택하고 즐기시지요!

note: (itstool) path: section/p
en: If you run into problems with the tutorial, compare your code with this <link href="image-viewer/image-viewer.vala">reference code</link>.
ko: 지침서를 따라하는 실행하는 과정에 문제가 있다면, <link href="image-viewer/image-viewer.vala">참조 코드</link>와 여러분의 코드를 비교해보십시오.

note: (itstool) path: item/p
en: Set it up so that when the window opens it is of a specific size to start off with. For example, 200 X 200 pixels.
ko: 창을 열었을 때 지정 크기로 시작하도록 설정하십시오. 예를 들면 200 X 200 픽셀 크기입니다.

note: (itstool) path: credit/name
en: GNOME Documentation Team
ko: 그놈 문서 팀

note: (itstool) path: page/title
en: GNOME Developer Platform Demos
ko: 그놈 개발자 플랫폼 데모

note: (itstool) path: page/p
en: This guide includes a variety of coding examples, such writing an image viewer or weather application. Each demo comes with code that you can try, and explains how each example works. They are a great way to get started with the GNOME developer platform.
ko: 이 안내서는 그림 보기, 날씨 프로그램 과 같은 다양한 코드 예제를 담고 있습니다. 다양한 맛보기 프로그램에 여러분이 따라해볼 수 있는 코드, 예제 동작 설명을 함께 넣었습니다. 그놈 개발자 플랫폼을 시작해볼 수 있는 멋진 수단입니다.

note: (itstool) path: section/title
en: Pick a Language
ko: 언어 선택

note: (itstool) path: section/p
en: These developer demos are available in a range of programming languages. Pick one to get started:
ko: 이 개발자 데모는 다양한 프로그래밍 언어 버전으로 있습니다. 시작할 내용을 고르세요:

note: (itstool) path: page/title
en: Tutorials, code samples and platform demos in JavaScript
ko: JavaScript 지침서, 예제 코드, 플랫폼 데모

note: (itstool) path: section/title
en: Code samples and tutorials
ko: 예제 코드 및 지침서

note: (itstool) path: info/desc
en: A widget which displays text
ko: 텍스트를 표시하는 위젯

note: (itstool) path: td/p (itstool) path: page/p
en: A simple label
ko: 간단한 레이블

note: (itstool) path: info/desc
en: A label which can contain text
ko: 텍스트를 넣을 수 있는 레이블

note: (itstool) path: page/p
en: A label displaying a friendly message.
ko: 친근한 메시지를 나타내는 레이블입니다.

note: (itstool) path: info/desc
en: A widget that displays a small to medium amount of text
ko: 적은 양 또는 중간 분량의 글 내용을 나타내는 위젯입니다

note: (itstool) path: section/p
en: Another way to obtain what we have in the example is to create the label as an instance of another class and add it to the instance of <code>MyWindow</code> in the <code>do_activate(self)</code> method:
ko: 예제 내용을 가져오는 다른 방법은 다른 클래스의 인스턴스로 레이블을 만들고 <code>do_activate(self)</code> 메서드의 <code>MyWindow</code> 인스턴스에 추가하는 식입니다:

note: (itstool) path: note/p
en: The highlighted lines indicate code that is different from the previous snippet.
ko: 강조한 줄은 앞 부분과 다른 코드를 나타냅니다.

note: (itstool) path: section/title
en: Useful methods for a Label widget
ko: Label 위젯에 쓸만한 메서드

note: (itstool) path: note/p
en: An explanation of how to work with strings in GTK+ can be found in <link xref="strings.py"/>.
ko: GTK+에서 문자열을 다루는 방법을 설명하는 내용은 <link xref="strings.py"/>에 있습니다.

note: (itstool) path: item/p
en: <code>set_line_wrap(True)</code> breaks lines if the text of the label exceeds the size of the widget.
ko: <code>set_line_wrap(True)</code> 함수는 레이블의 텍스트가 위젯의 크기 범위를 넘어가는 경우 줄을 바꿉니다.

note: (itstool) path: item/p
en: <code>set_justify(Gtk.Justification.LEFT)</code> (or <code>Gtk.Justification.RIGHT, Gtk.Justification.CENTER, Gtk.Justification.FILL</code>) sets the alignment of the lines in the text of the label relative to each other. The method has no effect on a single-line label.
ko: <code>set_justify(Gtk.Justification.LEFT)</code>(또는 <code>Gtk.Justification.RIGHT, Gtk.Justification.CENTER, Gtk.Justification.FILL</code>) 함수는 레이블의 텍스트 줄 정렬 방법을 상대적으로 설정합니다. 한 줄 레이블인 경우 이 메서드의 결과는 눈에 띄지 않습니다.

note: (itstool) path: item/p
en: For decorated text we can use <code>set_markup("text")</code>, where <code>"text"</code> is a text in the <link href="http://developer.gnome.org/pango/stable/PangoMarkupFormat.html">Pango Markup Language</link>. An example:
ko: 텍스트를 꾸밀 때는 <code>set_markup("text")</code> 함수를 사용할 수 있는데, "text"는 <link href="http://developer.gnome.org/pango/stable/PangoMarkupFormat.html">팡고 마크업 언어</link>로 구성한 텍스트입니다:

note: (itstool) path: p/link
en: Creative Commons Attribution-ShareAlike 3.0 Unported License
ko: 크리에이티브 커먼즈 저작자표시-동일조건변경허락 3.0 Unported 라이선스

note: (itstool) path: license/p
en: This work is licensed under a <_:link-1/>. As a special exception, the copyright holders give you permission to copy, modify, and distribute the example code contained in this documentation under the terms of your choosing, without restriction.
ko: 이 문서는 <_:link-1/>를 적용합니다. 특별한 예외로, 저작자는 여러분에게 여러분이 원하는 조항에 따라 이 문서 내 예제 코드에 대한 제한 없는 복제, 수정, 배포 권한을 부여합니다.

note: (itstool) path: info/desc
en: Legal information.
ko: 법적 정보.

note: (itstool) path: page/title
en: License
ko: 라이선스

note: (itstool) path: page/p
en: This work is distributed under a CreativeCommons Attribution-Share Alike 3.0 Unported license.
ko: 이 문서는 크리에이티브 커먼즈 저작자표시-동일조건변경허락 3.0 Unported 라이선스로 배포됩니다.

note: (itstool) path: page/p
en: You are free:
ko: 다음을 자유롭게 행할 수 있습니다:

note: (itstool) path: item/title
en: <em>To share</em>
ko: <em>공유</em>

note: (itstool) path: item/p
en: To copy, distribute and transmit the work.
ko: 저작물을 복제, 배포, 전송합니다.

note: (itstool) path: item/title
en: <em>To remix</em>
ko: <em>변경</em>

note: (itstool) path: item/p
en: To adapt the work.
ko: 저작물에 적용합니다.

note: (itstool) path: page/p
en: Under the following conditions:
ko: 다음 조항을 따라야합니다:

note: (itstool) path: item/title
en: <em>Attribution</em>
ko: <em>저작자 표시</em>

note: (itstool) path: item/p
en: You must attribute the work in the manner specified by the author or licensor (but not in any way that suggests that they endorse you or your use of the work).
ko: 저작자 또는 저작권자가 지정한 방식으로 저작물의 저작자를 언급해야합니다(저작 행위나 저작물의 사용 방식은 해당하지 않음).

note: (itstool) path: item/title
en: <em>Share Alike</em>
ko: <em>동일 조건</em>

note: (itstool) path: item/p
en: If you alter, transform, or build upon this work, you may distribute the resulting work only under the same, similar or a compatible license.
ko: 작업물을 바꾸거나, 전송하거나, 작업물을 기반으로 무언가를 만든다면, 동일, 유사 또는 호환 라이선스를 기반으로 결과 작업물을 배포해야합니다.

note: (itstool) path: page/p
en: For the full text of the license, see the <link href="http://creativecommons.org/licenses/by-sa/3.0/legalcode">CreativeCommons website</link>, or read the full <link href="http://creativecommons.org/licenses/by-sa/3.0/">Commons Deed</link>.
ko: 라이선스 전문은 <link href="http://creativecommons.org/licenses/by-sa/3.0/legalcode">크리에이티브 커먼즈 웹사이트</link>를 방문하시거나, <link href="http://creativecommons.org/licenses/by-sa/3.0/">커먼즈 라이선스</link> 전문을 읽으십시오.

note: (itstool) path: note/p
en: As a special exception, the copyright holders give you permission to copy, modify, and distribute the example code contained in this documentation under the terms of your choosing, without restriction.
ko: 특별한 예외로, 저작자는 여러분에게 여러분이 원하는 조항에 따라 이 문서 내 예제 코드에 대한 제한 없는 복제, 수정, 배포 권한을 부여합니다.

note: (itstool) path: info/desc
en: Create buttons bound to a URL
ko: URL로 넘어가는 단추를 만듭니다

note: (itstool) path: page/p
en: This button links to the GNOME live webpage.
ko: 그놈 라이브 웹 페이지 링크 단추입니다.

note: (itstool) path: info/desc
en: A button that links to a web page
ko: 웹 페이지를 연결하는 단추

note: (itstool) path: page/p
en: A button that links to live.gnome.org.
ko: live.gnome.org에 연결한 단추입니다.

note: (itstool) path: info/desc
en: A button bound to an URL
ko: URL에 연결하는 단추

note: (itstool) path: page/p
en: A button that links to a web page.
ko: 웹페이지로 연결한 단추입니다.

note: (itstool) path: section/title
en: Useful methods for a LinkButton widget
ko: LinkButton 위젯에 쓸만한 메서드

note: (itstool) path: item/p
en: <code>get_visited()</code> returns the 'visited' state (<code>True</code> or <code>False</code>) of the URI where the LinkButton points. The button becomes visited when it is clicked.
ko: <code>get_visited()</code> 함수는 LinkButton이 가리키는 URI의 'visited' 상태(<code>True</code> 또는 <code>False</code>)를 반환합니다. 단추를 누르면 visited 상태가 됩니다.

note: (itstool) path: item/p
en: <code>set_visited(True)</code> sets the 'visited' state of the URI where the LinkButton points as <code>True</code> (analogously for <code>False</code>).
ko: <code>set_visited(True)</code> 함수는 LinkButton을 <code>True</code>(<code>False</code> 도 비슷하게).로 설정했을 경우 URI의 'visited' 상태를 설정합니다

note: (itstool) path: item/p
en: Each time the button is clicked, the signal <code>"activate-link"</code> is emitted. For an explanation of signals and callback functions, see <link xref="signals-callbacks.py"/>.
ko: 단추를 누를 때마다 <code>"activate-link"</code> 시그널을 내보냅니다. 시그널과 콜백 함수를 설명하는 내용을 보려면 <link xref="signals-callbacks.py"/>를 참고하십시오.

note: (itstool) path: page/p
en: This button links to GNOME live.
ko: 이 단추에 그놈 라이브를 연결했습니다.

[ctx: text]
note: (itstool) path: info/title
en: Magic mirror (Vala)
ko: 마법의 거울(Vala)

note: (itstool) path: info/desc
en: Use your webcam as a mirror using the GStreamer framework and GTK+
ko: 지스트리머와 GTK+로 웹캠을 거울처럼 사용합니다

note: (itstool) path: page/title
en: Magic mirror
ko: 마법의 거울

note: (itstool) path: synopsis/p
en: <em>Your mirror just fell off the wall and broke into a thousand pieces — but you need a mirror to shave your beard off or add some makeup! You only have 15 minutes left before catching the bus to work. So what can you do?</em>
ko: <em>거울이 벽에서 떨어져 나가 수많은 조각으로 깨졌습니다. 그러나 턱수염을 면도하거나 화장을 하려면 거울이 필요합니다! 통근 버스를 잡기까지 15분 밖에 안남았습니다. 뭘 할 수 있을까요?</em>

note: (itstool) path: synopsis/p
en: In this tutorial, we're going to make a program which lets you use your webcam as a mirror. You will learn how to:
ko: 이 따라하기 지침을 통해 웹 캠을 거울로 사용하는 프로그램을 만들겠습니다. 다음 방법을 배워나갑니다:

note: (itstool) path: item/p
en: Create a GTK+ application
ko: GTK+ 프로그램 만들기

note: (itstool) path: item/p
en: Access your webcam using GStreamer and embed the result into a window
ko: 지스트리머로 웹캠에 접근해서 결과 동영상을 창에 넣기

note: (itstool) path: item/p
en: Grab photos off your webcam
ko: 웹 캠으로 사진 찍기

note: (itstool) path: item/p
en: Installed copies of GTK, GStreamer, and a Vala compiler
ko: GTK, 지스트리머, Vala 컴파일러 설치

note: (itstool) path: item/p
en: Basic knowledge of an object-oriented programming language
ko: 객체 지향 프로그래밍 언어 기본 지식

note: (itstool) path: item/p
en: Choose <gui>GTK+ (simple)</gui> from the <gui>Vala</gui> tab, click <gui>Forward</gui>, and fill out your details on the next few pages. Use <file>magic-mirror</file> as project name and directory.
ko: <gui>Vala</gui> 탭에서 <gui>GTK+ (단순)</gui>를 선택하고, <gui>계속</gui>을 누른 다음, 나타난 페이지에서 몇가지 자세한 내용을 입력하십시오. 프로젝트 이름과 디렉터리에 <file>magic-mirror</file>를 입력하십시오.

note: (itstool) path: item/p
en: Disable <gui>Use GtkBuilder for user interface</gui> as we will create the UI manually in this tutorial. Check the <link xref="guitar-tuner.vala">Guitar-Tuner</link> tutorial using the interface builder.
ko: 따라하기 지침을 통해 사용자 인터페이스를 직접 만들 예정이므로 <gui>사용자 인터페이스에 GtkBuilder 사용</gui> 설정을 끄십시오. 인터페이스 빌더 사용법을 알아보려면 <link xref="guitar-tuner.vala">기타 조율 프로그램</link> 따라하기 지침서를 확인하십시오.

note: (itstool) path: item/p
en: Make sure that <gui>Configure external packages</gui> is selected. On the next page, select <em>gstreamer-0.10</em> from the list to include the <app>GStreamer</app> library into your project.
ko: <gui>외부 패키지 설정</gui>을 <gui>켬</gui>으로 설정했는지 확인하십시오. 다음 페이지의 목록에서 <em>gstreamer-0.10</em>를 선택하여 프로젝트에 <app>지스트리머</app> 라이브러리를 넣으십시오.

note: (itstool) path: item/p
en: Click <gui>Apply</gui> and the project will be created for you. Open <file>src/magic_mirror.vala</file> from the <gui>Project</gui> or <gui>File</gui> tabs. You should see some code which starts with the lines:
ko: <gui>적용</gui>을 누르면 프로젝트를 만들어줍니다. <gui>프로젝트</gui>나 <gui>파일</gui>탭에서 <file>src/magic_mirror.vala</file> 파일을 여십시오. 다음 줄로 시작하는 일부 코드를 볼 수 있습니다:

note: (itstool) path: section/p
en: The code loads an (empty) window and shows it. More details are given below; skip this list if you understand the basics:
ko: 코드에서 (비어 있는) 창을 불러와서 보여줍니다. 자세한 내용은 아래에 있습니다. 기본을 이해하셨다면 건너뛰십시오:

note: (itstool) path: item/p
en: The constructor of the <code>Main</code> class creates a new window and sets its title. Afterwards the window is shown and a signal is connected which quits the application if the window is closed. More on signals later on.
ko: <code>Main</code> 클래스 생성자에서는 새 창을 만들고 제목을 설정합니다. 그 다음 창을 보여주고, 창을 닫았을 때 어떤 프로그램을 끝낼지 시그널을 연결합니다. 다른 시그널은 나중에 살펴보겠습니다.

note: (itstool) path: item/p
en: The static <code>main</code> function is run by default when you start a Vala application. It calls a few functions which create the Main class, set up and then run the application. The <code>Gtk.Main</code> function starts the GTK main loop, which runs the user interface and starts listening for events (like clicks and key presses).
ko: 정적 <code>main</code> 함수는 Vala 프로그램을 실행할 때 기본으로 동작합니다. Main 클래스를 만들고, 섲렁하며, 프로그램을 실행할 몇가지 함수를 호출합니다. <code>Gtk.Main</code> 함수는 사용자 인터페이스를 실행하고 이벤트(마우스 단추 누름과 키보드 키 누름) 기다림을 시작하는 GTK 메인 루프를 시작합니다.

note: (itstool) path: section/title
en: Access the webcam video stream with GStreamer
ko: 지스트리머로 웹캠 동영상 스트림 접근하기

note: (itstool) path: section/p
en: The GStreamer multimedia framework is able to handle video from webcams. Let's add GStreamer to our application and so we can access the video stream.
ko: 지스트리머 멀티미디어 프레임워크는 웹캠 동영상을 처리할 수 있습니다. 동영상 스트림에 접근할 수 있도록 지스트리머를 프로그램에 추가해보겠습니다.

note: (itstool) path: item/p
en: First we remove the window we created before because GStreamer will take care of showing the picture on screen.
ko: 지스트리머에서는 화면에 그림을 띄우는 방법을 다루기 때문에 우선 앞서 만든 창을 제거하겠습니다.

note: (itstool) path: item/p
en: Now we are creating a GStreamer element which accesses our webcam. We are using the Camerabin element, which is an all-in-one camera element and is capable of taking photos, videos, applying effects and much more. Perfect for our use case! With <code>this.camerabin.set_state (Gst.State.PLAYING)</code> we tell the GStreamer pipeline we just created to start playing. Easy, no?
ko: 이제 웹 캠에 접근할 지스트리머 이벤트를 만들겠습니다. 일체형 카메라 구성요소이며 사진, 동영상, 효과적용 기능 등이 있는 Camerabin 구성 요소를 활용하겠습니다. 우리가 활용하기에 완벽하죠! 지스트리머 파이프라인에 <code>this.camerabin.set_state (Gst.State.PLAYING)</code>로 지스트리머 파이프라인에 재생을 시작할 거리를 만들었다고 알리겠습니다.

note: (itstool) path: item/p
en: Of course it is also possible to integrate the video more tightly into other windows but that is an advanced topic that includes some details of the X Window System we will omit here.
ko: 물론 동영상을 다른 창에 꽉 붙여둘 수도 있지만, X 윈도우 시스템의 일부 구체적 내용이 들어가는 고급 주제이므로 여기서는 생략하겠습니다.

note: (itstool) path: item/p
en: Compile and run it again. You will end up with two windows. In the next step we will integrate the video into the GTK+ window.
ko: 다시 컴파일하고 실행하십시오. 창 두개가 뜹니다. 다음 단계에서는 GTK+ 창으로 동영상을 통합하겠습니다.

note: (itstool) path: section/p
en: If you run into problems with the tutorial, compare your code with this <link href="magic-mirror/magic-mirror.vala">reference code</link>. There is also a more <link href="magic-mirror/magic-mirror-advanced.vala">extensive implementation</link> that embeds the window into a regular Gtk.Window which involves some advanced techniques, and adds buttons to start/stop the picture.
ko: 지침서를 따라하는 실행하는 과정에 문제가 있다면, <link href="magic-mirror/magic-mirror.vala">참조 코드</link>와 여러분의 코드를 비교해보십시오. 일부 고급기술을 넣어 보통 Gtk.Window에 창을 넣고, 사진 표시 시작/정지 단추를 추가한 <link href="magic-mirror/magic-mirror-advanced.vala">추가 구현체</link>가 있습니다.

note: (itstool) path: section/p
en: To find out more about the Vala programming language you might want to check out the <link href="http://live.gnome.org/Vala/Tutorial">Vala Tutorial</link>.
ko: Vala 프로그래밍 언어에 대해 더 알아보려면 <link href="http://live.gnome.org/Vala/Tutorial">Vala 따라하기 지침서</link>를 확인해보시는게 좋습니다.

note: (itstool) path: section/title
en: Conclusion
ko: 마무리

note: (itstool) path: section/p
en: That's it, you have managed to create a full-featured webcam photo application in 15 minutes. Now you can shave your beard off or add some makeup to your beautiful face, right before having a beautiful day at your workplace, where you can impress your friends and colleagues with an awesome application you just made in 15 minutes.
ko: 다 됐습니다. 15분동안 완전한 기능을 수행하는 웹캠 사진 프로그램을 열심히 만들었습니다. 이제 15분동안 열심히 만든 대단한 프로그램으로 친구나 동료에게 인상을 심어줄 수 있는 일터에서 아름다운 나날을 보내기 전 수염을 깎거나 여러분의 이쁘장한 얼굴을 화장할 수 있습니다.

note: (itstool) path: info/desc
en: A widget which holds GtkMenuItem widgets
ko: GtkMenuItem 위젯을 가진 위젯

note: (itstool) path: page/p
en: A MenuBar created using XML and GtkBuilder.
ko: XML과 GtkBuilder로 만든 MenuBar입니다.

note: (itstool) path: note/p
en: For a more in-depth look at this sample, please do not hesitate to check out the <link xref="menubar.vala">Vala MenuBar</link> and/or <link xref="menubar.py">Python MenuBar</link> tutorials.
ko: 이 예제를 좀 더 자세한 관점에서 바라보려면, 망설이지 마시고 <link xref="menubar.vala">Vala MenuBar</link> 또는 <link xref="menubar.py">Python MenuBar</link> 따라하기 지침서를 살펴보십시오.

note: (itstool) path: page/title
en: MenuBar created using XML and GtkBuilder
ko: XML과 GtkBuilder로 만드는 MenuBar

note: (itstool) path: section/title
en: Create a MenuBar using XML
ko: XML로 MenuBar 만들기

note: (itstool) path: section/p
en: To create the menubar using XML:
ko: XML로 메뉴 표시줄을 만들려면:

note: (itstool) path: item/p
en: Create <file>menubar.ui</file> using your favorite text editor.
ko: 원하는 텍스트 편집기로 <file>menubar.ui</file> 파일을 만드십시오.

note: (itstool) path: item/p
en: Enter the following line at the top of the file:
ko: 다음 줄을 파일 상단에 입력합니다:

note: (itstool) path: item/p
en: We want to create the interface which will contain our menubar and its submenus. Our menubar will contain <gui>File</gui>, <gui>Edit</gui>, <gui>Choices</gui> and <gui>Help</gui> submenus. We add the following XML code to the file:
ko: 메뉴 표시줄과 하위 메뉴를 넣을 인터페이스를 만들겠습니다. 메뉴 표시줄에는 <gui>파일</gui>, <gui>편집</gui>, <gui>선택</gui> and <gui>도움말</gui> 하위 메뉴를 넣겠습니다. 다음 XML 코드를 파일에 넣겠습니다:

note: (itstool) path: item/p
en: Now we will create the .py file and use GtkBuilder to import the <file>menubar.ui</file> we just created.
ko: 이제 .py 파일을 만들고 방금 만든 <file>menubar.ui</file>  파일을 가져올 때 GtkBuilder를 활용하겠습니다.

note: (itstool) path: section/title
en: Add the MenuBar to the window using GtkBuilder
ko: GtkBuilder로 창에 MenuBar 추가하기

note: (itstool) path: section/p
en: Now run the python application. It should look like the picture at the top of this page.
ko: 이제 파이썬 프로그램을 실행하십시오 이 페이지의 상단의 그림과 비슷하게 나타납니다.

note: (itstool) path: section/title
en: Add items to the menus
ko: 항목을 메뉴에 추가하기

note: (itstool) path: section/p
en: We start off by adding 2 menuitems to the <gui>File</gui> menu: <gui>New</gui> and <gui>Quit</gui>. We do this by adding a <code>section</code> to the the <code>File</code> submenu with these items. The <file>menubar.ui</file> should look like this (lines 6 to 13 inclusive comprise the newly added section):
ko: <gui>파일</gui> 메뉴에 <gui>새로 만들기</gui>와 <gui>끝내기</gui> 메뉴 항목 2개 추가로 시작하겠습니다. <code>파일</code> 하위 메뉴에 이 항목과 <code>section</code>을 추가하면 됩니다. <file>menubar.ui</file> 파일은 다음과 같이 나타나야 합니다(6번째 줄부터 13번째 줄까지 새로 추가한 섹션 구성이 들어갑니다):

note: (itstool) path: section/p
en: Following this pattern, you can now add a <code>Copy</code> and a <code>Paste</code> item to the <code>Edit</code> submenu, and an <code>About</code> item to the <code>Help</code> submenu.
ko: 이런 방식으로 <code>편집</code> 하위 메뉴에 <code>복사</code> and a <code>붙여넣기</code>를 추가하고, <code>도움말</code> 하위 메뉴로 <code>정보</code> 항목을 추가할 수 있습니다.

note: (itstool) path: section/title
en: Setup actions
ko: 설정 동작

note: (itstool) path: section/p
en: We now create the actions for "New" and "Quit" connected to a callback function in the Python file; for instance we create "new" as:
ko: 파이썬 파일에서 콜백 함수로 연결한 "New"와 "Quit"에 대한 동작을 만들겠습니다. 예를 들어 "new"를 다음과 같이 만듭니다:

note: (itstool) path: section/p
en: And we create the callback function of "new" as
ko: 그리고 "new"의 콜백 함수를 다음과 같이 만듭니다

note: (itstool) path: section/p
en: Now, in the XML file, we connect the menu items to the actions in the XML file by adding the "action" attribute:
ko: 이제 XML 파일에서 "action" 속성을 추가하여 메뉴 항목을 XML 파일의 동작에 연결하겠습니다:

note: (itstool) path: section/p
en: Note that for an action that is relative to the application, we use the prefix <code>app.</code>; for actions that are relative to the window we use the prefix <code>win.</code>.
ko: 참고로 프로그램과 관계있는 동작에는 <code>app</code> 접두부를 붙입니다. 창과 관계된 동작은 <code>win</code> 접두부를 붙입니다.

note: (itstool) path: section/p
en: Finally, in the Python file, we add the action to the application or to the window - so for instance <code>app.new</code> will be added to the application in the method <code>do_startup(self)</code> as
ko: 마지막으로 파이썬 파일에서 프로그램 또는 창에 동작을 추가하겠습니다. 그래서 예를 들어 <code>app.new</code>는 다음과 같이 <code>do_startup(self)</code> 메서드에서 프로그램에 추가하겠습니다

note: (itstool) path: section/p
en: See <link xref="signals-callbacks.py"/> for a more detailed explanation of signals and callbacks.
ko: 시그널과 콜백 함수에 대한 자세한 내용은 <link xref="signals-callbacks.py"/>를 참고하십시오.

note: (itstool) path: section/title
en: Actions: Application or Window?
ko: 동작: 프로그램 또는 창?

note: (itstool) path: section/p
en: Above, we created the "new" and "open" actions as part of the MyApplication class. Actions which control the application itself, such as "quit" should be created similarly.
ko: 위에서 MyApplication 클래스의 "new"와 "open" 동작을 만들었습니다. 프로그램 자체를 다루는 "quit" 같은 동작은 비슷하게 만듭니다.

note: (itstool) path: section/p
en: Some actions, such as "copy" and "paste" deal with the window, not the application. Window actions should be created as part of the window class.
ko: "copy"나 "paste" 같은 창을 다루는 일부 동작은, 프로그램에 넣지 않습니다. 창 동작은 창 클래스 부분에 만들어야합니다.

note: (itstool) path: section/p
en: The complete example files contain both application actions and window actions. The window actions are the ones usually included in the <link xref="gmenu.py">application menu</link> also. It is not good practice to include window actions in the application menu. For demonstration purposes, the complete example files which follow include XML in the UI file which creates the application menu which includes a "New" and "Open" item, and these are hooked up to the same actions as the menubar items of the same name.
ko: 완전한 예제 파일에는 프로그램 동작과 창 동작이 같이 들어있습니다. 창 동작은 보통  <link xref="gmenu.py">프로그램 메뉴</link> 에도 들어갑니다. 프로그램 메뉴에 창 동작이 들어가는건 좋은 실례가 아닙니다. 용도 증명 목적으로, 완전한 예제 파일에서는, "New"와 "Open" 항목이 들어간 프로그램 메뉴를 만드는 사용자 인터페이스 파일에 들어간 XML 내용을 따르며, 동일한 이름을 지닌 메뉴 표시줄 항목과 동일한 동작을 수행합니다.

note: (itstool) path: section/title
en: Choices submenu and items with state
ko: 상태가 들어간 선택 하위 메뉴 및 항목

note: (itstool) path: section/p
en: Lines 30 to 80 inclusive of the <link xref="menubar.py#xml-code"/> demonstrate the XML code used to create the UI for <gui>Choices</gui> menu.
ko: 30번째 줄 부터 80번째 줄 까지 <link xref="menubar.py#xml-code"/> 코드가 들어간 부분에서 <gui>선택</gui> 메뉴의 사용자 인터페이스를 만들 때 쓰는 XML 코드 예제를 시연합니다.

note: (itstool) path: section/p
en: The actions created so far are <em>stateless</em>, that is they do not retain or depend on a state given by the action itself. The actions we need to create for the Choices submenu, on the other hand, are <em>stateful</em>. An example of creation of a stateful action is:
ko: 여지껏 만든 동작은 <em>상태가 없는</em> 상황인데 동작 자체에 주어진 상태에 따르거나 상태 값을 유지하지 않습니다. 반면에 선택 하위 메뉴에 우리가 만들 동작은 <em>상태를 보유하고 있습니다</em>. 상태를 가진 동작을 만드는 예제는 다음과 같습니다:

note: (itstool) path: section/p
en: where the variables of the method are: name, parameter type (in this case, a string - see <link href="http://developer.gnome.org/glib/unstable/glib-GVariantType.html">here</link> for a complete list of character meanings), initial state (in this case, 'line' - in case of a <code>True</code> boolean value it should be <code>Glib.Variant.new_boolean(True)</code>, and so on, see <link href="http://developer.gnome.org/glib/unstable/glib-GVariant.html">here</link> for a complete list)
ko: 메서드 변수 부분은 다음과 같습니다. 이름, 매개변수 형식(우리 같은 경우는 문자열입니다. 문자 의미에 대한 완전한 내용은 <link href="http://developer.gnome.org/glib/unstable/glib-GVariantType.html">여기</link> )에 있습니다), 초기 상태(이 경우 'line' 입니다. <code>True</code> 부울린 값의 경우는 <code>Glib.Variant.new_boolean(True)</code>여야 합니다. 완전한 내용은 <link href="http://developer.gnome.org/glib/unstable/glib-GVariant.html">이 부분</link> 참고)를 다룹니다.

note: (itstool) path: section/p
en: After creating the stateful SimpleAction we connect it to the callback function and we add it to the window (or the application, if it is the case), as before:
ko: 앞에서와 마찬가지로 상태가 들어간 SimpleAction을 만든 다음 콜백 함수로 연결하고 창(또는 지금 같은 경우는 프로그램)에 추가하겠습니다:

note: (itstool) path: section/title
en: Complete XML UI file for this example
ko: 이 예제의 완전한 XML UI 파일

note: (itstool) path: section/title
en: Complete Python file for this example
ko: 이 예제의 완전한 파이썬 파일

note: (itstool) path: section/title
en: Mnemonics and Accelerators
ko: 접근 키와 단축키

note: (itstool) path: section/p
en: Labels may contain mnemonics. Mnemonics are underlined characters in the label, used for keyboard navigation. Mnemonics are created by placing an underscore before the mnemonic character. For example "_File" instead of just "File" in the menubar.ui label attribute.
ko: 레이블에는 접근 키가 들어갈 수 있습니다. 접근 키는 키보드로 탐색할 때 활용하는 레이블에 밑줄이 들어간 문자입니다. 접근 키는 접근키 문자 앞에 밑줄을 넣어 만듭니다. 예를 들어 menubar.ui 레이블 속성에서 "File" 대신 "_File"을 넣습니다.

note: (itstool) path: section/p
en: The mnemonics are visible when you press the <key>Alt</key> key. Pressing <keyseq><key>Alt</key><key>F</key></keyseq> will open the <gui>File</gui> menu.
ko: 접근키는 <key>Alt</key> 키를 누르면 나타납니다. <keyseq><key>Alt</key><key>F</key></keyseq> 키를 누르면 <gui>파일</gui> 메뉴가 나타납니다.

note: (itstool) path: section/p
en: Accelerators can be explicitly added in the UI definitions. For example, it is common to be able to quit an application by pressing <keyseq><key>Ctrl</key><key>Q</key></keyseq> or to save a file by pressing <keyseq><key>Ctrl</key><key>S</key></keyseq>. To add an accelerator to the UI definition, you simply need add an "accel" attribute to the item.
ko: 가속키는 UI 정의에 분명하게 추가할 수 있습니다. 예를 들어 일반적으로 프로그램을 끝내는 동작은 <keyseq><key>Ctrl</key><key>Q</key></keyseq> 키를 눌러 진행할 수 있고, 또는 파일을 저장하는 동작은 <keyseq><key>Ctrl</key><key>S</key></keyseq> 키를 눌러 진행할 수 있습니다. UI 정의에 가속키를 추가하려면 간단하게 항목의 "accel" 속성 값을 추가하면 됩니다.

note: (itstool) path: section/p
en: <code mime="application/xml">&lt;attribute name="accel"&gt;&amp;lt;Primary&amp;gt;q&lt;/attribute&gt;</code> will create the <keyseq><key>Ctrl</key><key>Q</key></keyseq> sequence when added to the <code>Quit</code> label item. Here, "Primary" refers to the <key>Ctrl</key> key on a PC or the <key>⌘</key> key on a Mac.
ko: <code mime="application/xml">&lt;attribute name="accel"&gt;&amp;lt;Primary&amp;gt;q&lt;/attribute&gt;</code> 구문은 <code>Quit</code> 레이블 항목에 추가할 <keyseq><key>Ctrl</key><key>Q</key></keyseq> 키 조합 입력을 만듭니다. 여기서, "Primary"는 PC의 <key>Ctrl</key>키 또는 맥의 <key>⌘</key> 키를 따릅니다.

note: (itstool) path: section/title
en: Translatable strings
ko: 번역할 문자열

note: (itstool) path: section/p
en: Since GNOME applications are being translated into <link href="http://l10n.gnome.org/languages/">many languages</link>, it is important that the strings in your application are translatable. To make a label translatable, simple set <code>translatable="yes"</code>:
ko: 그놈 프로그램은 <link href="http://l10n.gnome.org/languages/">다양한 언어</link>로 번역하기에 프로그램 문자열을 번역할 수 있게 만들어 두는게 중요합니다. 레이블을 번역할 수 있게 하려면 간단히 <code>translatable="yes"</code>를 설정하십시오:

note: (itstool) path: item/p
en: Now we will create the .vala file and use GtkBuilder to import the <file>menubar.ui</file> we just created.
ko: 이제 .vala 파일을 만들고 방금 추가한 <file>menubar.ui</file> 파일을 GtkBuilder를 사용하여 임포팅하겠습니다.

note: (itstool) path: section/p
en: Now, compile the vala file, and run it. The application should look like the picture at the top of this page.
ko: 이제 vala 파일을 컴파일하고 실행하십시오. 프로그램은 페이지 상단의 사진과 같은 모습이 나타납니다.

note: (itstool) path: section/p
en: Following this pattern, you can now add a <code>Copy</code> and a <code>Paste</code> item to the <code>Edit</code> submenu, and an <code>About</code> item to the <code>Help</code> submenu. We will hold off on adding items to the <link xref="menubar.vala#choices">Choices submenu</link> until further in the tutorial.
ko: 이 방식을 따라 <code>편집</code> 하위 메뉴로 <code>복사</code> 와 <code>붙여넣기</code> 를 추가하고, <code>Help</code> 하위 메뉴에 <code>정보</code>를 추가할 수 있습니다. 다음 따라하기 지침을 진행할 때까지 <link xref="menubar.vala#choices">선택 하위 메뉴</link>로의 항목 추가를 보류하겠습니다.

note: (itstool) path: note/p
en: You do not need to recompile the vala program if you only made changes to the UI file. Just run your previously compiled application, and the UI changes will be reflected.
ko: UI 파일만 바꾸었다면 vala 프로그램을 다시 컴파일할 필요는 없습니다. 그냥 이전에 컴파일한 프로그램을 실행만 하시면 사용자 인터페이스를 반영합니다.

note: (itstool) path: section/p
en: This is a three step process.
ko: 세 단계로 이루어집니다.

note: (itstool) path: item/p
en: First we create the ActionEntry array in the MyApplication class. An ActionEntry consists of:
ko: 우선 MyApplication 클래스에 ActionEntry 배열을 만들겠습니다. ActionEntry 구성은 다음과 같습니다:

note: (itstool) path: item/p
en: the "action name" (mandatory)
ko: "동작 이름"(필수)

note: (itstool) path: item/p
en: the callback function to connect to the "activate" signal of the action (if applicable)
ko: 동작의 "activate" 시그널에 연결하는 콜백 함수(가능하다면)

note: (itstool) path: item/p
en: the type of the parameter that must be passed to the activate function for the action (if applicable)
ko: 동작에 대한 활성화 함수로 전달할 매개변수 형식(가능하다면)

note: (itstool) path: item/p
en: the initial state for this action (if applicable)
ko: 동작의 초기 상태(가능하다면)

note: (itstool) path: item/p
en: the callback to connect to "change-state" signal (if applicable)
ko: "change-state" 시그널에 연결할 콜백 함수(가능하다면)

note: (itstool) path: item/p
en: Second, we create the callback functions the actions are connected to.
ko: 두번째로 연결할 동작의 콜백 함수를 만들겠습니다.

note: (itstool) path: item/p
en: And lastly, we connect the menu items to the actions in the XML file by adding the "action" attribute:
ko: 마지막으로, "action" 속성을 추가하여 XML 파일의 동작에 메뉴 항목을 연결하겠습니다:

note: (itstool) path: section/p
en: Lines 30 to 80 inclusive of the <link xref="menubar.vala#xml-code"/> demonstrate the XML code used to create the UI for <gui>Choices</gui> menu.
ko: 30줄부터 80줄 까지 <link xref="menubar.vala#xml-code"/>가 들어간 부분에서 <gui>선택</gui> 메뉴 사용자 인터페이스를 만드는 XML 코드를 시연하고 있습니다.

note: (itstool) path: section/p
en: The complete example files contain both application actions and window applications. The window actions are the ones usually included in the <link xref="gmenu.vala">application menu</link> also. It is not good practice to include window actions in the application menu. For demonstration purposes, the complete example files which follow include XML in the UI file which creates the application menu which includes a "New" and "Open" item, and these are hooked up to the same actions as the menubar items of the same name.
ko: 완전한 예제 파일에는 프로그램 동작과 창 프로그램이 들어있습니다. 창 동작은 보통 <link xref="gmenu.vala">프로그램 메뉴</link>에도 들어있습니다. 창 동작을 프로그램 메뉴에 넣는건 별로 좋은 습관이 아닙니다. 시연 목적으로 "New"와 "Open" 항목이 들어간 프로그램 메뉴를 만드는 UI 파일에 들어간 XML의 내용을 따르며, 동일한 이름을 지닌 메뉴 표시줄 항목 처럼 동일한 동작을 실행합니다.

note: (itstool) path: section/title
en: Complete Vala file for this example
ko: 이 예제에 대한 완전한 Vala 파일입니다

note: (itstool) path: section/title
en: Mnemonics
ko: 접근 키

note: (itstool) path: section/title
en: Accelerators
ko: 가속키

note: (itstool) path: info/desc
en: A widget that shows a menu when clicked on
ko: 누르면 메뉴를 보여주는 위젯입니다

note: (itstool) path: page/p
en: The GtkMenuButton widget is used to display a menu when clicked on. This menu can be provided either as a GtkMenu, or an abstract GMenuModel. The GtkMenuButton widget can hold any valid child widget. That is, it can hold almost any other standard GtkWidget. The most commonly used child is the provided GtkArrow.
ko: GtkMenuButton 위젯은 눌렀을 때 메뉴를 띄울 목적으로 활용합니다. 이 메뉴는 GtkMenu로 또는 GMenuModel로도 제공합니다. GtkMenuButton 위젯은 제대로 된 하위 위젯을 지니고 있을 수 있습니다. 즉, GtkMenuButton으로 대부분의 다른 표준 GtkWidget을 붙들어둘 수 있습니다. 가장 널리 활용하는 하위 요소는 GtkArrow입니다.

note: (itstool) path: note/p
en: You need to be running GNOME 3.6 or later for the MenuButton to work.
ko: MenuButton을 동작하게 하려면 그놈 3.6 이상이 필요합니다.

note: (itstool) path: note/p
en: You need to be running GNOME 3.6 for the MenuButton to work.
ko: MenuButton을 동작하게 하려면 그놈 3.6이 필요합니다.

note: (itstool) path: section/title
en: Useful methods for a MenuButton widget
ko: MenuButton 위젯에 쓸만한 메서드

note: (itstool) path: section/p
en: In line 33 the signal <code>"activate"</code> from the action <code>about_action</code> is connected to the callback function <code>about_callback()</code> using <code><var>action</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. See <link xref="signals-callbacks.py"/> for a more detailed explanation.
ko: 33번째 줄에서 <code>"activate"</code> 시그널은 <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code> 함수로  <code>about_callback()</code> 콜백 함수에 연결했습니다. 더 자세한 설명은 <link xref="signals-callbacks.py"/>를 참조하십시오.

note: (itstool) path: section/p
en: The positioning of the menu is determined by the "direction" property of the menu button and the "halign" or "valign" properties of the menu. For example, when the direction is <code>Gtk.ArrowType.DOWN</code> (other option: <code>UP</code>) and the horizontal alignment is <code>Gtk.Align.START</code> (other options: <code>CENTER</code> and <code>END</code>), the menu will be positioned below the button, with the starting edge (depending on the text direction) of the menu aligned with the starting edge of the button. If there is not enough space below the button, the menu is popped up above the button instead. If the alignment would move part of the menu offscreen, it is 'pushed in'.
ko: 메뉴 배치는 메뉴 단추의 "direction" 속성과 메뉴의 "halign" 속성 또는  "valign" 속성으로 결정합니다. 예를 들어 direction 값이 <code>Gtk.ArrowType.DOWN</code>(다른 옵션: <code>UP</code>)이고, 수평 정렬을 <code>Gtk.Align.START</code>로(다른 옵션: <code>CENTER</code>, <code>END</code>) 했다면 메뉴는, 시작 모서리(텍스트 방향에 따라)를 따라 정렬한 메뉴의 시작 모서리로 단추 아래에 들어갑니다. 단추 아래에 공간이 충분치 않다면 단추 위로 대신 메뉴를 띄웁니다. 정렬 상태가 메뉴 바깥 부분을 움직인다면 '눌러넣은' 상태입니다.

note: (itstool) path: section/p
en: In the case of vertical alignment, the possible ArrowType directions are <code>LEFT</code> and <code>RIGHT</code> and the vertical alignment is again <code>START</code>, <code>CENTER</code> or <code>END</code>.
ko: 수직으로 정렬하는 경우 적용할 수 있는 ArrowType 방향은  <code>LEFT</code>와 <code>RIGHT</code> 이며, <code>START</code>, <code>CENTER</code>, <code>END</code> 중 한 가지 방식으로 수직 정렬합니다.나입니다.

note: (itstool) path: section/p
en: <code>set_align_widget(alignment)</code> and <code>set_direction(direction)</code> can be used to set these properties.
ko: 이 속성을 설정할 때 <code>set_align_widget(alignment)</code> 메서드와 <code>set_direction(direction)</code> 메서드를 사용할 수 있습니다.

[ctx: text]
note: (itstool) path: info/title
en: Message board (C)
ko: 게시판 (C)

note: (itstool) path: info/desc
en: A simple program using WebKitGTK+ and the DOM.
ko: WebKitGTK+와 DOM을 사용한 간단한 프로그램.

note: (itstool) path: page/title
en: Message board
ko: 게시판

note: (itstool) path: item/p
en: How to display a web page with WebKit.
ko: WebKit으로 웹 페이지를 표시합니다.

note: (itstool) path: item/p
en: How to manipulate the contents of a web page using WebKit's DOM functions.
ko: WebKit의 DOM 함수로 웹 페이지 내용을 다룹니다.

note: (itstool) path: synopsis/p
en: This tutorial assumes you are familiar with the C programming language and have a basic understanding of GTK+, including how to create and place widgets and how to connect callback functions to signals. See <link xref="image-viewer.c"/> to learn the basics of GTK+.
ko: 이 따라하기 예제에서는 독자 여러분이 C 프로그래밍 언어에 익숙하며, 위젯을 어떻게 만들어 두고, 콜백 함수를 시그널에 어떻게 연결하는지에 대해  GTK+를 기본적으로 이해하고 있다고 간주합니다. GTK+ 기본을 배우려면 <link xref="image-viewer.c"/>를 참고하십시오.

note: (itstool) path: section/p
en: The GNOME platform includes WebKitGTK+, built on top of the powerful WebKit HTML framework. WebKit is used throughout GNOME, not just to view web pages on the Internet, but also to create rich user interfaces that can be easily styled with CSS.
ko: 그놈 플랫폼에는 강력한 웹킷 HTML 프레임워크를 바탕으로 만든 WebKitGTK+가 있습니다. WebKit은 그놈 전반적으로 활용하며, 인터넷의 웹 페이지를 보기만 하는 목적으로 쓰는게 아니라, CSS로 쉽게 스타일을 지정할 수 있는 리치 사용자 인터페이스를 만들 때도 사용합니다.

note: (itstool) path: section/p
en: In this tutorial, you will create a simple message board using WebKit. The message board will allow you to enter some text and have it added to a list of messages in HTML. Before you begin, you need to set up a project in Anjuta.
ko: 이 따라하기 지침에서는 WebKit으로 간단한 게시판을 만들어보겠습니다. 게시판에서는 일부 텍스트를 입력할 수 있으며  HTML 메시지 목록을 추가할 수 있습니다. 시작하기 전에 Anjuta에서 프로젝트를 설정해야합니다.

note: (itstool) path: item/p
en: In Anjuta, click <guiseq><gui>File</gui><gui>New</gui> <gui>Project</gui></guiseq> to open the new project assistant.
ko: 안주타에서  <guiseq><gui>파일</gui><gui>새로 만들기</gui> <gui>프로젝트</gui></guiseq>를 눌러 새 프로젝트 도우미를 여십시오.

note: (itstool) path: item/p
en: Select <gui>GTK+ (simple)</gui> on the <gui>C</gui> tab, and click <gui>Continue</gui>.
ko: <gui>C</gui> 탭에서 <gui>GTK+ (단순)</gui>을 선택하고, <gui>계속</gui>을 누르십시오.

note: (itstool) path: item/p
en: Fill out your details on the <gui>Basic information</gui> page. Use <input>message-board</input> for the project name. Click <gui>Continue</gui>.
ko: <gui>기본 정보</gui> 페이지에 자세한 내용을 적어나가심시오. 프로젝트 이름은 <input>message-board</input>라고 하십시오. <gui>계속</gui>을 누르십시오.

note: (itstool) path: item/p
en: Disable the <gui>Use GtkBuilder for user interface</gui> option as this tutorial builds the user-interface manually.
ko: 따라하기 지침을 통해 사용자 인터페이스를 직접 만들 예정이므로 <gui>사용자 인터페이스에 GtkBuilder 사용</gui> 설정을 끄십시오.

note: (itstool) path: item/p
en: You need to tell Anjuta you're using WebKitGTK+ on this project. On the <gui>Project options</gui> page, select <gui>Configure external packages</gui>. Click <gui>Continue</gui>. On the <gui>Configure external packages</gui> page, check <gui>webkitgtk-3.0</gui>.
ko: 안주타 프로그램에서 프로젝트에 WebkitGTK+를 사용한다고 알려야합니다. <gui>프로젝트 옵션</gui> 페이지에서, <gui>외부 패키지 설정</gui>을 선택하십시오. <gui>계속</gui>을 누르십시오. <gui>외부 패키지 설정</gui> 페이지에서 <gui>webkitgtk-3.0</gui>을 선택하십시오.

note: (itstool) path: section/p
en: After you finish the new project assistant, open the file <file>src/main.c</file> from either the <gui>Project</gui> or the <gui>File</gui> tab. Anjuta will have filled this in with some basic GTK+ code from its templates. Since you are creating a WebKit project, you first need to include the WebKit headers. After the line that includes <code>gtk/gtk.h</code>, add the following line:
ko: 새 프로젝트 도우미를 끝내고 나면 <gui>프로젝트</gui>탭 또는 the <gui>파일</gui>탭에서 <file>src/main.c</file> 파일을 여십시오 안주타에서는 서식에 일부 기본 GTK+ 코드를 채워넣습니다. WebKit 프로젝트를 만들고 있으니 WebKit 레더를 추가해야합니다. <code>gtk/gtk.h</code>줄 다음에 다음 줄을 추가하십시오:

note: (itstool) path: section/p
en: Verify that everything works by building what you have so far. Click <guiseq><gui>Build</gui><gui>Build Project</gui></guiseq> or just press <keyseq><key>Shift</key><key>F7</key></keyseq>. The first time you build, you will be asked for some configure options. Just accept the defaults and click <gui>Execute</gui>.
ko: 여태껏 작성해오던 코드로 모든 부분이 동작하는지 확인하십시오. <guiseq><gui>빌드</gui><gui>프로젝트 빌드</gui></guiseq> 를 누르거나 그냥 <keyseq><key>Shift</key><key>F7</key></keyseq>키를 누르십시오. 처음 빌드할 때는 몇가지 설정 옵션을 물어봅니다. 그냥 기본 값으로 설정하고 <gui>실행</gui>을 누르십시오.

note: (itstool) path: section/p
en: You should now be able to run the program. Click <guiseq> <gui>Run</gui><gui>Execute</gui></guiseq> or just press <key>F3</key>. You should see an empty window appear.
ko: 이제 프로그램을 실행할 수 있어야합니다. <guiseq> <gui>실행</gui><gui>실행</gui></guiseq>을 누르든지 그냥 <key>F3</key> 키를 누르십시오. 빈 창이 나타납니다.

note: (itstool) path: section/title
en: Lay out your window and web view
ko: 창과 웹 뷰 배치

note: (itstool) path: section/p
en: Now that you can show a window, it's time to start working with WebKit. For this tutorial, you'll create a text entry and a web view and pack them both into a window. Find the function <code>create_window</code> and replace it with the following:
ko: 이제 창을 보여줄 수 있으니 WebKit을 다룰 시간입니다. 이 따라하기 안내에 따라 텍스트 항목과 웹 뷰를 만들고 이 요소를 창에 추가합니다. <code>create_window</code>  함수를 찾아 다음 코드로 바꾸십시오:

note: (itstool) path: section/p
en: You first create a <code>GtkWindow</code> object and set its title and default size. You also connect the <code>gtk_main_quit</code> function to the <code>delete-event</code> signal. The <code>delete-event</code> signal is emitted when the window is closed. The <code>gtk_main_quit</code> function is part of GTK, and it quits the application.
ko: 우선 <code>GtkWindow</code> 객체를 만들고 제목과 기본 크기를 설정합니다. <code>gtk_main_quit</code> 함수를 <code>delete-event</code> 시그널에 연결하기도 합니다. <code>delete-event</code>시그널은 창을 닫을때 방출합니다. <code>gtk_main_quit</code> 함수는 GTK의 알부이며, 프로그램을 끝냅니다.

note: (itstool) path: section/p
en: You then create a vertical box and add it to the window. A window can only hold a single child widget, so you need to use a box to add multiple widgets. The second argument to <code>gtk_box_new</code> sets the amount of padding (in pixels) between each child, and the next line puts a six-pixel border around the entire thing.
ko: 이제 수직 박스를 만들어 창에 추가했습니다. 창은 오직 단일 하위 위젯을 가질 수 있기 때문에 여러 위젯을 추가하려면 박스를 사용해야합니다. <code>gtk_box_new</code>의 두번째 인자는 각 하위 위젯의 (픽셀 단위)간격을 설정하고 다음 줄에는 전체에 6 픽셀 두께의 테두리를 넣습니다.

note: (itstool) path: section/p
en: You next create a <code>GtkEntry</code> object and pack it into the box. The third and fourth arguments to <code>gtk_box_pack_start</code> specify that the entry shouldn't take up any extra space the box has available. The fourth argument is the amount of padding you want around the entry. In this case, you set the padding to zero, because you're allowing the box to handle all the padding.
ko: 다음 <code>GtkEntry</code> 객체를 만들어 박스에 넣으십시오. <code>gtk_box_pack_start</code>의 세번째, 네번째 인자는 박스에 추가 여유 공간이 있을때, 항목이 차지하지 않도록 설정합니다. 네번째 인저에서는 항목 주변의 여백 공간입니다. 지금의 경우 여백 공간을 0으로 설정했는데 박스에서 내부 여백을 처리할 수 있기 때문입니다.

note: (itstool) path: section/p
en: Before you add a web view, you have to create a scrolled window to put it inside of. The scrolled window will place scrollbars on the right and bottom when necessary, and prevent your web view from filling your entire screen. This time, you pass <code>TRUE</code> and <code>TRUE</code> to <code>gtk_box_pack_start</code> to allow the scrolled window (and thus, the web view) to use any extra space available in the box.
ko: 웹 뷰를 추가하기 전에 웹 뷰를 넣을 스크롤 뷰를 우선 넣어야합니다. 스크롤 뷰는 필요한 경우 스크롤 표시줄을 오른편과 하단에 두고  웹 뷰가 화면 전체를 차지하지 않게 막아줍니다.  여기서는 <code>gtk_box_pack_start</code>에 <code>TRUE</code>와 <code>TRUE</code>를 넣어 스크롤 창(웹 뷰!)에서 박스의 추가 여분 공간을 사용합니다.

note: (itstool) path: section/p
en: Finally, you create a <code>WebKitWebView</code> and add it to the scrolled window. Then load a very basic HTML page into the web view by calling <code>webkit_web_view_load_string</code> with the following arguments:
ko: 마지막으로 <code>WebKitWebView</code>를 만들고 스크롤 창에 추가했습니다. 그리고 <code>webkit_web_view_load_string</code> 함수와 다음 인자를 통해 매우 기본적인 HTML페이지를 웹 뷰에 불러다놓았습니다:

note: (itstool) path: item/p
en: The view itself. Because <code>view</code> is typed as a <code>GtkWidget*</code>, you have to use <code>WEBKIT_WEB_VIEW</code> to safely cast the object.
ko: 뷰 자체입니다.  <code>view</code> 는 <code>GtkWidget*</code> 형식이므로 객체를 안전하게 캐스팅하려면 <code>WEBKIT_WEB_VIEW</code> 를 사용해야합니다.

note: (itstool) path: item/p
en: The simplest HTML file you could possibly write.
ko: 여러분이 작성할 수 있는 간단한 HTML 파일입니다.

note: (itstool) path: item/p
en: The MIME type of the content you provided. In this case, you're using plain HTML.
ko: 여러분이 제공한 컨텐트의 MIME 형식입니다. 지금 같은 경우는 플레인 HTML을 사용중입니다.

note: (itstool) path: item/p
en: The character encoding of the content you provided. Although you only used ASCII characters, it's a good idea to specify UTF-8. UTF-8 is used as the default encoding throughout the GNOME platform.
ko: 여러분이 제공한 내용의 문자 인코딩 방식입니다. ASCII 문자만 활용했다 히더라도 UTF-8로 지정하시는게 좋습니다. UTF-8은 그놈 플랫폼 이곳저곳에서 기본 인코딩으로 활용합니다.

note: (itstool) path: item/p
en: The base URI. You don't need it in this simple example, but you might want to provide a <sys>file:</sys> URI if you add images or other features where you want to use relative URI references.
ko: 기본 URI. 이 간단한 예제에서는 필요하지 않습니다만, 그림을 추가하거나 상대 URI 참고 경로를 추가한다면 <sys>file:</sys> URI를 제공하는게 좋습니다.

note: (itstool) path: note/p
en: Every time you add a widget, you have to call <code>gtk_widget_show</code> on it for it to be visible. If you call <code>gtk_widget_show_all</code> on a container widget like a <code>GtkBox</code>, GTK+ will automatically show all the widgets inside the container, to any depth. Sometimes you don't want to call <code>gtk_widget_show_all</code>, such as when you want to dynamically hide and show some widgets in response to events.
ko: 위젯을 추가할 때마다 위젯이 나타나게 <code>gtk_widget_show</code>  함수를 호출해야합니다. <code>GtkBox</code>와 같은 컨테이너 위젯에서 <code>gtk_widget_show_all</code>  함수를 호출하면, GTK+에서 알아서 컨테이너의 어떤 깊은 곳에 있든 다 끄집어내어 자동으로 보여줍니다. 때로는 이벤트에 대한 응답으로 위젯을 동적으로 숨기거나 보이려고 하는 그런 경우에 <code>gtk_widget_show_all</code>을 호출하고 싶지 않을 때도 있습니다.

note: (itstool) path: section/p
en: Finally, you have to call <code>gtk_widget_show_all</code> on the box. Otherwise, none of the widgets you created will be visible. (The window is shown in the <code>main</code> function with <code>gtk_widget_show</code>.)
ko: 마지막으로 박스의 <code>gtk_widget_show_all</code>를 호출해야 합니다. 그렇지 않으면 만들어 둔 어떤 위젯도 볼 수 없습니다(창은 <code>main</code> 함수의 <code>gtk_widget_show</code> 호출로 나타납니다.)

note: (itstool) path: section/p
en: Build and run the message board again. You should see a window with a text entry and a web view. It doesn't do anything yet because the text entry and the web view don't know anything about each other.
ko: 게시판을 다시 빌드하고 실행하십시오. 텍스트 항목과 웹 뷰가 나타납니다. 텍스트 항목과 웹 뷰는 서로를 알지 못하기 대문에 어떤 일도 일어나지 않습니다.

note: (itstool) path: section/title
en: Hook up signals
ko: 시그널 걸어두기

note: (itstool) path: section/p
en: Now you want to make the message board actually <em>do</em> something when you enter text into the text entry. To do this, connect a callback function to the <code>activate</code> signal of <code>entry</code>. GTK+ emits the <code>activate</code> signal whenever the user presses <key>Enter</key> in the entry. Add the following into <code>create_window</code>, anywhere after both <code>entry</code> and <code>view</code> have been defined:
ko: 이제 텍스트 항목에 텍스트를 입력했을때 실제로 게시판에서 어떤 <em>일</em>을 일어나게 하려고 합니다. 콜백 함수를 <code>entry</code>의 <code>activate</code> 시그널로 연결합니다. GTK+는 사용자가 항목 위치에서 <key>Enter</key> 키를 누를 때마다 <code>activate</code> 시그널을 내보냅니다. <code>entry</code>와 <code>view</code>를 정의한 어디에든 다음 코드를 <code>create_window</code>에 넣으십시오:

note: (itstool) path: section/p
en: You then have to actually define <code>entry_activate_cb</code>. Define it as follows, anywhere above <code>create_window</code>:
ko: 실제로 <code>entry_activate_cb</code>를 정의해야합니다. <code>create_window</code> 위 어디에든 다음 처럼 정의하십시오:

note: (itstool) path: section/p
en: The first thing you do is get a <code>WebKitDOMDocument</code> object that represents the HTML document displayed in <code>view</code>. The DOM classes and methods in WebKit allow you to inspect and manipulate the HTML document, and work very similarly to the DOM APIs you might already know from JavaScript.
ko: 여러분은 우선 <code>view</code>에 HTML 문서를 나타내는 <code>WebKitDOMDocument</code>를 가져와야 합니다. 웹킷 DOM 클래스와 메서드는 HTML을 살펴보고 다룰 수 있게 하며, JavaScript를 통해 이미 알고 있는 DOM API와 매우 유사하게 다룰 수 있습니다.

note: (itstool) path: section/p
en: Once you have the document, you want to get the <code>body</code> element so that you can add <code>div</code> elements to it. The <code>webkit_dom_document_query_selector</code> function lets you find an element in the document using CSS selectors. This keeps you from having to write tedious loops to traverse the document.
ko: 문서를 가져온 후에는 <code>body</code> 구성요소를 가져와서 <code>div</code> 구성요소를 넣을 수 있게 해야합니다. <code>webkit_dom_document_query_selector</code> 함수는 CSS 선택자로 문서의 구성 요소를 찾게 해줍니다. 이 방식을 통해 문서를 돌아볼 때 짜증나는 반복문을 작성하지 않게 해줍니다.

note: (itstool) path: section/p
en: Next, you create a new <code>div</code> element to hold the message. Every element you create has to be attached to a document, so the function to create an element takes the <code>WebKitDOMDocument</code> as its first arguments. You then set the text content of the element to the contents of the text entry. Because <code>gtk_entry_get_text</code> returns a <code>const gchar*</code>, you don't have to free the result.
ko: 다음, 메시지를 넣어둘 새 <code>div</code> 구성요소를 만듭니다. 여러분이 만든 모든 구성 요소는 문서에 붙으므로, 구성 요소를 만드는 함수의 첫번째 인자로 <code>WebKitDOMDocument</code>를 갖습니다. 그 다음 텍스트 항목의 컨텐트로 구성 요소의 텍스트를 설정합니다. <code>gtk_entry_get_text</code> 에서 <code>const gchar*</code>를 반환하기에, 결과를 굳이 해제하지 않아도 됩니다.

note: (itstool) path: section/p
en: Finally, you append the new <code>div</code> element to the body and clear out the text entry so you can type something new. Build and run the program again and test it for yourself.
ko: 마지막으로 <code>div</code> 구성요소를 body에 추가하고 텍스트 항목을 지워서 새 내용을 입력할 수 있게 하십시오.프로그램을 다시 빌드하고 실행한 후 여러분 자신이 직접 테스트해보십시오.

note: (itstool) path: section/title
en: Make it look better with CSS
ko: CSS로 더 멋지게 만들기

note: (itstool) path: section/p
en: At this point, your program is completely functional, but not very pretty. You can style the message display with CSS, just like you can with any other HTML page. There are many ways you could attach some CSS to the page: You could add it in the initial HTML document. You could inline it in the <code>style</code> attribute of the <code>div</code> elements. You could even programmatically construct it using the DOM APIs.
ko: 여기서 프로그램의 기능은 완벽하게 동작하지만 썩 매력있는 편은 아닙니다. 화면에 나타나는 메시지를 다른 HTML페이지를 다루어왔던 것처럼 CSS로 장식할 수 있습니다. 일부 CSS를 페이지에 붙여넣는 방법에는 여러가지가 있는데, 처음 HTML 문서에 추가하는 방법, <code>div</code> 구성 요소의 <code>style</code> 속성에 넣는 방법, DOM API로 프로그래밍 방식으로 넣는 방법이 있습니다.

note: (itstool) path: section/p
en: In this tutorial, you'll attach the CSS using the <code>user-stylesheet-uri</code> property of the <code>WebKitWebSetting</code> object attached to your web view. In a more complete application, you would want to save and load your HTML file. Keeping the style information outside the actual HTML means that you can change the styling completely within your application, without having to change users' files. You would normally just install a file along with your application, but just to keep everything in one file for this demo, we'll use a trick called a data URI. First, define the CSS as a static string near the top of your file.
ko: 이 따라하기 지침에서는 웹 뷰에 붙은 <code>WebKitWebSetting</code> 객체의 <code>user-stylesheet-uri</code> 속성으로 CSS를 붙입니다. 좀 더 완벽한 프로그램에서는 HTML 파일을 저장하고 불러오고 싶을 수도 있습니다. HTML의 실제 스타일 정보를 외부에서 유지한다는건, 굳이 사용자 파일을 건드리지 않아도 프로그램에서 완벽하게 스타일을 바꿀 수 있다는 의미가 되겠습니다.  보통 프로그램과 해당 파일을 같이 설치해야 하겠지만 이 시연 프로그램에서는 하나의 파일에 모두 담아두고 데이터 URI로 꼼수를 쓰겠습니다. 우선 파일 상단 부분에 정적 CSS를 정의하십시오.

note: (itstool) path: section/p
en: All you have in this example are <code>div</code> elements inside a <code>body</code> element. If you created more complicated HTML, you could use whatever CSS is necessary. In fact, if you're comfortable with CSS, you should trying changing this to something you like better.
ko: 이 예제에 들어간 모든 내용은 <code>body</code> 구성 요소의 <code>div</code> 구성요소입니다. 더 복잡한 HTML을 만든다면 어떤 CSS든 필요합니다. 사실, CSS가 편하다면 여러분이 더 좋아하는 방식대로, 이 코드를 바꿔보시는게 좋습니다.

note: (itstool) path: section/p
en: To apply the CSS, you set the <code>user-stylesheet-uri</code> in the <code>create_window</code> function, anywhere after <code>view</code> has already been defined.
ko: CSS를 적용하려면, <code>view</code> 를 설정한 이후 어디든 <code>create_window</code> 함수에서 <code>user-stylesheet-uri</code>를 설정하십시오.

note: (itstool) path: section/p
en: Also, make sure to add variable declarations for <code>tmp</code> and <code>css</code> to the top of <code>create_window</code>.
ko: 또한 <code>create_window</code> 상단에 <code>tmp</code> 와 <code>css</code> 변수 선언을 추가했는지 확인하십시오.

note: (itstool) path: section/p
en: A data URI starts with <sys>data:</sys> and some information about the content type and how the data is encoded. The actual data follows after a comma, in this case encoded in Base64. Unlike other URI schemes like <sys>http:</sys>, <sys>ftp:</sys>, and <sys>file:</sys>, the <sys>data:</sys> URI scheme doesn't specify where to find a file to load. Rather, it gives the entire contents of the file.
ko: <sys>data:</sys>로 시작하는 데이터 URI와 컨텐트 형식 일부 정보, 데이터 인코딩 방식입니다. 실제 데이터는 콤마 뒤에 따라오는데 이 경우에는 Base64 방식으로 인코딩합니다. <sys>http:</sys>, <sys>ftp:</sys>, <sys>file:</sys> 같은 다른 URI 형식과는 다르게 URI 스킴에는 불러올 파일이 어디있는지 지정하지 않습니다. 대신 파일의 전체 내용을 제시해줍니다.

note: (itstool) path: section/p
en: The code above first encodes your CSS definitions in Base64, then combines that with a fixed string to create a data URI. The <code>g_strconcat</code> function can take any number of string arguments and concatenate them all together, so you have to pass <code>NULL</code> as the final argument so it knows when to stop. And don't forget to free those temporary strings after you set the stylesheet property.
ko: 위 코드는 우선 CSS 정의를 Base64 방식으로 인코딩한 다음 데이터 URI를 만드는 정적 문자열과 합칩니다. <code>g_strconcat</code> 함수에서는 여러 문자열 인자를 취하여 합칠 수 있으므로, 마지막 인자 값은 <code>NULL</code>로 주어 언제 문자열을 합치는 동작을 멈출 지 알려야합니다. 그리고 스타일 시트를 올바르게 설정하고 나면 잊지 마시고 임시 문자열에 대해 메모리 해제를 반드시 수행하십시오.

note: (itstool) path: section/p
en: Build and run the program again. It should now work exactly the same as at the end of the last section, except the messages will be nicely styled with a border and a subtle background gradient.
ko: 프로그램을 다시 빌드하고 실행하십시오. 테두리와 미묘한 백그라운드 그레디언트로 멋지게 장식할 메시지 부분을 제외하고는 섹션의 마지막 부분과 정확히 동일하게 동작합니다.

note: (itstool) path: section/title
en: Learn more
ko: 더 알아보기

note: (itstool) path: section/p
en: This tutorial showed you how to create a basic application using GTK+ and WebKit, including showing a document and manipulating its contents. To create a real application, you probably want to do a little bit more. Try adding features on your own. Here are a few ideas:
ko: 이 따라하기 지침에서는 GTK+와 웹킷으로 문서를 보여주고 내용을 다루는 기본적인 프로그램을 만드는 방법을 보여줍니다. 실제 프로그램을 만들려면, 프로그램에 좀 더 이것저것 붙여보고 싶을지도 모릅니다. 기능 추가는 여러분이 직접 해보시죠. 몇가지 아이디어를 드리겠습니다:

note: (itstool) path: item/p
en: If you're comfortable with CSS, try changing the style of the message display. CSS is easy to get started with, but increasingly more powerful. There is a wealth of CSS tutorials on the Internet, and just about everything you can do on the web, you can do in this application.
ko: CSS가 불편하다면 메시지 표시 방식을 바꿔보십시오. CSS는 시작하기 쉬우면서도 다루어 볼수록 점점 강력해집니다. 인터넷에는 다양한 CSS 따라하기 문서가 있으며, 웹에 할 수 있는 모든걸 이 프로그램에서 해볼 수 있습니다.

note: (itstool) path: item/p
en: Right now, you lose all your messages whenever you close the message board. Try saving the HTML contents after each post, and loading the saved file (if it exists) on startup.
ko: 바로 지금 게시판을 닫는다면 모든 메시지가 증발합니다. 각 게시물을 올린 다음 HTML 문서를 저장해보고 시작할 때 저장한 파일(있을 경우)을 불려와보십시오.

note: (itstool) path: item/p
en: If you keep your messages around for a long time, you'll start wondering when you posted them. Add a timestamp to each message when it's posted. You'll probably want to create some additional child <code>div</code> elements with different classes that you can style in the CSS.
ko: 메시지를 오랫동안 유지했다면 언제 게시했는지 궁금해하실겁니다. 각 메시지를 게시할 때 타임 스탬프를 추가하십시오. 아마도 CSS로 모양새를 갖출 수 있도록 다른 클래스 이름을 부여한 추가 하위 <code>div</code> 구성요소를 만들고 싶을 수도 있습니다.

note: (itstool) path: item/p
en: This program keeps messages around forever. Think about ways you could allow the user to delete messages. Perhaps you want messages to disappear automatically after they're too old, or after there are a certain number of messages before them. Or you could add a link in each message to delete it. You could even override the context menu when you right-click on a message. These features involve exploring WebKit's DOM API more.
ko: 이 프로그램은 메시지를 계속 유지합니다. 사용자가 메시지를 지울 수 있게 하는 방법을 생각해보시죠. 아마도 너무 오래됐거나, 일정 갯수가 넘어가면 자동으로 메시지를 사라지게 하고 싶을지도 모릅니다. 아니면 각 메시지에 삭제할 수 있는 링크를 달아둘 수 있습니다. 심지어 메시지에 마우스 단추를 올려두고 오른쪽 단추를 눌렀을 때 단축 메뉴를 띄울 수 있습니다. 이 기능을 구현하려면 웹킷 DOM API를 좀 더 찾아봐야 합니다.

note: (itstool) path: info/desc
en: A message window
ko: 메시지 창

note: (itstool) path: page/p
en: A modal message dialog which can cause the world to explode.
ko: 전 세계를 폭발하게 만들 수 있는 모달 메시지 대화상자입니다.

note: (itstool) path: note/p
en: To test out the application once it has started running, you can click on the "Message Dialog" tab that appears in the top menubar of the screen.
ko: 프로그램을 시작하고 나서 시험해보려면, 화면 상단에 메뉴 표시줄을 띄우는 “메시지 대화 상자” 탭을 눌러볼 수 있습니다.

[ctx: text]
note: (itstool) path: info/title
en: MessageDialog (JavaScript)
ko: MessageDialog(JavaScript)

note: (itstool) path: info/desc
en: A popup message attached to a window
ko: 창에 붙여 띄우는 메시지

note: (itstool) path: page/p
en: A MessageDialog is a modal message dialog, which means a popup that you have to respond to before you get back to what you were doing in the window that it's attached to. This one can cause the world to explode (or at least it says that it can). To make the popup appear when you run this sample, click on "Message" inside of its application menu -- that's the menu that appears when you click on an application's name in the upper-left screen corner, next to Activities.
ko: MessageDialog는 모달 메시지 대화상자인데, 대화상자가 붙어 어떤 일을 하던 창으로 돌아가려면 반드시 응답해야 하는 팝업입니다. 이렇게 해서 전세계를 폭발하게 할 수 있습니다(아니면 최소한 그럴 수 있다고 해두죠). 이 예제를 실행할 때 팝업을 나타내려면, 프로그램 메뉴의 “Message”를 누르십시오. 좌측 상단 화면 구석에 있는 현재 활동 옆 프로그램 이름을 누르면 나타나는 메뉴입니다.

note: (itstool) path: note/p
en: The difference between a MessageDialog and a <link xref="dialog.js">Dialog</link> is that a Dialog can contain whatever widgets and content you want to put in it, whereas a MessageDialog is just a convenient way to make popups appear with a basic message and buttons.
ko: MessageDialog와 <link xref="dialog.js">Dialog</link> 의 차이점은 Dialog는 어떤 위젯이든 넣고 여러분이 넣고 싶은 컨텐트를 넣을- 수 있습니다, 다만 MessageDialog는 기본 메시지와 단추로 팝업을 띄우는 편의 수단일 뿐입니다.

note: (itstool) path: note/p
en: Before we call _buildUI to create the window and the widgets inside it, we need to call _initMenus, which tells GNOME to create the menu. We can put the actual code for _initMenus after the code for _buildUI, since it doesn't matter what order we put them in so long as _initMenus is called first in _onStartup.
ko: 창을 만들고 위젯을 그 안에 넣으려 _buildUI를 호출할 수 있기 전, 그놈에 메뉴를 만들어주라고 지시하는 _initMenus를 호출해야합니다. _onStartup에서 _initMenus를 우선 호출하는 동안 어떤 순서로 두는지는 중요하지 않으니, _buildUI 코드 다음에 _initMenus의 실제 코드를 둘 수 있습니다.

note: (itstool) path: section/p
en: For this example, all that we have in the window the popup comes out of is a silly warning <link xref="label.js">Label</link>.
ko: 이 예제에서는 창에 모든걸 넣고, 저기에서 띄워줄 문장은 유치한 경고 <link xref="label.js">Label</link>입니다.

note: (itstool) path: section/title
en: Creating the application's menu
ko: 프로그램 메뉴 만들기

note: (itstool) path: section/p
en: Here, we build the <link xref="gmenu.js">GMenu</link> where we'll be putting the "Message" button which triggers the popup MessageDialog. The GMenu is the menu that appears when you click the application's name in the upper-left corner of the screen, next to the Activities menu. Our menu only has two options in it: Message, and Quit.
ko: 여기서 우리가 나중에 팝업 MessageDialog를 실행할 "Message" 단추를 두는 <link xref="gmenu.js">GMenu</link>를 만들겠습니다. GMenu는 화면의 좌측 상단, 현재 활동 옆에 프로그램 이름을 눌렀을 때 프로그램 이름을 나타내는 메뉴입니다. 우리가 쓰는 메뉴는 옵션을 Message, Quit 두 개만 두었습니다.

note: (itstool) path: section/title
en: Creating the MessageDialog
ko: MessageDialog 만들기

note: (itstool) path: section/p
en: To make our MessageDialog a popup attached to the main window, we set its modal property to true and set it to be "transient_for" _window. After that, we can set what kind of buttons it has and what kind of message it is (which determines what icon appears next to the message), and write out the text inside it, before connecting its "response" signal to the callback function which handles it.
ko: MessageDialog 팝업을 메인 창에 붙이려면, 모달 속성을 True로 설정하고 "transient_for" 창을 설정합니다. 다음 단추 종류를 설정하고 어떤 메시지를 보여줄지 설정(메시지 옆 아이콘 표시 종류를 결정)할 수 있으며, "response" 시그널을 처리할 콜백 함수에 연결하기 전에 텍스트를 넣을 수 있습니다.

note: (itstool) path: note/p
en: Here are some resources for making your own MessageDialogs:
ko: 여기에 MessageDialog를 만들 때 몇가지 참고할 자료가 있습니다:

note: (itstool) path: item/p
en: <link href="http://developer.gnome.org/gtk3/stable/GtkMessageDialog.html#GtkButtonsType">List of button types</link>
ko: <link href="http://developer.gnome.org/gtk3/stable/GtkMessageDialog.html#GtkButtonsType">단추 형식 목록</link>

note: (itstool) path: item/p
en: <link href="http://developer.gnome.org/gtk3/stable/GtkMessageDialog.html#GtkMessageType">List of message types</link>
ko: <link href="http://developer.gnome.org/gtk3/stable/GtkMessageDialog.html#GtkMessageType">메시지 형식 목록</link>

note: (itstool) path: section/p
en: This function takes two parameters, the MessageDialog and its response_id, both of which are automatically supplied (you don't have to manually pass them to it for it to work). Here we use a simple switch to change the "warning label"'s text, depending on which option you select. The DELETE_EVENT occurs if you press Escape to cancel the MessageDialog, instead of clicking OK or Cancel. Whatever you select, the popup is destroyed afterwards.
ko: 이 함수에는 MessageDialog와 response_id 두 매개변수가 있는데, 두 매개 변수 값은 자동으로 들어갑니다(동작하게 할 때 직접 넣을 필요는 없습니다). 여기서, 선택한 옵션에 따라 “warning label”의 텍스트를 바꾸는 간단한 스위치를 사용하겠습니다. DELETE_EVENT는 확인 또는 취소를 누르는 대신 MessageDialog 처리를 취소하려고 Escape 키를 누를 경우 발생합니다. 무얼 선택하든지간에 팝업은 나중에 해체됩니다.

note: (itstool) path: section/p
en: Finally, we create a new instance of the finished MessageDialogExample class, and set the application running.
ko: 마지막으로 작성을 끝낸 MessageDialogExample 클래스의 새 인스턴스를 만들고 프로그램 실행을 설정하겠습니다.

[ctx: text]
note: (itstool) path: info/title
en: MessageDialog (Python)
ko: MessageDialog(Python)

note: (itstool) path: page/p
en: A message dialog which prints messages on the terminal, depending on your choices.
ko: 선택에 따라 메시지를 터미널에 출력하는 메시지 대화 상자입니다.

note: (itstool) path: section/title
en: Useful methods for a MessageDialog widget
ko: MessageDialog 위젯에 쓸만한 메서드

note: (itstool) path: section/p
en: In line 18 the signal <code>"activate"</code> is connected to the callback function <code>message_cb()</code> using <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. See <link xref="signals-callbacks.py"/> for a more detailed explanation.
ko: 18번째 줄에서 <code>"activate"</code> 시그널은 <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code> 함수로  <code>message_cb()</code> 콜백 함수에 연결했습니다. 더 자세한 설명은 <link xref="signals-callbacks.py"/>를 참조하십시오.

note: (itstool) path: item/p
en: In the constructor of MessageDialog we could set flags as <code>Gtk.DialogFlags.DESTROY_WITH_PARENT</code> (to destroy the messagedialog window when its parent window is destroyed) or as <code>Gtk.DialogFlags.MODAL</code> (no interaction with other windows of the application).
ko: MessageDialog 생성자에서 <code>Gtk.DialogFlags.DESTROY_WITH_PARENT</code> 플래그(상위 창을 해체할 때 messagedialog 창을 해체) 또는 <code>Gtk.DialogFlags.MODAL</code> 플래그(프로그램의 다른 창과 동작하지 않음)을 설정할 수 있습니다.

note: (itstool) path: item/p
en: In the constructor of MessageDialog we could set type as any of <code>Gtk.MessageType.INFO, Gtk.MessageType.WARNING, Gtk.MessageType.QUESTION, Gtk.MessageType.ERROR, Gtk.MessageType.OTHER</code> depending on what type of message we want.
ko: MessageDialog 생성자에서 원하는 메시지 형식에 따라 <code>Gtk.MessageType.INFO, Gtk.MessageType.WARNING, Gtk.MessageType.QUESTION, Gtk.MessageType.ERROR, Gtk.MessageType.OTHER</code> 중 하나를 설정할 수 있습니다.

note: (itstool) path: item/p
en: In the constructor of MessageDialog we could set buttons as any of <code>Gtk.ButtonsType.NONE, Gtk.ButtonsType.OK, Gtk.ButtonsType.CLOSE, Gtk.ButtonsType.CANCEL, Gtk.ButtonsType.YES_NO, Gtk.ButtonsType.OK_CANCEL</code>, or any button using <code>add_button()</code> as in Gtk.Dialog.
ko: MessageDialog 생성자에서 <code>Gtk.ButtonsType.NONE, Gtk.ButtonsType.OK, Gtk.ButtonsType.CLOSE, Gtk.ButtonsType.CANCEL, Gtk.ButtonsType.YES_NO, Gtk.ButtonsType.OK_CANCEL</code> 또는 Gtk.Dialog에서와 같이 <code>add_button()</code>를 활용한 그 어떤 요소든 단추로 설정할 수 있습니다.

note: (itstool) path: item/p
en: We could substitute the default image of the MessageDialog with another image using
ko: 다른 그림을 활용하여 MessageDialog의 기본 그림을 대신할 수 있습니다.

note: (itstool) path: item/p
en: where <code>Gtk.STOCK_CAPS_LOCK_WARNING</code> is any image from <link href="http://developer.gnome.org/gtk3/unstable/gtk3-Stock-Items.html">Stock Items</link>. We could also set any image as in the Image widget, as <code>image.set_from_file("filename.png")</code>.
ko: <code>Gtk.STOCK_CAPS_LOCK_WARNING</code>은 <link href="http://developer.gnome.org/gtk3/unstable/gtk3-Stock-Items.html">스톡 항목</link>의 그림입니다. <code>image.set_from_file("filename.png")</code> 코드로 그림 위젯처럼 어떤 그림이든 설정할 수 있습니다.

note: (itstool) path: item/p
en: <code>format_secondary_text("some secondary message")</code> sets a secondary message. The primary text becomes bold.
ko: <code>format_secondary_text("some secondary message")</code>는 부차적인 메시지를 설정합니다. 주 텍스트는 굵은 글씨로 나타납니다.

[ctx: text]
note: (itstool) path: info/title
en: MessageDialog (Vala)
ko: MessageDialog(Vala)

[ctx: text]
note: (itstool) path: info/title
en: The Model/View/Controller design (Python)
ko: 모델/뷰/컨트롤러 설계(Python)

note: (itstool) path: info/desc (itstool) path: page/title
en: The Model/View/Controller design
ko: MessageDialog

note: (itstool) path: section/title
en: Overview
ko: 개요

note: (itstool) path: section/p
en: Both the <link xref="treeview_simple_liststore.py">TreeView</link> and the <link xref="combobox.py">ComboBox</link> widgets are built on the <em>Model/View/Controller</em> design. The <em>Model</em> (an implementation of <code>Gtk.TreeModel</code>, usually <code>Gtk.TreeStore</code> or <code>Gtk.ListStore</code>) stores the data; the <em>View</em> (e.g. <code>Gtk.TreeView</code>, <code>Gtk.ComboBox</code>, or <code>Gtk.ComboBoxText</code>) gets change notifications and displays the content of the model. The <em>Controller</em>, finally, changes the state of the model (via some methods in the model's implementation - such as <code>append()</code> or <code>remove()</code>) and notifies the view of these changes (via signals like <code>"changed"</code>).
ko: <link xref="treeview_simple_liststore.py">TreeView</link> 와 <link xref="combobox.py">ComboBox</link> 위젯은 <em>모델/뷰/컨트롤러</em> 디자인을 기반으로 만들었습니다. <em>모델</em>(<code>Gtk.TreeModel</code> 구현체는 보통 <code>Gtk.TreeStore</code> 또는 <code>Gtk.ListStore</code> 입니다)은 데이터를 저장하고, <em>뷰</em>(예를 들어 <code>Gtk.TreeView</code>, <code>Gtk.ComboBox</code>, <code>Gtk.ComboBoxText</code>가 있습니다)는 바뀐 알림을 보여주고 모델 내용을 보여줍니다. 마지막으로 <em>Controller</em>는 모델의 상태를 (<code>append()</code> 또는 <code>remote()</code> 같은 모델 구현체의 일부 메서드로) 바꾸며, 이 바꾼 내용의 뷰를 (<code>"changed"</code> 같은 시그널)로 알립니다.

note: (itstool) path: section/title
en: The Model
ko: 모델

note: (itstool) path: section/p
en: The main difference between the two main implementations of <code>Gtk.TreeModel</code> is that <code>Gtk.ListStore</code> contains simple rows of data without children, whereas <code>Gtk.TreeStore</code> also contains rows of data, but each row may have child rows (which in turn can have child rows, and so on).
ko: <code>Gtk.TreeModel</code>의 주요 구현체 두가지에 대한 차이점은 <code>Gtk.ListStore</code>에 하위 요소 없이 데이터 한 줄이 있지만, <code>Gtk.TreeStore</code>에는 데이터 한 줄이 들어있고, 각 줄에 하위 줄(이 하위 줄에 하위 줄을 또 넣을 수 있습니다)이 있습니다.

note: (itstool) path: section/p
en: The data in the Model can be retrieved or modified using the tree iter and column index, or <code>Gtk.TreeIter</code>, or <code>Gtk.TreePath</code>.
ko: 모델의 데이터는 TreeIter나 열 인덱스, <code>Gtk.TreeIter</code>, <code>Gtk.TreePath</code>를 사용하여 가져오거나 수정할 수 있습니다.

note: (itstool) path: section/p
en: As with Python's built-in list object you can use <code>len()</code> to get the number of rows and use slices to retrieve or set values. Otherwise, the method <code>append()</code> returns a <code>Gtk.TreeIter</code> instance, which points to the location of the newly inserted row. You can also retrieve a <code>Gtk.TreeIter</code> by calling <code>get_iter()</code>.
ko: 파이썬 내장 목록 객체에서 마찬가지로 값을 가져오거나 설정할 수많은 행 갯수를 가져올 <code>len()</code>을 사용하거나 슬라이스를 사용할 수 있습니다. 아니면 <code>append()</code> 메서드에서 새로 삽입한 행 위치를 가리키는 <code>Gtk.TreeIter</code> 인스턴스를 반환합니다. 또한 <code>get_iter()</code>를 호출하여 <code>Gtk.TreeIter</code>를 가져올 수 있습니다.

note: (itstool) path: section/p
en: As <code>Gtk.ListStore</code> contains only one level, i.e. nodes do not have any child nodes, a path is essentially the index of the row you want to access. In the case of <code>Gtk.TreeStore</code>, a path is a list of indexes or a string. The string form is a list of numbers separated by a colon. Each number refers to the offset at that level. Thus, the path <code>"0"</code> refers to the root node and the path <code>"2:4"</code> refers to the fifth child of the third node.
ko: 각각의 노드는 하위 노드를 둘 수 없어 <code>Gtk.ListStore</code>에 한 계층만 넣을 수 있기에, 각 노드의 경로는 접근하고자 하는 행의 인덱스입니다. <code>Gtk.TreeStore</code>의 경우 경로는 인덱스 목록 또는 문자열입니다. 문자열로 된 모양새는 쉼표로 구분한 숫자 목록입니다. 각 숫자는 해당 레벨의 오프셋입니다. 따라서 <code>"0"</code>번째 경로는 최상위(루트) 노드이며, <code>"2:4"</code> 경로는 세번째 노드의 다섯번째 하위 노드입니다.

note: (itstool) path: section/p
en: Useful methods for a <code>Gtk.TreeModel</code>:
ko: <code>Gtk.TreeModel</code>에 쓸만한 메서드:

note: (itstool) path: item/p
en: <code>get_iter(path)</code> returns a <code>Gtk.TreeIter</code> instance pointing to <code>path</code>. This is expected to be a colon-separated list of numbers, or a tuple. For example, the string <code>"10:4:0"</code> is equivalent to the tuple <code>(10, 4, 0)</code>, as both would create a path of depth 3 pointing to the 11th child of the root node, the 5th child of that 11th child, and the 1st child of that 5th child.
ko: <code>get_iter(path)</code>는 <code>path</code>를 가리키는 <code>Gtk.TreeIter</code> 인스턴스를 반환합니다. 콜론으로 구분한 숫자 목록 또는 튜플 값을 넣습니다. 예를 들어 <code>"10:4:0"</code> 문자열은 <code>(10, 4, 0)</code> 튜플과 동일하며, 두 값으로 루트로부터 11번째 떨어진 하위 노드를 가리키도록 깊이 3의 경로를 만듭니다. 11번째의 하위 노드는 5번째 노드, 5번째 하위 노드는 첫번째 노드입니다.

note: (itstool) path: item/p
en: <code>iter_next(treeiter)</code> returns a <code>Gtk.TreeIter</code> instance pointing the node following treeiter at the current level or <code>None</code> if there is no next iter.
ko: <code>iter_next(treeiter)</code>는 현재 레벨의 treeiter를 따르는 노드를 가리키는 <code>Gtk.TreeIter</code> 인스턴스를 반환하거나 다음 iter가 없으면 <code>Node</code> 합니다.

note: (itstool) path: item/p
en: <code>iter_has_child(treeiter)</code> returns <code>True</code> if <code>treeiter</code> has children, <code>False</code> otherwise.
ko: <code>iter_has_child(treeiter)</code>는 <code>treeiter</code>에 하위 구성요소가 있으면 <code>True</code>를, 그렇지 않으면 <code>False</code>를 반환합니다.

note: (itstool) path: item/p
en: <code>iter_children(treeiter)</code> returns a <code>Gtk.TreeIter</code> instance pointing to the first child of <code>treeiter</code> or <code>None</code> if <code>treeiter</code> has no children.
ko: <code>iter_children(treeiter)</code> <code>treeiter</code>의 첫 하위 노드를 가리키는 <code>Gtk.TreeIter</code> 인스턴스를 반환합니다. <code>treeiter</code>에 하위 노드가 없으면 <code>None</code>을 반환합니다.

note: (itstool) path: item/p
en: <code>get_iter_first()</code> returns a <code>Gtk.TreeIter</code> instance pointing to the first iterator in the tree (the one at the path <code>"0"</code>) or <code>None</code> if the tree is empty.
ko: <code>get_iter_first()</code>는 트리(경로의 <code>"0"</code>번째)의 첫 Iterator를 가리키는 <code>Gtk.TreeIter</code> 인스턴스를 반환하며 트리가 비어있을 경우는 <code>None</code>을 반환합니다.

note: (itstool) path: section/p
en: Useful methods for a <code>Gtk.ListStore</code>:
ko: <code>Gtk.ListStore</code>에 쓸만한 메서드:

note: (itstool) path: item/p
en: <code>append(row)</code> appends a new row to this list store, where <code>row</code> can be a list of values for each column; <code>row</code> can also be omitted or <code>None</code>, and in that case an empty row will be appended. The method returns a <code>Gtk.TreeIter</code> pointing to the appended row.
ko: <code>append(row)</code>는 리스트 스토어에 각각의 열에 대한 목록 값이 될 수 있는 새 <code>row</code>를 붙입니다. <code>row</code> 값은 생략하거나 <code>None</code> 값을 넣을 수 있으며, 어떨 때는 빈 row를 붙일 수 있습니다. 메서드에서는 붙인 row를 가리키는 <code>Gtk.TreeIter</code>를 반환합니다.

note: (itstool) path: item/p
en: <code>remove(iter)</code> removes <code>iter</code> from the <code>Gtk.ListStore</code>, and returns <code>True</code> if the iter is valid, and <code>False</code> if the iter is not. After being removed, <code>iter</code> is set to be the next valid row.
ko: <code>remove(iter)</code>는 <code>Gtk.ListStore</code>의 <code>iter</code>를 제거하며, iter 값이 유효하면 <code>True</code>를, 그렇지 않으면 <code>False</code>를 반환합니다. 제거하고 나면 <code>iter</code>를 다음 유효 행이 되도록 설정합니다.

note: (itstool) path: section/p
en: Useful methods for a <code>Gtk.TreeStore</code>:
ko: <code>Gtk.TreeStore</code>에 쓸만한 메서드:

note: (itstool) path: item/p
en: <code>append(parent, row)</code> appends a new row to this tree store; <code>parent</code> must be a valid Gtk.TreeIter. If parent is not <code>None</code>, then it will append the new row after the last child of parent, otherwise it will append a row to the top level; <code>row</code> can be a list of values for each column, or it can be omitted or <code>None</code>; in this latter case an empty row will be appended. The method returns a <code>Gtk.TreeIter</code> pointing to the appended row.
ko: <code>append(parent, row)</code>는 트리 스토어에 새 행을 붙입니다. <code>parent</code>는 올바른 Gtk.TreeIter여야 합니다. 상위 요소가 <code>None</code>이면, 상위 요소의 마지막 하위 요소 다음에 새 행을 붙이며, 상위요소가 <code>None</code>이 아니면, 최상위 레벨에 행을 붙입니다. <code>row</code>은 각 열에 대한 값 목록이거나, 생략하거나, <code>None</code>값일 수 있습니다. 마지막의 경우 빈 행을 붙입니다. 메서드는 붙인 행을 가리키는 <code>Gtk.TreeIter</code>를 반환합니다.

note: (itstool) path: section/title
en: The View: the TreeView case
ko: 뷰: TreeView의 경우

note: (itstool) path: section/p
en: A Treeview shows the structure of children and parent items as a tree. See for instance <link xref="treeview_treestore.py">this example</link>.
ko: 트리뷰는 하위 구성 요소와 상위 항목을 트리로 보여줍니다. 예시를 보려면 <link xref="treeview_treestore.py">이 예제</link>를 참고하십시오.

note: (itstool) path: section/p
en: The <code>Gtk.TreeViewColumn</code> is used to organize the vertical columns.
ko: <code>Gtk.TreeViewColumn</code>는 수직 방향 열을 모아 보여줄 때 사용합니다.

note: (itstool) path: section/p
en: Useful methods for a <code>Gtk.TreeView</code>:
ko: <code>Gtk.TreeView</code>에 쓸만한 메서드:

note: (itstool) path: item/p
en: <code>set_model(model)</code> sets the model for this tree view. If this tree view already has a model set, it will remove it before setting the new model. If model is <code>None</code>, then it will unset the old model.
ko: <code>set_model(model)</code>은 이 트리뷰의 모델을 설정합니다. 이 트리뷰가 이미 모델 세트을 들고 있다면, 새 모델을 설정하기 전에 제거랍니다. 모델이 <code>None</code> 상태라면 이전 모델의 설정을 해제합니다.

note: (itstool) path: item/p
en: <code>get_model()</code> returns the model this tree view is based on, <code>None</code> if the model is unset.
ko: <code>get_model()</code>은 이 트리 뷰의 기반 모델을 반환합니다. 모델이 없으면 <code>None</code>을 반환합니다.

note: (itstool) path: item/p
en: <code>append_column(column)</code> appends <code>column</code> to the list of columns.
ko: <code>append_column(column)</code>은 열 목록에 <code>column</code>을 추가합니다.

note: (itstool) path: item/p
en: <code>get_selection()</code> gets the <code>Gtk.TreeSelection</code> associated with this tree view.
ko: <code>get_selection()</code>은 트리뷰 관련  <code>Gtk.TreeSelection</code>을 가져옵니다.

note: (itstool) path: section/p
en: Useful methods for a <code>Gtk.TreeViewColumn</code>:
ko: <code>Gtk.TreeViewColumn</code>에 쓸만한 메서드:

note: (itstool) path: item/p
en: <code>add_attribute(renderer, attribute, value)</code> adds an attribute mapping to this column. <code>attribute</code> is the parameter on <code>renderer</code> to be set from the <code>value</code>
ko: <code>add_attribute(renderer, attribute, value)</code>는 이 열에 속성 매핑을 추가합니다. <code>attribute</code>는 <code>value</code>에서 설정할 <code>renderer</code>의 매개변수입니다.

note: (itstool) path: item/p
en: <code>pack_start(renderer, expand)</code> packs <code>renderer</code> into the beginning of this column. If <code>expand</code> is <code>False</code>, then <code>renderer</code> is allocated no more space than it needs. Any unused space is divided evenly between cells for which expand is <code>True</code>.
ko: <code>pack_start(renderer, expand)</code>는 이 열의 시작 부분에 <code>renderer</code>를 패킹합니다. <code>expand</code> 값이 <code>False</code>면, <code>renderer</code>는 필요한 만큼보다 적은 공간을 할당합니다. 활용하지 않은 공간은 expand 값이 <code>True</code>인 각각의 셀을 균등하게 나눕니다.

note: (itstool) path: item/p
en: <code>pack_end(renderer, expand)</code> adds <code>renderer</code> to end of this column. If <code>expand</code> is <code>False</code>, then <code>renderer</code> is allocated no more space than it needs. Any unused space is divided evenly between cells for which <code>expand</code> is <code>True</code>.
ko: <code>pack_end(renderer, expand)</code>는 열의 마지막 부분의 <code>renderer</code>를 추가합니다. <code>expand</code>값이 <code>False</code>면, <code>renderer</code>는 필요한 만큼보다 적은 공간을 할당합니다. 활용하지 않은 공간은 expand 값이 <code>True</code>인 각각의 셀을 균등하게 나눕니다.

note: (itstool) path: item/p
en: <code>set_sort_column_id(sort_column_id)</code> sets the column of the model by which this column (of the view) should be sorted. This also makes the column header clickable.
ko: <code>set_sort_column_id(sort_column_id)</code>는 정렬할 (뷰의) 열 기준으로 모델 열을 설정합니다. 열 헤더를 누를 수 있게 합니다.

note: (itstool) path: item/p
en: <code>set_sort_indicator(setting)</code> sets whether a little arrow is displayed in the column header; <code>setting</code> can either be <code>True</code> (indicator is shown) or <code>False</code>.
ko: <code>set_sort_indicator(setting)</code>는 열 헤더에 작은 화살표를 나타낼 지 여부를 설정합니다. <code>setting</code> 값은 <code>True</code>(화살표가 나타남) 또는 <code>False</code>일 수 있습니다.

note: (itstool) path: item/p
en: <code>set_sort_order(order)</code> changes the order by which the column is sorted; <code>order</code> can either be <code>Gtk.SortType.ASCENDING</code> or <code>Gtk.SortType.DESCENDING</code>.
ko: <code>set_sort_order(order)</code>는 어떤 열을 정렬할 지 정렬 기준을 바꿉니다. <code>order</code> 값은 <code>Gtk.SortType.ASCENDING</code> 또는 <code>Gtk.SortType.DESCENDING</code> 일 수 있습니다.

note: (itstool) path: section/title
en: The View: the ComboBox case
ko: 뷰: ComboBox의 경우

note: (itstool) path: section/p
en: A <code>Gtk.ComboBox</code> allows for the selection of an item from a dropdown menu, see for instance <link xref="combobox.py">this example</link>. For a list of textual choices, one can also use the simpler <code>Gtk.ComboBoxText</code>. Both <code>Gtk.ComboBox</code> and <code>Gtk.ComboBoxText</code> can contain an entry.
ko: <code>Gtk.ComboBox</code> 는 드롭 다운 메뉴의 항목 섹션을 허용합니다. 예시는 <link xref="combobox.py">이 예제</link>를 참고하십시오. 텍스트 방식의 목록을 선택한다면 더 단순한 <code>Gtk.ComboBoxText</code>를 활용할 수 있습니다. <code>Gtk.ComboBox</code> 와 <code>Gtk.ComboBoxText</code>에는 항목을 넣을 수 있습니다.

note: (itstool) path: section/p
en: Useful methods for a <code>Gtk.ComboBox</code>:
ko: <code>Gtk.ComboBox</code>에 쓸만한 메서드:

note: (itstool) path: item/p
en: The static method <code>new_with_entry()</code> creates a new empty <code>Gtk.ComboBox</code> with an entry; the static method <code>new_with_model(model)</code> creates a new one with the model initialized to <code>model</code>; and the static method <code>new_with_model_and_entry(model)</code> is a combination of the two.
ko: <code>new_with_entry()</code> 정적 메서드에서는 항목으로 비어있는 새 <code>Gtk.ComboBox</code> 를 만들며, <code>new_with_model(model)</code> 정적 메서드에서는 <code>model</code>로 초기화 한 새 모델로 만듭니다. 그리고 <code>new_with_model_and_entry(model)</code> 정적 메서드는 이 두가지 경우를 모두 수행합니다.

note: (itstool) path: item/p
en: <code>get_active_iter()</code> returns a <code>Gtk.TreeIter</code> pointing to the current active item. If no active item exists, <code>None</code> is returned.
ko: <code>get_active_iter()</code>는 현재 활성 항목을 가리키는 <code>Gtk.TreeIter</code>를 반환합니다. 활성 항목이 없으면 <code>None</code>을 반환합니다.

note: (itstool) path: item/p
en: <code>set_model(model)</code> sets the model used by this combo box to be <code>model</code>, and it will unset a previously set model (if there is any). If <code>model</code> is <code>None</code>, then it will unset the model. Note that this function does not clear the cell renderers.
ko: <code>set_model(model)</code> 는 콤보 상자의 모델을 <code>model</code>로 설정하며, 이전에 설정한 모델(이 있다면) 설정을 해제합니다. <code>model</code> 값이 <code>None</code>이면, 이미 있던 모델 설정을 해제합니다. 참고로 이 함수는 셀 렌더러 자체를 지우지 않습니다.

note: (itstool) path: item/p
en: <code>set_entry_text_column(text_column)</code> sets the model column which this combo box should use to get strings from to be <code>text_column</code>. The column <code>text_column</code> in the model of this combo box must be of type <code>str</code> (this is only relevant if this combo box has been created with the “has-entry” property set to True).
ko: <code>set_entry_text_column(text_column)</code>은 문자열을 가져올 콤보 상자 모델 열을 <code>text_column</code>으로 설정합니다. 이 콤보 상자 모델의 <code>text_column</code>은 <code>str</code> 형식이어야합니다(이 콤보 상자의 “has-entry” 속성을 True로 설정했을 때만 해당합니다).

note: (itstool) path: item/p
en: <code>set_wrap_width(width)</code> sets the wrap width of this combo box to be <code>width</code>. The wrap width is basically the preferred number of columns when you want the popup to be laid out in a grid.
ko: <code>set_wrap_width(width)</code> 함수는 콤보 박스의 줄바꿈 너비를 <code>width</code>로 설정합니다. 줄바꿈 너비는 기본적으로 그리드에 팝업을 두고자 할 때 원하는 열 갯수입니다.

note: (itstool) path: section/p
en: Useful methods for a <code>Gtk.ComboBoxText</code>:
ko: <code>Gtk.ComboBoxText</code>에 쓸만한 메서드:

note: (itstool) path: item/p
en: The static method <code>new_with_entry()</code> creates a new empty <code>Gtk.ComboBoxText</code> with an entry.
ko: <code>new_with_entry()</code> 정적 메서드는 비어있는 새 <code>Gtk.ComboBoxText</code>를 항목을 넣어 만듭니다.

note: (itstool) path: item/p
en: <code>append_text(text)</code> appends <code>text</code> to the list of strings stored in this combo box.
ko: <code>append_text(text)</code>는 콤보 박스에 저장한 문자열 목록에 <code>text</code>를 추가합니다.

note: (itstool) path: item/p
en: <code>get_active_text()</code> returns the currently active string in this combo box, or <code>None</code> if none is selected. If this combo box contains an entry, this function will return its contents (which will not necessarily be an item from the list).
ko: <code>get_active_text()</code>는 콤보 박스의 현재 활성 문자열을 반환하거나 선택한 항목이 없을 경우는 <code>None</code>을 반환합니다. 콤보 박스에 항목이 있다면 이 함수는 항목의 내용을 반환합니다(꼭 목록 항목일 필요는 없습니다).

note: (itstool) path: section/title
en: The View: the Cellrenderers
ko: 뷰: CellRenderer의 경우

note: (itstool) path: section/p
en: The View makes use of <code>Gtk.CellRenderer</code>s of various types to draw the data.
ko: 다양한 형식의 <code>Gtk.CellRenderer</code>를 활용하여 데이터를 그리는 뷰입니다.

note: (itstool) path: section/p
en: Implementations of <code>Gtk.CellRenderer</code> and useful methods:
ko: <code>Gtk.CellRenderer</code> 구현체와 쓸만한 메서드:

note: (itstool) path: item/p
en: <code>Gtk.CellRendererText</code> - renders text in a cell
ko: <code>Gtk.CellRendererText</code> - 셀에 텍스트를 보여줍니다.

note: (itstool) path: item/p
en: <code>Gtk.CellRendererToggle</code> - renders a toggle or radio button in a cell. Useful methods:
ko: <code>Gtk.CellRendererToggle</code> - 토글 단추 또는 라디오 단추를 셀에 보여줍니다 쓸만한 메서드는:

note: (itstool) path: item/p
en: <code>set_active(setting)</code> - activates or deactivates a cell renderer
ko: <code>set_active(setting)</code> - 셀 렌더러를 활성 처리하거나 비활성 처리합니다.

note: (itstool) path: item/p
en: <code>get_active()</code> - returns whether the cell renderer is active
ko: <code>get_active()</code> - 셀 렌더러 활성화 혀부를 반환합니다.

note: (itstool) path: item/p
en: <code>set_radio(radio)</code> - if radio is <code>True</code>, the cell renderer renders a radio toggle (i.e. a toggle in a group of mutually-exclusive toggles); if <code>False</code>, it renders a check toggle (a standalone boolean option)
ko: <code>set_radio(radio)</code> - radio가 참이면 셀 렌더러는 라디오 토글을 나타냅니다(예: 그룹 단위로 상호 배타적으로 토글). <code>False</code> 값을 설정하면 확인 상자로 나타냅니다(단독 부울린 옵션).

note: (itstool) path: item/p
en: <code>get_radio()</code> - returns whether we are rendering radio toggles rather than checkboxes.
ko: <code>get_radio()</code> - 확인 상자 대신 라디오 토글을 보여줄 지 여부를 반환합니다.

note: (itstool) path: item/p
en: <code>Gtk.CellRendererPixbuf</code> - renders an image in a cell
ko: <code>Gtk.CellRendererPixbuf</code> - 셀 그림을 보여줍니다

note: (itstool) path: item/p
en: <code>Gtk.CellRendererCombo</code> - renders text in a cell; but while <code>Gtk.CellRendererText</code> offers a simple entry to edit the text, <code>Gtk.CellRendererCombo</code> offers a <code>Gtk.ComboBox</code> widget to edit the text. It can be used with and without an associated Gtk.Entry widget, depending on the value of the “has-entry” property.
ko: <code>Gtk.CellRendererCombo</code> - 셀 텍스트를 보여줍니다만 <code>Gtk.CellRendererText</code>는 텍스트를 편집할 간단한 항목을 제공하지만 <code>Gtk.CellRendererCombo</code> 에는 텍스트를 편집할 <code>Gtk.ComboBox</code>  위젯도 들어있습니다. 관련 Gtk.Entry 위젯을 넣든 아니든 사용할 수 있으며,  “has-entry” 속성 값에 따라 다릅니다.

note: (itstool) path: item/p
en: <code>Gtk.CellRendererProgress</code> - renders a numeric value as a progress bar in a cell; it can display a text on top of the progress bar
ko: <code>Gtk.CellRendererProgress</code> - 셀에서 진행 표시줄처럼 숫자 값을 나타냅니다. 진행 표시줄의 상단 텍스트로 표시할 수 있습니다

note: (itstool) path: item/p
en: <code>Gtk.CellRendererSpinner</code> - renders a spinning animation in a cell
ko: <code>Gtk.CellRendererSpinner</code> - 셀에서 스핀 움직임 동작을 나타냅니다

note: (itstool) path: item/p
en: <code>Gtk.CellRendererSpin</code> - renders a spin button in a cell
ko: <code>Gtk.CellRendererSpin</code> - 셀에서 스핀 단추를 나타냅니다

note: (itstool) path: item/p
en: <code>Gtk.CellRendererAccel</code> - renders a keyboard accelerator in a cell
ko: <code>Gtk.CellRendererAccel</code>- 셀에서 키보드 바로 가기 키를 나타냅니다

note: (itstool) path: section/title
en: The Controller: the Selection
ko: 컨트롤러: Selection

note: (itstool) path: section/p
en: Most applications will need to not only deal with displaying data, but also receiving input events from users. To do this, simply get a reference to a selection object and connect to the <code>"changed"</code> signal.
ko: 대부분 프로글매에서는 데이터를 표시할 뿐만 아니라 사용자로부터 입력 이벤트를 받아 처리합니다. 이 때, 간단하게 선택 객체 참조를 가져온 후 <code>"changed"</code> 시그널에 연결합니다.

note: (itstool) path: section/p
en: Then to retrieve data for the row selected:
ko: 그 다음 선택한 행 데이터를 가져오려면:

note: (itstool) path: section/p
en: Useful methods for a <code>Gtk.TreeSelection</code>:
ko: <code>Gtk.TreeSelection</code>에 쓸만한 메서드:

note: (itstool) path: item/p
en: <code>set_mode(type)</code> sets the type of selection, where type is one of
ko: <code>set_mode(type)</code>는 다음 중 선택 형식을 설정합니다

note: (itstool) path: item/p
en: <code>Gtk.SelectionMode.NONE</code> - no selection is possible
ko: <code>Gtk.SelectionMode.NONE</code> - 가능하면 아무것도 선택하지 않음

note: (itstool) path: item/p
en: <code>Gtk.SelectionMode.SINGLE</code> - zero or one element may be selected
ko: <code>Gtk.SelectionMode.SINGLE</code> - 한 개 이하로 선택할 수 있음

note: (itstool) path: item/p
en: <code>Gtk.SelectionMode.BROWSE</code> - exactly one element is selected. In some circumstances, such as initially or during a search operation, it’s possible for no element to be selected. What is really enforced is that the user can’t deselect a currently selected element except by selecting another element.
ko: <code>Gtk.SelectionMode.BROWSE</code> - 정확히 요소 한개만 선택합니다. 검색 동작 초기 또는 진행 단계인 경우, 아무것도 선택하지 않을 수도 있습니다. 다른 요소를 선택할 때를 제외하고는 현재 선택한 요소의 선택 상태를 해제할 수 없도록 강제합니다.

note: (itstool) path: item/p
en: <code>Gtk.SelectionMode.MULTIPLE</code> -any number of elements may be selected. Clicks toggle the state of an item. The Ctrl key may be used to enlarge the selection, and Shift key to select between the focus and the child pointed to. Some widgets may also allow Click-drag to select a range of elements.
ko: <code>Gtk.SelectionMode.MULTIPLE</code> - 몇가지든 선택할 수 있습니다. 항목을 누를 때마다 선택 상태를 바꿉니다. Ctrl키로 선택 갯수를 늘릴 수 있고, Shift키로 현재 선택한 항목 부터 다음 선택한 하위 항목까지 쭉 선택할 수 있습니다. 일부 위젯에서는 눌러서 끄는 방식으로 일정 범위 항목을 선택할 수 있습니다.

note: (itstool) path: item/p
en: <code>get_selected()</code> returns a tuple <code>(model, treeiter)</code>, where <code>model</code> is the current model and <code>treeiter</code> a <code>Gtk.TreeIter</code> pointing to the currently selected row, or None if no rows are selected. The method does not work if the selection mode is set to <code>Gtk.SelectionMode.MULTIPLE</code>; in that case, use <code>get_selected_rows()</code> instead, which Returns a list of <code>Gtk.TreePath</code> instances of all selected rows.
ko: <code>get_selected()</code>는 현재 모델을 의미하는 <code>model</code>과 현재 선택한 행을 가리키는 <code>Gtk.TreeIter</code>인 <code>treeiter</code> 또는 아무 행도 선택하지 않았을 경우 None 값이 들어가는 <code>(model, treeiter)</code> 튜플을 반환합니다. 이 메서드는 선택 모드를 <code>Gtk.SelectionMode.MULTIPLE</code>로 선택했을 때는 동작하지 않습니다. 이 경우, 선택한 행의 <code>Gtk.TreePath</code> 안스턴스 목록을 반환하는 <code>get_selected_rows()</code>를 대신 사용하십시오.

note: (itstool) path: section/title
en: References
ko: 참고 자료

[ctx: text]
note: (itstool) path: info/title
en: Paned (C)
ko: Paned(C)

note: (itstool) path: info/desc
en: A widget with two adjustable panes
ko: 크기 조절 가능한 두 창을 가진 위젯입니다

note: (itstool) path: page/p
en: Two images in two adjustable panes, horizontally aligned.
ko: 크기 조절 가능한 두 창에 그림 둘을 두고 수평 방향으로 정렬합니다.

note: (itstool) path: item/p
en: <link href="http://developer.gnome.org/gtk3/stable/gtk3-Standard-Enumerations.html#GtkOrientation">Standard Enumerations</link>
ko: <link href="http://developer.gnome.org/gtk3/stable/gtk3-Standard-Enumerations.html#GtkOrientation">표준 에뮬레이션</link>

note: (itstool) path: section/title
en: Useful methods for a Paned widget
ko: Paned 위젯에 쓸만한 메서드

note: (itstool) path: section/p
en: To have two vertically aligned panes, use <code>Gtk.Orientation.VERTICAL</code> instead of <code>Gtk.Orientation.HORIZONTAL</code>. The method <code>add1(widget1)</code> will add the <code>widget1</code> to the top pane, and <code>add2(widget2)</code> will add the <code>widget2</code> to the bottom pane.
ko: 수직 처리 창을 두려면 <code>Gtk.Orientation.HORIZONTAL</code> 대신 <code>Gtk.Orientation.VERTICAL</code>를 사용하십시오. <code>add1(widget1)</code> 메서드는, 최상단 창에 <code>widget1</code>를 추가하며, <code>add2(widget2)</code> 메서드는 하단 창에 <code>widget2</code>를 추가합니다.

[ctx: text]
note: (itstool) path: info/title
en: Photo wall (C)
ko: Photo wall(C)

note: (itstool) path: info/desc
en: A Clutter image viewer
ko: 클러터 그림 보기

note: (itstool) path: page/title
en: Photo wall
ko: 포토 월

note: (itstool) path: synopsis/p
en: For this example we will build a simple image viewer using Clutter. You will learn:
ko: 이 예제에서는 클러터로 간단한 그림 보기 프로그램을 만들겠습니다. 다음을 익히는 과정입니다:

note: (itstool) path: item/p
en: How to size and position <code>ClutterActor</code>s
ko: <code>ClutterActor</code>에서 크기 위치 설정하는 방법

note: (itstool) path: item/p
en: How to place an image in a <code>ClutterActor</code>
ko: <code>ClutterActor</code>에서 그림 배치하는 방법

note: (itstool) path: item/p
en: How to do simple transitions using Clutter's animation framework
ko: 클러터 애니메이션 프레임워크로 간단하게 트랜지션 처리하는 방법

note: (itstool) path: item/p
en: How to make <code>ClutterActor</code>s respond to mouse events
ko: 마우스 이벤트에 대해 <code>ClutterActor</code>에서 응답하는 방법

note: (itstool) path: item/p
en: How to get file names from a directory
ko: 디렉터리에서 파일 이름 가져오기

note: (itstool) path: section/title
en: Introduction
ko: 도입부

note: (itstool) path: section/p
en: Clutter is a library for creating dynamic user interfaces using OpenGL for hardware acceleration. This example demonstrates a small, but central, part of the Clutter library to create a simple but attractive image viewing program.
ko: 클러터는 하드웨어 가속 OpenGL을 활용하여 동적 사용자 인터페이스를 만드는 라이브러리입니다. 이 예제는 작은 일부를 보여주지만, 중심적으로는, 간단하지만 매력적인 그림 보기 프로그램을 만드는 클러터 라이브러리의 일부 동작을 시연합니다.

note: (itstool) path: section/p
en: To help us reach our goal we will be utilising a few other common pieces of GLib as well. Most importantly, we'll use one <code>GPtrArray</code>, a dynamic array of pointers, to hold the file path names. We will also use <code>GDir</code>, a utility for working with directories, to access our image directory and gather file paths.
ko: 목적을 위해 GLib 같은 일부 일반적인 부분도 마찬가지로 활용합니다. 상당히 중요하게 <code>GPtrArray</code> 동적 포인터 배열을 활용하여 파일 경로 이름을 넣어두겠습니다. 또한 디렉터리를 다루는 <code>GDir</code>로 그림 디렉터리에 접근하고 경로를 가져올 때 활용하겠습니다.

note: (itstool) path: item/p
en: Choose <gui>GTK+ (simple)</gui> from the <gui>C</gui> tab, click <gui>Continue</gui>, and fill out your details on the next few pages. Use <file>photo-wall</file> as project name and directory.
ko: <gui>C</gui> 탭에서 <gui>GTK+ (단순)</gui>를 선택하고, <gui>계속</gui>을 누른 다음, 나타난 페이지에서 몇가지 자세한 내용을 입력하십시오. 프로젝트 이름과 디렉터리에 <file>photo-wall</file>을 입력하십시오.

note: (itstool) path: item/p
en: Make sure that <gui>Use GtkBuilder for user interface</gui> is disabled as we will create the UI manually in this tutorial. Check the <link xref="guitar-tuner.c">Guitar-Tuner</link> tutorial using the interface builder.
ko: 앞서 따라하기 지침을 통해 사용자 인터페이스를 직접 만들 예정이므로 <gui>사용자 인터페이스에 GtkBuilder 사용</gui> 설정을 껐는지 확인하십시오. 인터페이스 빌더 사용법을 알아보려면 <link xref="guitar-tuner.c">기타 조율 프로그램</link> 따라하기 지침서를 확인하십시오.

note: (itstool) path: item/p
en: Enable <gui>Configure external packages</gui>. On the next page, select <em>clutter-1.0</em> from the list to include the Clutter library in your project.
ko: <gui>외부 패키지 설정</gui>을 <gui>켬</gui>으로 설정했는지 확인하십시오. 다음 페이지의 목록에서 <em>gstreamer-0.10</em>를 선택하여 프로젝트에 지스트리머 라이브러리를 넣으십시오.

note: (itstool) path: section/title
en: A look at Photo Wall
ko: 포토 월 살펴보기

note: (itstool) path: section/p
en: Our image viewer presents the user with a wall of images.
ko: 그립 보기 프로그램에서는 그림 벽으로 사용자를 나타냅니다.

note: (itstool) path: section/p
en: When an image is clicked, it is animated to fill the viewing area. When the image having focus is clicked it is returned to its original position using an animation with the same duration of 500 milliseconds.
ko: 그림을 누르면 보기 영역을 채울 때 움직입니다. 포커스를 획득한 그림이 눌린 상태면, 500 밀리초 동안 움직임을 활용하여 원래 위치로 돌아옵니다.

note: (itstool) path: section/title
en: Initial setup
ko: 초기 설정

note: (itstool) path: section/p
en: The following code segment contains many of the defines and variables we will be using in the following sections. Use this as a reference for later sections. Copy this code to the beginning of <file>src/main.c</file>:
ko: 다음 코드 일부에는 다음 섹션에서 활용할 정의와 변수 대부분이 들어갑니다. 이 부분을 다음 섹션 참고 용도로 활용하십시오. 이 코드를 <file>src/main.c</file> 시작 부분에 복사해두십시오:

note: (itstool) path: section/title
en: Jumping into the code
ko: 코드로 넘어가기

note: (itstool) path: section/p
en: We will start by taking a look at the <code>main()</code> function as a whole. Then we'll discuss the other code sections in detail. Change the <file>src/main.c</file> to contain this <code>main()</code> function. You can delete the <code>create_window()</code> function as we don't need it in this example.
ko: <code>main()</code> 함수를 전체로서 먼저 살펴보겠습니다. 그 다음 다른 코드 부분을 자세하게 살펴보면서 이야기하겠습니다. <file>src/main.c</file> 파일을 이 <code>main()</code> 함수 코드가 들어가도록 바꾸십시오. 이 예제를 실행할 때 <code>create_window()</code> 함수는 필요 없으므로 삭제할 수 있습니다.

note: (itstool) path: item/p
en: Line 4: <code>ClutterColor</code> is defined by setting the red, green, blue and transparency (alpha) values. The values range from 0-255. For transparency a value of 255 is opaque.
ko: 4번째 줄: <code>ClutterColor</code>는 적색, 녹색, 청색, 투명도(alpha) 값을 설정하여 정의합니다. 값 범위는 0부터 255까지입니다. 255는 투명 수치가 가장 낮습니다.

note: (itstool) path: item/p
en: Line 7: You must initialize Clutter. If you forget to do this, you will get very strange errors. Be warned.
ko: 7번째 줄: 클러터를 초기화해야 합니다. 까먹었다면 이상한 오류가 납니다. 유의하세요.

note: (itstool) path: item/p
en: Lines 10‒14: Here we create a new <code>ClutterStage</code> . We then set the size using the defines from the previous section and the address of the <code>ClutterColor</code> we just defined.
ko: 10~14번째 줄: 여기서 새 <code>ClutterStage</code>를 만듭니다. 앞 부분에서 정의한 코드로 사이즈를 설정하고 방금 정의한 <code>ClutterColor</code> 의 위치를 정의합니다.

note: (itstool) path: note/p
en: A <code>ClutterStage</code> is the top-level <code>ClutterActor</code> onto which other <code>ClutterActor</code>s are placed.
ko: <code>ClutterStage</code>는 다른 <code>ClutterActor</code>가 놓인 곳의 최상위 <code>ClutterActor</code> 입니다.

note: (itstool) path: item/p
en: Line 16: Here we call our function for getting the image file paths. We'll look at this in a bit.
ko: 16번째 줄: 여기서 그림 파일 경로를 가져오는 함수를 호출합니다. 이 부분을 조금 살펴보겠습니다.

note: (itstool) path: item/p
en: Lines 18‒49: This is where we set up the <code>ClutterActor</code>s, load the images and place them into their spot in the image wall. We will look at this in detail in the next section.
ko: 18~49번째 줄: 이 부분은 그림을 불러오고 그림 벽 부분에 두는 <code>ClutterActor</code>을 설정하는 부분입니다. 다음 섹션에서 자세하게 이 부분을 살펴보겠습니다.

note: (itstool) path: item/p
en: Line 52: Show the stage and <em>all its children</em>, meaning our images.
ko: 52번째 줄: 그림의 스테이지와 <em>하위 요소</em>를 나타냅니다.

note: (itstool) path: item/p
en: Line 55: Start the Clutter main loop.
ko: 55번째 줄: 클러터 메인 루프를 시작합니다.

note: (itstool) path: section/title
en: Setting up our image actors
ko: 그림 액터 구성

note: (itstool) path: note/p
en: In Clutter, an actor is the most basic visual element. Basically, everything you see is an actor.
ko: 클러터에서 액터는 사장 기본적인 시각 구성 요소입니다. 근본적으로 여러분이 보는 모든 구성 요소는 액터입니다.

note: (itstool) path: section/p
en: In this section, we are going to take a closer look at the loop used for setting up the <code>ClutterActor</code>s that will display our images.
ko: 이 부분에서는 그림을 나타내는 <code>ClutterActor</code>를 설정하는 루프를 더 자세하게 살펴보겠습니다.

note: (itstool) path: item/p
en: Line 7: Here we want to get the path at the <var>n</var>th location in the <code>GPtrArray</code> that is holding our image path names. The <var>n</var>th position is calculated based on <code>row</code> and <code>col</code>.
ko: 7번째 줄:  여기서는 그림 경로 이름을 넣는 <code>GPtrArray</code>의 <var>n</var>번째 위치에서 경로를 가져오려고 합니다. <var>n</var>번째  위치는 <code>행</code>과 <code>열</code> 기반으로 계산합니다.

note: (itstool) path: item/p
en: Line 8‒23: This is where we actually create the <code>ClutterActor</code> and place the image into the actor. The first argument is the path which we access through our <code>GSList</code> node. The second argument is for error reporting but we are ignoring that to keep things short.
ko: 8~23번째 줄: 실제로 <code>ClutterActor</code>를 만들고 액터에 그림을 넣는 부분입니다. 첫 인자는 <code>GSList</code> 노드로 접근할 경로입니다. 두번째 인자는 오류 보고용이지만 단순성을 유지할 목적으로 무시합니다.

note: (itstool) path: item/p
en: Line 47: This adds the <code>ClutterActor</code> to the stage, which is a container. It also assumes ownership of the <code>ClutterActor</code> which is something you'll want to look into as you get deeper into GNOME development. See the <link href="http://library.gnome.org/devel/gobject/stable/gobject-memory.html"><code>GObject</code> documentation</link> for the gory details.
ko: 47번째 줄: <code>ClutterActor</code>를 컨테이너 스테이지에 추가합니다. 또한 여러분이 그놈 개발상 깊숙한 부분을 보려는 <code>ClutterActor</code>의 소유자를 간주합니다. 적나라한 세부 내용은 <link href="http://library.gnome.org/devel/gobject/stable/gobject-memory.html"><code>GObject</code> 문서</link>를 참고하십시오.

note: (itstool) path: section/title
en: Loading the images
ko: 그림 불러오기

note: (itstool) path: section/p
en: Let's take a short break from Clutter to see how we can get the file names from our image directory.
ko: 그림 디렉터리에서 파일 이름을 가져오는 방법을 살펴볼 참에 클러터 내용 다루는 부분은 잠시 접어두겠습니다.

note: (itstool) path: item/p
en: Lines 5 and 12: This opens our directory or, if an error occurred, returns after printing an error message.
ko: 5~12번째 줄: 디렉터리를 열거나 오류가 발생했을 경우 오류 메시지를 출력한 후 값을 반환합니다.

note: (itstool) path: item/p
en: Lines 16‒25: The first line gets another file name from the <code>GDir</code> we opened earlier. If there was an image file (which we check by looking at its extension, ".png" or ".jpg") in the directory we proceed to prepend the image directory path to the filename and prepend that to the list we set up earlier. Lastly we attempt to get the next path name and reenter the loop if another file was found.
ko: 16~25번째 줄: 첫 줄은 앞서 열어둔 <code>GDir</code>에서 다른 파일 이름을 가져옵니다. 디렉터리에 그림 파일(".png" 또는 ".jpg" 확장자를 보고 확인)이 있다면 파일 이름에 그림 디렉터리 경로를 붙이고 앞서 설정한 목록에 추가합니다. 마지막으로, 그 다음 경로 이름을 가져온 다음, 해당 경로에서 다른 파일을 찾으면 반복문에 다시 들어갑니다.

note: (itstool) path: section/title
en: Set up the actors
ko: 액터 구성

note: (itstool) path: section/p
en: We now take a look at the sizing and positioning of <code>ClutterActor</code>s and also readying the <code>ClutterActor</code> for user interaction.
ko: 이제 <code>ClutterActor</code>의 크기 조절 및 위치 설정, 사용자 반응 대기 부분을 살펴보겠습니다.

note: (itstool) path: item/p
en: Line 7: Setting an actor reactive means that it reacts to events, such as <code>button-press-event</code> in our case. For Photo Wall, all <code>ClutterActor</code>s in the wall should initially be reactive.
ko: 7번째 줄: 액터 반응 설정은 액터가 <code>button-press-event</code> 같은 이벤트에 반응하게 합니다. 포토 월에서는 벽에 있는 모든 <code>ClutterActor</code>에 반응 규칙을 초기화해야합니다.

note: (itstool) path: item/p
en: Line 9‒12: Now we connect the <code>button-press-event</code> to the <code>actor_clicked_cb</code> callback which we will look at next.
ko: 9~12번째 줄: 이제 <code>button-press-event</code> 이벤트를 다음에 살펴볼 <code>actor_clicked_cb</code> 콜백 함수에 연결합니다.

note: (itstool) path: section/p
en: At this point we've got a wall of images that are ready to be viewed.
ko: 여기서 볼 준비를 마친 그림 벽을 가져옵니다.

note: (itstool) path: section/title
en: Reacting to the clicks
ko: 누름 동작에 반응

note: (itstool) path: item/p
en: Lines 1‒4: We have to make sure our callback function matches the signature required for the <code>button_clicked_event</code> signal. For our example, we will only use the first argument, the <code>ClutterActor</code> that is actually clicked.
ko: 1~4번째 줄: <code>button_clicked_event</code> 시그널에 필요한 시그니쳐에 일치하는 콜백 함수를 확인해야합니다. 예를 들면 실제로 누를 <code>ClutterActor</code>가 들어가는 첫번째 인자만 씁니다.

note: (itstool) path: note/p
en: A few words on the arguments we are not using in this example. The <code>ClutterEvent</code> is different depending on what event is being handled. For example, a key event produces a <code>ClutterKeyEvent</code> from which you can get the key being pressed among other information. For mouse click events you get a <code>ClutterButtonEvent</code> from which you can get the <code>x</code> and <code>y</code> values. See the Clutter documentation for other <code>ClutterEvent</code> types.
ko: 이 예제에서 사용하지 않는 인자에 대해 몇가지 알아둘 내용이 있습니다. <code>ClutterEvent</code>는 어떤 이벤트를 처리할지에 따라 다릅니다. 예를 들면, 키 이벤트는 여러 이벤트 중에 키누름 이벤트를 받을 수 있는 <code>ClutterKeyEvent</code>를 내보냅니다. 마우스 단추 누름 이벤트 상황에선 <code>x</code>, <code>y</code> 값을 받을 수 있는 <code>ClutterButtonEvent</code>를 취할 수 있습니다. 다른 <code>ClutterEvent</code> 형식을 알아보려면 클러터 문서를 참고하십시오.

note: (itstool) path: note/p
en: The <code>user_data</code> is what one uses to pass data into the function. A pointer to any data type can be passed in. If you need multiple data to be passed into the callback, you can place the data into a struct and pass its address in.
ko: <code>user_data</code>는 함수에 데이터를 전달할 때 활용합니다. 어떤 데이터 형식의 포인터든 전달할 수 있습니다. 콜백에 여러 데이터를 넘겨야 한다면, 구조체에 데이터를 넣고 전달할 수 있습니다.

note: (itstool) path: item/p
en: Line 7: We set up a static flag to track which state we are in: wall mode or focus mode. We start out in wall mode so no image has focus. Thus, we set the flag to <code>FALSE</code> initially.
ko: 7번째 줄: 우리가 보는 상태를 보여줄 정적 플래그 벽 모드 또는 포커스 모드를 설정합니다. 벽 모드로 시작해서 어떤 이미지에도 포커스를 맞추지 않도록 합니다. 따라서 초기 플래그 값은 <code>FALSE</code> 입니다.

note: (itstool) path: item/p
en: Line 12‒14: These set the image actors to receive events if they are focused.
ko: 12~14번째 줄: 이 부분에서 그림에 포커스를 맞췄을 때 이벤트를 받을 그림 액터를 설정합니다.

note: (itstool) path: item/p
en: Line 16‒17: Here we set the animation duration and save the current state.
ko: 16~17번째 줄: 여기서 움직임 시간을 설정하고 현재 상태를 저장합니다.

note: (itstool) path: item/p
en: Lines 21‒23: Reaching this code means that one image currently has focus and we want to return to wall mode. Setting a position on a <code>ClutterActor</code> begins an animation with the duration that we set in line 17.
ko: 21~23번째 줄: 이 코드에 도달한다는 건 그림 하나에 포커스를 맞췄으며, 벽 모드로 돌아가려 함을 의미합니다. <code>ClutterActor</code>에 위치를 설정하면 17번째 줄에서 설정한 시간만큼 그림 움직임을 시작합니다.

note: (itstool) path: item/p
en: Line 24: Reaching this line of code means we are currently in the wall state and are about to give a <code>ClutterActor</code> focus. Here we save the starting position so that we can return to it later.
ko: 24번째 줄: 이 코드 줄에 도달하면 현재 벽 상태에 있으며 <code>ClutterActor</code> 포커스를 주려는 상황입니다. 여기서 시작 위치를 저장하여 나중에 다시 이 위치로 돌아올 수 있습니다.

note: (itstool) path: item/p
en: Line 25: Setting the <code>ClutterActor</code>'s <code>reactive</code> property to <code>TRUE</code> makes this <code>ClutterActor</code> react to events. In this focused state the only <code>ClutterActor</code> that we want to receive events will be the <code>ClutterActor</code> being viewed. Clicking on the <code>ClutterActor</code> will return it to its starting position.
ko: 25번째 줄: <code>ClutterActor</code>의 <code>reactive</code> 속성을 <code>TRUE</code>로 설정하면, <code>ClutterActor</code>에서 이벤트에 반응합니다. 이 포커스 상태에서 우리가 이벤트를 받으려는 <code>ClutterActor</code>는 우리가 보고 있는 <code>ClutterActor</code>입니다. <code>ClutterActor</code>를 누르면 액터의 시작 위치로 돌아갑니다.

note: (itstool) path: item/p
en: Lines 27‒36: This is where we save the current position of the image, set it to receive events and then make it appear above the other images and start animating it to fill the stage.
ko: 27~36번째 줄: 이 부분은 그림의 현재 위치를 저장하고, 이벤트를 받도록 설정하며, 다른 그림 위로 나타나 스테이지를 채우는 움직임을 시작하는 부분입니다.

note: (itstool) path: item/p
en: Line 39: Here we restore the easing state to what was set before we changed it in line 16.
ko: 39번째 줄: 이 부분에서는 16번째 줄에서 바꾸기 전의 움직임 처리 상태로 복원합니다.

note: (itstool) path: item/p
en: Line 42: Here we toggle the <code>is_focused</code> flag to the current state.
ko: 42번째 줄: 여기서 <code>is_focused</code> 값을 현재 상태 값으로 바꿉니다.

note: (itstool) path: item/p
en: As mentioned previously, the <code>ClutterActor</code>s with higher <code>depth</code> values receive events but can allow <code>ClutterActor</code>s below them to also receive events. Returning <code>TRUE</code> will stop events from being passed down, while <code>FALSE</code> will pass events down.
ko: 앞에서 말씀드린대로, 좀 더 큰 <code>depth</code> 값이 들어간 <code>ClutterActor</code>에서 이벤트를 받는데 <code>ClutterActor</code>의 아래에 있는 <code>ClutterActor</code>도 이벤트를 받을 수 있습니다. <code>TRUE</code>를 반환하면 이벤트를 전달해 내려가는 과정을 멈추며, <code>FALSE</code>를 반환하면 이벤트를 계속 하부로 전달해내려갑니다.

note: (itstool) path: note/p
en: Remember, however, that to receive events the <code>ClutterActor</code>s must be set <code>reactive</code>.
ko: 허나, <code>ClutterActor</code> 이벤트를 받으려면 <code>reactive</code>를 설정해야합니다.

note: (itstool) path: section/p
en: All of the code should now be ready to go. All you need now is some pictures to load. By default, the pictures are loaded from a <file>berlin_images</file> directory. If you want, you can change the <code>#define IMAGE_DIR_PATH</code> line near the top to refer to your photo directory, or create a <file>berlin_images</file> directory by clicking <guiseq><gui>Project</gui><gui>New Directory...</gui></guiseq> and creating a <file>berlin_images</file> directory as a subdirectory of the <file>photo-wall</file> directory. Make sure to put at least twelve images in the directory!
ko: 모든 코드 준비가 끝났습니다. 이제 그림을 불러오는 일이 필요합니다. 기본적으로 그림은 <file>berlin_images</file> 디렉터리에서 불러옵니다. 원한다면 사진 디렉터리 또는 <guiseq><gui>프로젝트</gui><gui>새 디렉터리…</gui></guiseq>를 누른 후 <file>photo-wall</file> 디렉터리의 하위 디렉터리로 <file>berlin_images</file> 디렉터리를 만든 후 참조하도록 상단 근처의 <code>#define IMAGE_DIR_PATH</code> 줄을 바꿀 수 있습니다. 디렉터리에 그림을 최소한 12개 넣었는지 확인하십시오.

note: (itstool) path: section/p
en: When you have done that, click <guiseq><gui>Build</gui><gui>Build Project</gui></guiseq> to build everything again, then <guiseq><gui>Run</gui><gui>Execute</gui></guiseq> to start the application.
ko: 다 끝났으면 <guiseq><gui>빌드</gui><gui>프로젝트 빌드</gui></guiseq>를 눌러 모두 다시 빌드하고, <guiseq><gui>실행</gui><gui>실행</gui></guiseq>을 눌러 프로그램을 시작하십시오.

note: (itstool) path: section/p
en: If you haven't already done so, choose the <file>Debug/src/photo-wall</file> application in the dialog that appears. Finally, hit <gui>Run</gui> and enjoy!
ko: 아직 마무리가 안됐다면 나타나는 대화상자에서 <file>Debug/src/photo-wall</file> 프로그램을 선택하십시오. 마지막으로 <gui>실행</gui>을 치고 즐기시죠!

note: (itstool) path: section/p
en: If you run into problems with the tutorial, compare your code with this <link href="photo-wall/photo-wall.c">reference code</link>.
ko: 지침서를 따라하는 실행하는 과정에 문제가 있다면, <link href="photo-wall/photo-wall.c">참조 코드</link>와 여러분의 코드를 비교해보십시오.

[ctx: text]
note: (itstool) path: info/title
en: ProgressBar (C)
ko: ProgressBar(C)

note: (itstool) path: info/desc
en: A widget which indicates progress visually
ko: 진행 과정을 눈에 보이게 나타내는 위젯

note: (itstool) path: page/p
en: This ProgressBar "fills in" by a fraction of the bar until it is full.
ko: ProgressBar는 막대 칸이 찰 때까지 막대 비율 값을 "채워 넣습니다".

note: (itstool) path: info/desc
en: A bar which animates to indicate progress
ko: 진행 상황을 움직임으로 나타내는 표시줄입니다

note: (itstool) path: div/p
en: Pressing any key stops and starts this ProgressBar.
ko: 아무 키나 눌러서 ProgressBar 동작을 멈추거나 시작합니다.

note: (itstool) path: page/p
en: This ProgressBar is stopped and started by pressing any key.
ko: 이 ProgressBar는 어떤 키든 눌렀을 때 동작을 멈추거나 시작합니다.

note: (itstool) path: info/desc
en: A widget which indicates progress visually.
ko: 진행 상황을 눈으로 알 수 있게 나타냅니다.

note: (itstool) path: section/title
en: Useful methods for a ProgressBar widget
ko: ProgressBar 위젯에 쓸만한 메서드

note: (itstool) path: item/p
en: Instead of <code>pulse()</code>, that makes the bar go back and forth, if we want the ProgressBar to "fill in" a fraction (a <code>float</code> between <code>0.0</code> and <code>1.0</code> included) of the bar that has been completed, use <code>set_fraction(fraction)</code>.
ko: 표시줄을 앞뒤로 왔다갔다 하게 하는 <code>pulse()</code> 대신, ProgressBar를 표시줄 비율(<code>0.0</code>과 <code>1.0</code> 값도 해당하는 사이 <code>float</code> 값)만큼 완료 의미로 "채워 넣는"다면, <code>set_fraction(fraction)</code>을 사용하십시오.

note: (itstool) path: item/p
en: To set a text and show it (superimposed over the bar) use <code>set_text(<var>"text"</var>)</code> and <code>set_show_text(True)</code>. If a text is not set and <code>set_show_text(True)</code> the text will be the percentage of the work that has been completed.
ko: 텍스트를 설정하고 보여주려면 (표시줄에 겹쳐 나타남) <code>set_text(<var>"text"</var>)</code>와 <code>set_show_text(True)</code>를 사용하십시오. 텍스트를 설정하지 않았고 <code>set_show_text(True)</code> 함수를 호출하면 나타나는 텍스트는 작업 완료 백분율입니다.

note: (itstool) path: item/p
en: <link href="http://developer.gnome.org/glib/stable/glib-The-Main-Event-Loop.html">GLib - The Main Event Loop</link>
ko: <link href="http://developer.gnome.org/glib/stable/glib-The-Main-Event-Loop.html">GLib - 메인 이벤트 루프</link>

note: (itstool) path: item/p
en: <link href="http://developer.gnome.org/gdk/stable/gdk-Keyboard-Handling">Gdk - Key Values</link>
ko: <link href="http://developer.gnome.org/gdk/stable/gdk-Keyboard-Handling">Gdk - 키 값</link>

[ctx: text]
note: (itstool) path: info/title
en: Properties (Python)
ko: 속성(Python)

note: (itstool) path: info/desc
en: An explanation of properties, getters and setters.
ko: 속성, 게터함수, 세터함수를 설명합니다.

note: (itstool) path: page/title
en: Properties
ko: 속성

note: (itstool) path: section/p
en: <em>Properties</em> describe the configuration and state of widgets. Each widget has its own particular set of properties. For example, a widget such as a button has the property <code>label</code> which contains the text of the widget. You can specify the name and value of any number of properties as keyword arguments when creating an instance of a widget. For example, to create a label with the text “Hello World”, an angle of 25 degrees, and aligned to the right, you can use:
ko: <em>속성</em>은 설정과 위젯 상태를 설명합니다. 각 위젯에는 몇가지 특별한 속성 모음이 있습니다. 예를 들어 단추 같은 위젯에는 위젯 텍스트를 넣을 수 있는 <code>label</code> 속성이 있습니다. 위젯 인스턴스를 만들 때 키워드 인자로 여러가지 프로퍼티의 이름과 값을 지정할 수 있습니다. 예를 들어, “Hello world” 레이블을 25도 기울여서 오른쪽 정렬 상태로 만들려면:

note: (itstool) path: section/p
en: Alternatively, you can define these properties separately by using the method associated with it.
ko: 대신, 관련 메서드를 사용하여 속성을 따로 설정할 수 있습니다.

note: (itstool) path: section/p
en: Once you have created such a label, you can get the text of the label with <code>label.get_label()</code>, and analogously for the other properties.
ko: 레이블 같은걸 만들고 나면 <code>label.get_label()</code> 함수로 텍스트를 가져올 수 있으며, 다른 속성에 대해서도 비슷합니다.

note: (itstool) path: section/p
en: Instead of using getters and setters you can also get and set the properties with <code>get_property(<var>"prop-name"</var>)</code> and <code>set_property(<var>"prop-name"</var>, <var>value</var>)</code>, respectively.
ko: 게터, 세터 함수를 사용하는 대신 <code>get_property(<var>"prop-name"</var>)</code>함수와 <code>set_property(<var>"prop-name"</var>, <var>value</var>)</code>함수를 각각 사용하여 속성 값을 가져오고 설정할 수 있습니다.

note: (itstool) path: section/p
en: <link href="http://python-gtk-3-tutorial.readthedocs.org/en/latest/basics.html">Basics - Properties</link> in Python GTK+ 3 Tutorial
ko: 파이썬 GTK+ 3 따라하기 지침서의 <link href="http://python-gtk-3-tutorial.readthedocs.org/en/latest/basics.html">속성 기본</link>

[ctx: link]
note: (itstool) path: info/title
en: Python
ko: 파이썬

note: (itstool) path: page/title
en: Tutorials, code samples and platform demos in Python
ko: 파이썬용 따라하기 지침서, 코드 예제, 플랫폼 데모

note: (itstool) path: section/title (itstool) path: page/title
en: Tutorial for beginners
ko: 초보자용 따라하기 지침서

note: (itstool) path: info/desc
en: A choice from multiple checkbuttons
ko: 여러 확인 단추를 선택합니다

note: (itstool) path: page/p
en: These radiobuttons report their activity in the terminal.
ko: 이 RadioButton은 터미널의 활동을 알려줍니다.

note: (itstool) path: info/desc
en: Only one can be selected at a time
ko: 한번에 하나만 선택할 수 있습니다

note: (itstool) path: page/p
en: RadioButtons are named after old-style car radios, which had buttons for switching between channel presets. Because the radio could only be tuned to one station at a time, only one button could be pressed in at a time; if you pressed a new one, the one that was already pressed in would pop back out. That's how these buttons work, too.
ko: RadioButton 이름은 미리 설정해둔 채널을 전환할 때 사용하는 단추의 모양새 동작에 착안하여 구식 자동차 라디오에서 왔습니다. 라디오 채널 설정은 한번에 하나만 할 수 있기 때문에, 오직 하나의 단추만 눌립니다. 새 단추를 누르면 먼저 눌려있던 단추는 도로 튀어나옵니다. 이게 바로 라디오 단추가 동작하는 방식입니다.

note: (itstool) path: page/p
en: Each RadioButton needs a text label and a group. Only one button in a group can be selected at a time. You don't name each group; you just set new RadioButtons to be part of the same group as an existing one. If you create a new one outside of a group, it automatically creates a new group for it to be part of.
ko: 각 라디오 단추는 텍스트 레이블을 넣고 그룹으로 묶어야합니다. 그룹에서는 한번에 하나의 단추만 선택할 수 있습니다. 각 그룹에 이름을 달 수는 없습니다. 새 RadioButton은 기존의 단추와 마찬가지로 동일한 그룹의 일부로 설정합니다. 그룹의 밖에 새 단추를 넣으면, 이 단추는 자동으로 새 그룹의 일부가 됩니다.

note: (itstool) path: section/p
en: All the code for this sample goes in the RadioButtonExample class. The above code creates a <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html">Gtk.Application</link> for our widgets and window to go in.
ko: 이 예제의 모든 코드는 RadioButtonExample 클래스에 들어갑니다. 위 코드는 위젯과 창이 들어가는 <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html">Gtk.Application</link>을 만듭니다.

note: (itstool) path: section/title
en: Creating the radiobuttons
ko: RadioButton 만들기

note: (itstool) path: section/p
en: We use a <link xref="label.js">Gtk.Label</link> to set each group of RadioButtons apart. Nothing will stop you from putting RadioButtons from all different groups wherever you want, so if you want people to know which ones go together you need to organize things accordingly.
ko: 그룹에 있는 각 RadioButton 부분 부분마다 <link xref="label.js">Gtk.Label</link>을 설정 용도로 사용합니다. 원하는 어디든 모든 다른 그룹에 RadioButton을 넣지 못하게 하진 않습니다. 따라서 사용자가 어떤 단추를 한 묶음으로 두었는지 알 수 있게 하려면 묶음별로 정리해야합니다.

note: (itstool) path: section/p
en: Here are three different ways to create RadioButtons. The first is the usual way, where we create a new Gtk.RadioButton and assign its properties at the same time. The second and third use functions which automatically handle some of the properties; new_from_widget takes a single argument, the RadioButton that you want to put this new one in the same group as. Meanwhile, new_with_label_from_widget takes that and the RadioButton's label at the same time.
ko: RadioButton을 만드는 방법은 세가지가 있습니다. 첫번째는 Gtk.RadioButton을 새로 만들고 속성을 동시에 지정하는 일반적인 방법, 두번째와 세번째는 일부 속성 값을 자동으로 처리하는 함수를 사용하는 방법입니다. new_from_widget은 동일한 그룹에 새 단추를 넣으려고 할 때 넣을 RadioButton 단일 인자를 취하지만, new_with_label_from_widget은 RadioButton 레이블을 함께 취합니다.

note: (itstool) path: section/p
en: The first RadioButton in a group is the one that's selected by default. Try uncommenting the last line in this sample code to see how you can set a different one to be the default selection.
ko: 그룹의 처음 RadioButton은 기본으로 선택하는 항목입니다. 이 예제 코드의 마지막 줄 주석 표시를 제거해보셔서 다른 항목을 어떻게 기본으로 선택할 수 있는지 확인해보십시오.

note: (itstool) path: section/p
en: Here we create the label for the second group of buttons, and then create them all the same way.
ko: 여기서 그룹의 두번째 단추에 레이블을 만들어넣고, 나머지 단추에 대해서도 동일한 방식으로 만듭니다.

note: (itstool) path: section/title
en: Creating the rest of the user interface
ko: 사용자 인터페이스 나머지 부분 만들기

note: (itstool) path: section/p
en: This code creates a <link xref="button.js">Gtk.Button</link> and binds it to a function which will show people a silly message when they click OK, depending on which RadioButtons were selected.
ko: 이 코드는 <link xref="button.js">Gtk.Button</link>을 만들고 함수에 바인딩하여, 사용자가 확인을 누르면 어떤 RadioButton을 선택했느냐에 따라 유치한 메시지를 보여줍니다.

note: (itstool) path: section/p
en: To make sure the button's "OK" label shows up properly in every language that GNOME is translated into, remember to use one of Gtk's <link href="https://developer.gnome.org/gtk3/3.4/gtk3-Stock-Items.html">stock button types</link>.
ko: 단추의 "확인" 레이블을 그놈에서 번역한대로 각 언어로 올바르게 나타나게 하려면, GTK <link href="https://developer.gnome.org/gtk3/3.4/gtk3-Stock-Items.html">스톡 단추 형식</link> 활용 방식을 기억에서 되살려보십시오.

note: (itstool) path: section/p
en: We use a separate <link xref="grid.js">Gtk.Grid</link> to organize each group of radio buttons. This way we can change the layout with less fuss later on. The second Grid has a margin on top, to visually separate the two sets of choices.
ko: 라디오 단추를 각 그룹으로 묶는 용도로 <link xref="grid.js">Gtk.Grid</link> 를 따로 사용합니다. 이 방식대로라면 나중에 덜 난리나는 방식으로 배치를 바꿀 수 있습니다. 두번째 그리드는 상단에 여백을 두었는데 두 선택 그룹을 눈으로 보기에 따로 나뉘어 보기에 한 부분입니다.

note: (itstool) path: section/p
en: After we've organized them, we put them into a third, master Grid, along with the OK button. Then we attach that to the window.
ko: 이렇게 정돈한 다음에는 세번째로 마스터 그리드를 넣고, 그 안에 확인 단추를 넣습니다. 이 과정이 끝나면 마스터 그리드를 창에 넣습니다.

note: (itstool) path: section/p
en: Finally, we tell the window and everything inside it to become visible when the application is run.
ko: 마지막으로 프로그램을 실행할 때 창과 창에 있는 모든 요소를 나타내라고 하겠습니다.

note: (itstool) path: section/p
en: When you click OK, a <link xref="messagedialog.js">Gtk.MessageDialog</link> appears. This function creates and displays the popup window, then binds its OK button to a function that closes it. What text appears in the popup depends on the _messageText() function, which returns a different value depending on which set of options you chose.
ko: 확인을 누르면 <link xref="messagedialog.js">Gtk.MessageDialog</link>가 나타납니다. 이 함수는 팝업 창을 만들어 띄운 후 창을 닫는 확인 단추에 함수를 연결합니다. 여러분이 선택한 옵션 설정에 따라 다른 값을 반환하는 _messageText() 함수에서 반환하는 값에 따라 팝업 창에 나타나는 텍스트가 달라집니다.

note: (itstool) path: section/p
en: The get_active() method is how we can tell which RadioButton's pressed in. This function returns a different silly message depending on which set of buttons was pressed. Its return value is used as the MessageDialog's text property.
ko: get_active() 메서드는 지금 눌린 RadioButton이 뭔지 알아볼 수 있는 수단입니다. 이 함수에는 어떤 단추를 눌렀느냐에 따라 각기 다른 유치한 메시지를 반환합니다. 반환 값은 MessageDialog의 텍스트 속성 값으로 활용합니다.

note: (itstool) path: section/p
en: This function is called when the MessageDialog's OK button is pressed. It simply makes the popup go away.
ko: 이 함수는 MessageDialog의 확인 단추를 누를 때 호출합니다.

note: (itstool) path: section/p
en: Finally, we create a new instance of the finished RadioButtonExample class, and set the application running.
ko: 마지막으로, 마무리 지은 RadioButtonExample 클래스의 새 인스턴스를 만들고 프로그램 실행을 설정하겠습니다.

note: (itstool) path: info/desc
en: Mutually exclusive buttons.
ko: 상호 배타적 관계의 단추입니다.

note: (itstool) path: page/p
en: Three RadioButtons. You can see in the terminal if they are turned off or on.
ko: RadioButton이 세개가 있습니다. 터미널에서 켜고 끈 단추를 볼 수 있습니다.

note: (itstool) path: section/title
en: Useful methods for a RadioButton widget
ko: RadioButton 위젯에 쓸만한 메서드

note: (itstool) path: section/p
en: In line 16 the signal <code>"toggled"</code> is connected to the callback function <code>toggled_cb()</code> using <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. See <link xref="signals-callbacks.py"/> for a more detailed explanation.
ko: 16번째 줄에서 <code>"toggled"</code> 시그널은 <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code> 함수로  <code>toggled_cb()</code> 콜백 함수에 연결했습니다. 더 자세한 설명은 <link xref="signals-callbacks.py"/>를 참조하십시오.

note: (itstool) path: section/p
en: As seen in <link xref="properties.py"/>, instead of <code>button1 = Gtk.RadioButton(label="Button 1")</code> we could create the button and label it with
ko: <link xref="properties.py"/>에서 보신 바와 같이 <code>, button1 = Gtk.RadioButton(label="Button 1")</code> 대신 다음 코드로 단추와 레이블을 만들 수 있습니다

note: (itstool) path: section/p
en: Yet another way to create a new RadioButton with a label is <code>button1 = Gtk.RadioButton.new_with_label(None, "Button 1")</code> (the first argument is the group of the radiobuttons, which we can get with <code>get_group()</code>, the second argument is the label).
ko: 레이블을 붙여서 새 RadioButton을 만드는 또 다른 방법은 <code>button1 = Gtk.RadioButton.new_with_label(None, "Button 1")</code>(처음 인자는 <code>get_group()</code>으로 가져올 수 있는 라디오 단추의 그룹, 두번째 인자는 레이블입니다) 코드를 활용하는 방법입니다.

note: (itstool) path: info/desc
en: A choice from multiple CheckButtons.
ko: 여러 CheckButton으로 선택합니다.

note: (itstool) path: page/p
en: These RadioButtons report their activity in the terminal.
ko: 이 RadioButton은 터미널에 해당 활동을 알립니다.

[ctx: text]
note: (itstool) path: info/title
en: Record collection (JavaScript)
ko: 레코드 수집(JavaScript)

note: (itstool) path: info/desc
en: Create a small database application for ordering your music collection
ko: 음악 모음을 정렬하는 간단한 데이터베이스 프로그램을 만듭니다

note: (itstool) path: page/title
en: Record collection
ko: 레코드 수집

note: (itstool) path: item/p
en: How to connect to a database using libgda
ko: libgda로 데이터베이스 연결하기

note: (itstool) path: item/p
en: How to insert and browse records in a database table
ko: 데이터베이스 테이블로의 레코드 삽입 및 테이블 탐색

note: (itstool) path: section/p
en: This demo uses the Javascript language. We are going to demonstrate how to connect and use a database from a GTK program, by using the GDA (GNOME Data Access) library. Thus you also need this library installed.
ko: 이 시연 프로그램에서는 Javascript 언어를 활용합니다. GTK 프로그램에서 GDA(그놈 데이터 액세스) 라이브러리로 데이터베이스를 연결하고 활용하는 방법을 보여드리겠습니다. 고로, 이 라이브러리도 설치해야합니다.

note: (itstool) path: section/p
en: GNOME Data Access (GDA) is library whose purpose is to provide universal access to different kinds and types of data sources. This goes from traditional relational database systems, to any imaginable kind of data source such as a mail server, a LDAP directory, etc. For more information, and for a full API and documentation, visit the <link href="http://library.gnome.org/devel/libgda/stable/">GDA website</link>.
ko: 그놈 데이터 액세스(GDA)는 다양한 종류와 형식의 데이터 공급원에 통합 방식으로 접근하는 수단을 제공합니다. 전통적인 관계형 데이터베이스 시스템에서 시작하여 메일 서버, LDAP 디렉터리 등과 같은 상상할 수 있는 데이터 공급원을 다룹니다. 더 많은 내용, 전체 API, 문서를 확인해보시려면  <link href="http://library.gnome.org/devel/libgda/stable/">GDA 웹사이트</link>를 방문해보십시오.

note: (itstool) path: section/p
en: Although a big part of the code is related to user interface (GUI), we are going to focus our tutorial on the database parts (we might mention other parts we think are relevant though). To know more about Javascript programs in GNOME, see the <link xref="image-viewer.js">Image Viewer program</link> tutorial.
ko: 비록 코드 상당 부분이 사용자 인터페이스(GUI)와 관련 있지만, 데이터베이스 부분의 따라하기 지침에 역점을 두었습니다(아마도 관련이 있는 다른 부분에도 언급할지도 모릅니다). 그놈 Javascript 프로그래밍을 더 알아보려면 <link xref="image-viewer.js">그림 보기 프로그램</link> 따라하기 지침 부분을 참고하십시오.

note: (itstool) path: item/p
en: Choose <gui>Generic Javascript</gui> from the <gui>JS</gui> tab, click <gui>Forward</gui>, and fill-out your details on the next few pages. Use <file>record-collection</file> as project name and directory.
ko: <gui>JS</gui> 탭에서 <gui>일반 Javascript</gui>를 선택하고, <gui>앞으로</gui>을 누른 다음, 나타난 페이지에서 몇가지 자세한 내용을 입력하십시오. 프로젝트 이름과 디렉터리에 <file>record-collection</file>을 입력하십시오.

note: (itstool) path: item/p
en: Click <gui>Finished</gui> and the project will be created for you. Open <file>src/main.js</file> from the <gui>Project</gui> or <gui>File</gui> tabs. It contains very basic example code.
ko: <gui>마침</gui>을 누르면 프로젝트를 만들어줍니다. <gui>프로젝트</gui>나 <gui>파일</gui>탭에서 <file>src/main.js</file> 파일을 여십시오. 매우 기본적인 예제 코드가 있습니다.

note: (itstool) path: section/title
en: Program Structure
ko: 프로그램 구조

note: (itstool) path: section/p
en: This demo is a simple GTK application (with a single window) capable of inserting records into a database table as well as browsing all records of the table. The table has two fields: <code>id</code>, an integer, and <code>name</code>, a varchar. The first section (on the top) of the application allows you to insert a record into the table. The last section (bottom) allows you to see all the records of that table. Its content is refreshed every time a new record is inserted and on the application startup.
ko: 이 시연 프로그램은 데이터베이스 테이브의 모든 레코드를 탐색할 뿐만 아니라 레코드를 넣는 기능도 있는 간단한(단일 창)  GTK 프로그램입니다. 테이블에는 정수형 값을 넣는 <code>id</code> 필드와 가변 문자열(varchar) 형식의 <code>name</code> 필드가 있습니다. 프로그램의 (상단) 처음 섹션에서는 테이블에 레코드를 넣을 수 있습니다. 프로그램의 마지막 섹션(바닥)에서는 테이블의 모든 레코드를 살펴볼 수 있습니다. 이 내용은 새 레코드를 넣을때와 프로그램을 시작할 때마다 새로 고쳐서 보여줍니다.

note: (itstool) path: section/title
en: Starting the fun
ko: 재미로 시작하기

note: (itstool) path: section/p
en: Let's start by examining the skeleton of the program:
ko: 프로그램 뼈대 검토를 우선 시작하겠습니다:

note: (itstool) path: item/p
en: Lines 1‒4: Initial imports. Pay special attention to line 3, which tells Javascript to import the GDA library, our focus in this tutorial.
ko: 1~4번째 줄: 초기 임포팅입니다. JavaScript로 GDA 라이브러리를 가져오는 이 따라하기 지침의 핵심부분인 세번째 줄에 특히 주목하십시오.

note: (itstool) path: item/p
en: Lines 6‒17: Define our <code>Demo</code> class. Pay special attention to lines 13‒15, where we call 3 methods which will do the whole job. They will be detailed below.
ko: 6~17번째 줄: <code>Demo</code> 클래스를 정의합니다. 전체 작업을 담당하는 메서드 3개를 호출하는 13~15번째 줄에 주목하십시오. 자세한 내용은 아래에서 설명하겠습니다.

note: (itstool) path: item/p
en: Lines 19‒23: Start the application.
ko: 19~23번째 줄: 프로그램을 시작합니다.

note: (itstool) path: section/title
en: Designing the application
ko: 프로그램 설계

note: (itstool) path: section/p
en: Let's take a look at the <code>setupWindow</code> method. It is responsible for creating the User Interface (UI). As UI is not our focus, we will explain only the relevant parts.
ko: <code>setupWindow</code> 메서드를 살펴보겠습니다. 이 메서드는 사용자 인터페이스(UI)를 만드는 역할을 합니다. UI는 중요한 부분이 아니니 관련 부분만 설명하겠습니다.

note: (itstool) path: item/p
en: Lines 22 and 27: Create the 2 entries (for the two fields) in which users will type something to get inserted in the database.
ko: 22번째, 27번째 줄: 어떤 사용자가 데이터베이스에 들어간 내용을 입력하는 항목 2개(필드 2개)를 만듭니다.

note: (itstool) path: item/p
en: Lines 31‒34: Create the Insert button. We connect its <code>clicked</code> signal to the <code>_insertClicked</code> private method of the class. This method is detailed below.
ko: 31~34번째 줄: 삽입 단추를 만듭니다. <code>clicked</code> 시그널을 클래스의 <code>_insertClicked</code> private 메서드에 연결했습니다. 이 메서드는 아래에서 자세히 설명하겠습니다.

note: (itstool) path: item/p
en: Line 39: Create the widget (<code>TextView</code>) where we will show the contents of the table.
ko: 39번째 줄: 테이블의 내용을 보여줄 위젯(<code>TextView</code>)을 만듭니다.

note: (itstool) path: item/p
en: Line 44: Create the label where we will show the number of records in the table. Initially it's empty, it will be updated later.
ko: 44번째 줄: 테이블의 여러 레코드를 보여줄 레이블을 만듭니다. 초기에는 비어있습니다만, 나중에 업데이트합니다.

note: (itstool) path: section/title
en: Connecting to and initializing the database
ko: 데이터베이스 연결 및 초기화

note: (itstool) path: section/p
en: The code which makes the connection to the database is in the <code>setupDatabase</code> method below:
ko: <code>setupDatabase</code> 메서드에서 데이터베이스를 연결하는 코드는 아래와 같습니다:

note: (itstool) path: item/p
en: Lines 2‒3: Create the GDA's <code>Connection</code> object. We must supply to its constructor some properties:
ko: 2~3번쨰 줄: GDA의 <code>Connection</code> 객체를 만듭니다. 생성자에 속성 몇가지를 넣어야합니다:

note: (itstool) path: item/p
en: <code>provider</code>: One of GDA's supported providers. GDA supports SQLite, MySQL, PostgreSQL, Oracle and many others. For demo purposes we will use a SQLite database, as it comes installed by default in most distributions and it is simple to use (it just uses a file as a database).
ko: <code>provider</code>: GDA에서 지원하는 프로파이더 중 하나입니다. GDA에서는 SQLite, MySQL, PostSQL, Oracle 등 수많은 데이터베이스 엔진을 지원합니다. 시연 목적으로, 대부분의 배포판에서 기본적으로 SQLite를 설치하며 쓰기 쉽기 때문에(파일을 데이터베이스로 활용) SQLite 데이터베이스를 사용하겠습니다.

note: (itstool) path: item/p
en: <code>cnc_string</code>: The connection string. It may change from provider to provider. The syntax for SQLite is: <code>DB_DIR=<var>PATH</var>;DB_NAME=<var>FILENAME</var></code>. In this demo we are accessing a database called gnome_demo in the user home dir (note the call to GLib's <code>get_home_dir</code> function).
ko: <code>cnc_string</code>: 연결 문자열. 프로바이더를 바꿉니다. SQLite용 문법은 <code>DB_DIR=<var>PATH</var>;DB_NAME=<var>FILENAME</var></code> 입니다. 시연 프로그램에서는 사용자 주 디렉터리(GLib의 <code>get_home_dir</code> 함수 호출 참고)에 둔 gnome_demo 데이터베이스에 접근하겠습니다.

note: (itstool) path: note/p
en: If the provider is not supported by GDA, or if the connection string is missing some element, line 2 will raise an exception. So, in real life we should handle it with JavaScript's statement <code>try</code>...<code>catch</code>.
ko: GDA에서 지원하지 않는 프로바이더가 있고, 연결 문자열에 어떤 구성 요소가 빠지면, 2번째 줄에 예외가 일어납니다. 따라서 실제로 JavaScript의 구문 <code>try</code>...<code>catch</code>로 처리해야합니다.

note: (itstool) path: item/p
en: Line 4: Open the connection. In the SQLite provider, if the database does not exist, it will be created in this step.
ko: 4번째 줄: 연결합니다. SQLite 프로바이더에서 데이터베이스가 없으면 이 단계에서 만듭니다.

note: (itstool) path: item/p
en: Lines 6‒10: Try to do a simple select to check if the table exists (line 7). If it does not exist (because the database was just created), this command will raise an exception, which is handled by the <code>try</code>...<code>catch</code> block. If it is the case, we run the create table statement (line 9).
ko: 6~10번째 줄: 테이블이 있는지(7번째 줄) 간단하게 SELECT 문을 시도해봅니다. (데이터베이스를 방금 만들어서)테이블이 없으면, 이 명령에서 <code>try</code>...<code>catch</code> 블록에서 처리할 예외가 나타납니다. 이 경우 CREATE TABLE 구문을 실행합니다(9번째 줄).

note: (itstool) path: item/p
en: In order to run the SQL commands above we are using the GDA connection methods <code>execute_select_command</code> and <code>execute_non_select_command</code>. They are simple to use, and just require two arguments: The <code>Connection</code> object and the SQL command to be parsed.
ko: GDA 연결용 <code>execute_select_command</code> 메서드와 <code>execute_non_select_command</code> 메서드로 위 SQL 명령을 실행합니다. 사용법은 단순하며  <code>Connection</code> 객체와 해석할 SQL 명령을 두 매개변수 값으로 활용하므로 단순합니다.

note: (itstool) path: section/p
en: At this point we have the database set up, and are ready to use it.
ko: 이 시점에 데이터베이스를 설정했고 사용할 준비가 끝났습니다.

note: (itstool) path: section/title
en: Selecting
ko: 선택

note: (itstool) path: section/p
en: After connecting to the database, our demo's constructor calls the <code>selectData</code> method. It is responsible for getting all the records in the table and showing them on the <code>TextView</code> widget. Let's take a look at it:
ko: 데이터베이스를 연결하고 나면, 데모 생성자에서 <code>selectData</code> 메서드를 호출합니다. 이 메서드는 테이블의 모든 레코드를 가져와서 <code>TextView</code> 위젯에 나타냅니다. 이제 살펴보도록 하겠습니다:

note: (itstool) path: item/p
en: Line 2: The <code>SELECT</code> command. We are using the GDA connection's <code>execute_select_command</code> method for that. It returns a <code>DataModel</code> object, which is later used to retrieve the rows.
ko: 2번째 줄: <code>SELECT</code> 명령. GDA 연결의 <code>execute_select_command</code> 메서드를 이 목적으로 활용합니다. 나중에 레코드 행을 가져올 때 사용할 <code>DataModel</code>을 반환합니다.

note: (itstool) path: item/p
en: Line 3: Create an <code>Iter</code> object, which is used to iterate over the <code>DataModel</code>'s records.
ko: 3번째 줄: <code>DataModel</code>의 여러 레코드를 순회할 때 활용할 <code>Iter</code> 객체를 만듭니다.

note: (itstool) path: item/p
en: Line 7: Loop through all the records, fetching them with the help of the <code>Iter</code> object. At this point, the <code>iter</code> variable contains the actual, retrieved data. Its <code>move_next</code> method returns <code>false</code> when it reaches the last record.
ko: 7번째 줄: 레코드 전체를 반복문으로 돌고 <code>Iter</code> 객체의 도움으로 가져옵니다. 여기서 <code>iter</code> 변수에는 실제로 가져온 데이터가 들어갑니다. <code>move_next</code> 메서드에서 마지막 레코드에 도달하면 <code>false</code>를 반환합니다.

note: (itstool) path: item/p
en: Lines 8‒9: We do two things in each line:
ko: 8~9번째 줄: 다음 두가지 동작을 각 줄 별로 행합니다:

note: (itstool) path: item/p
en: Use <code>Iter</code>'s method <code>get_value_at</code>, which requires only one argument: the column number to retrieve, starting at 0. As our <code>SELECT</code> command returns only two columns, we are retrieving columns 0 and 1.
ko: 하나의 인자만 필요한 <code>Iter</code>의 <code>get_value_at</code> 메서드를 활용합니다. 이 인자에는 가져올 열 번호가 들어가며 0번 부터 시작합니다. <code>SELECT</code> 명령에서 열 두개만 반환하므로 0번과 1번 열만 가져옵니다.

note: (itstool) path: item/p
en: The method <code>get_value_at</code> returns the field in GLib's <code>GValue</code> format. A simple way to convert this format to a string is by using GDA's global function <code>value_stringify</code>. That's what we are doing here, and we store the results in the variables <code>id_field</code> and <code>name_field</code>.
ko: <code>get_value_at</code> 메서드에서 GLib의 <code>GValue</code> 형식 필드를 반환합니다. 이 형식을 문자열로 변환하는 가장 쉬운 방법은 GDA의 전역 함수 <code>value_stringify</code>를 사용하면 됩니다. 이게 여기서 우리가 처리하려는 일이며,  <code>id_field</code>, <code>name_field</code> 변수에 결과를 저장합니다.

note: (itstool) path: item/p
en: Line 11: Concatenate the two fields to make one text line, separated by <code>"=&gt;"</code>, and store it in the <code>text</code> variable.
ko: 11번째 줄: 두 필드 문자열을 하나로 합치며, 사이에 <code>"=&gt;"</code> 문자열을 넣고 <code>text</code>변수에 저장합니다.

note: (itstool) path: item/p
en: Line 14: After the loop is finished, we have all the records formatted in the <code>text</code> variable. In this line we just set the contents of the <code>TextView</code> with that variable.
ko: 14번째 줄: 반복문 실행이 끝나면 <code>text</code> 변수에 형식을 갖추어 저장한 모든 레코드를 확보합니다. 이 줄에서는 해당 변수를 <code>TextView</code> 의 내용으로 설정합니다.

note: (itstool) path: item/p
en: Line 15: Display the number of records in the table, making use of the <code>DataModel</code>'s <code>get_n_rows</code> method.
ko: 15번째 줄: <code>DataModel</code>의 <code>get_n_rows</code> 메서드를 활용하여 테이블의 수많은 레코드를 표시합니다.

note: (itstool) path: section/title
en: Inserting
ko: 삽입

note: (itstool) path: section/p
en: OK, we know how to connect to a database and how to select rows from a table. Now it's time to do an <code>INSERT</code> on the table. Do you remember above, in the method <code>setupWindow</code> we connected the <gui>Insert</gui> button's <code>clicked</code> signal to the method <code>_insertClicked</code>? Let's see the implementation of this method.
ko: 좋습니다. 데이터베이스에 연결하고 테이블에서 행을 선택하는 방법을 알았습니다. 이제 테이블에 대해 <code>INSERT</code> 구문을 수행할 시간입니다. <code>setupWindow</code> 메서드에서 <gui>Insert</gui> 단추의  <code>clicked</code> 시그널을 <code>_insertClicked</code> 메서드에 연결한 부분을 기억하시죠? 이 메서드의 구현부를 살펴보겠습니다.

note: (itstool) path: section/p
en: We have learned how to use the GDA connection's methods <code>execute_select_command</code> and <code>execute_non_select_command</code> to quickly execute SQL commands on the database. GDA allows one to build a SQL statement indirectly, by using its <code>SqlBuilder</code> object. What are the benefits of this? GDA will generate the SQL statement dynamically, and it will be valid for the connection provider used (it will use the same SQL dialect the provider uses). Let's study the code:
ko: GDA 연결의 메서드 <code>execute_select_command</code>, <code>execute_non_select_command</code>를 활용하여 데이터베이스에서 SQL 명령을 빠르게 실행하는 방법을 알았습니다. GDA 에서는 <code>SqlBuilder</code> 객체로 SQL 구문을 간접적으로 만듭니다. 어떤 장점이 있을까요? GDA에서는 SQL 구문을 동적으로 만들어, 활용하는 연결 제공자에서 올바른 구문으로 간주합니다(프로바이더에서 사용하는 동일한 SQL 변형 문법도 할용합니다). 코드를 살펴보겠습니다:

note: (itstool) path: item/p
en: Lines 2‒3: Check if the user filled all the fields. The code for the private method <code>_validateFields</code> is really simple and you can read it in the full demo source code.
ko: 2~3번쨰 줄: 사용자가 모든 필드를 채웠는지 확인합니다. 자체 메서드 <code>_validateFields</code>의 코드는 정말 단순하며 전체 시연 소스코드에서 알아볼 수 있습니다.

note: (itstool) path: item/p
en: Line 5: The faster way of doing the <code>INSERT</code>. It's commented out as we want to show how to use the <code>SqlBuilder</code> object to build a SQL statement portable across databases.
ko: 5번째 줄: <code>INSERT</code> 구문을 실행하는 빠른 방법입니다. 전 데이터베이스에 걸쳐 어디든 이식할 수 있는 SQL 구문을 만드는 <code>SqlBuilder</code> 활용법을 보고 싶으면 이 부분 주석을 제거하시면 됩니다.

note: (itstool) path: item/p
en: Line 7: Create the <code>SqlBuilder</code> object. We must pass the type of statement we are going to build. It can be <code>SELECT</code>, <code>UPDATE</code>, <code>INSERT</code> or <code>DELETE</code>.
ko: 7번째 줄:  <code>SqlBuilder</code> 객체를 만듭니다. 빌드할 구문 형식을 넘겨야합니다. <code>SELECT</code>, <code>UPDATE</code>, <code>INSERT</code>, <code>DELETE</code> 중 하나입니다.

note: (itstool) path: item/p
en: Line 8: Set the name of the table on which the built statement will operate (it will generate <code>INSERT INTO demo</code>)
ko: 8번째 줄: 만들어둔 구문을 수행할 테이블 이름을 설정합니다(<code>INSERT INTO demo</code> 구문을 만듬)

note: (itstool) path: item/p
en: Lines 9‒10: Set the fields and its values that will be part of the statement. The first argument is the field name (as in the table). The second one is the value for that field.
ko: 9~10번째 줄: 구문의 일부로 필드 이름과 값을 설정합니다. 첫번째 인자는 필드 이름(테이블에 있는 그대로), 두번째 인자는 필드의 값입니다.

note: (itstool) path: item/p
en: Line 11: Get the dynamically generated <code>Statement</code> object, which represents a SQL statement.
ko: 11번째 줄: 동적으로 만든 SQL 구문 <code>Statement</code> 객체를 가져옵니다.

note: (itstool) path: item/p
en: Line 12: Finally, execute the SQL statement (<code>INSERT</code>).
ko: 12번째 줄: 마지막으로 SQL 구문(<code>INSERT</code>)을 실행합니다.

note: (itstool) path: item/p
en: Line 14: Clear the id and name fields on the screen. The code for the private method <code>_clearFields</code> is really simple and you can read it in the full demo source code.
ko: 14번째 줄: 화면의 id와 name 필드를 지웁니다. private 메서드 <code>_clearFields</code>의 코드는 정말 단순하며 전체 시연 소스 코드에서 확인해볼 수 있습니다.

note: (itstool) path: item/p
en: Line 15: Refresh the view on the screen by doing another <code>SELECT</code>.
ko: 15번쨰 줄: 다른 <code>SELECT</code> 구문을 실행하며 화면의 뷰를 새로 고칩니다.

note: (itstool) path: note/p
en: You can also make use of parameters while building the statement. By using the <code>SqlBuilder</code> objects and parameters you are less subject to attacks like SQL injection. Check the <link href="http://library.gnome.org/devel/libgda/stable/">GDA documentation</link> for more information about parameters.
ko: 구문을 만들 때 매개변수를 사용할 수도 있습니다.  <code>SqlBuilder</code> 객체와 매개변수를 활용하여 SQL 인젝션 같은 공격을 덜 받을 수 있습니다. 매개변수에 대한 자세한 정보는 <link href="http://library.gnome.org/devel/libgda/stable/">GDA 문서</link>를 참고하십시오.

note: (itstool) path: section/p
en: All of the code you need should now be in place, so try running the code. You now have a database for your record collection!
ko: 필요한 모든 코드를 제자리에 넣었으니 코드를 실행해보겠습니다. 제대로 동작할겝니다. 이렇게 하여 레코드 수집용 데이터베이스를 만들었습니다!

note: (itstool) path: section/p
en: If you run into problems with the tutorial, compare your code with this <link href="record-collection/record-collection.js">reference code</link>.
ko: 지침서를 따라하는 실행하는 과정에 문제가 있다면, <link href="record-collection/record-collection.js">참조 코드</link>와 여러분의 코드를 비교해보십시오.

note: (itstool) path: item/p
en: Returned if an action widget has no response id, or if the dialog gets programmatically hidden or destroyed
ko: 동작 위젯에 응답 ID가 없거나 대화상자가 프로그램 진행상 숨겨졌거나 해체됐을 경우 반환합니다

note: (itstool) path: item/p
en: Generic response id, not used by GTK+ dialogs
ko: GTK+ 대화 상자에서 사용하지 않는 일반 응답 ID

note: (itstool) path: item/p
en: Returned if the dialog is deleted
ko: 대화 상자를 삭제했을 경우 반환합니다

note: (itstool) path: item/p
en: Returned by OK buttons in GTK+ dialogs
ko: GTK+ 대화 상자에서 확인 단추를 누르면 반환합니다

note: (itstool) path: item/p
en: Returned by Cancel buttons in GTK+ dialogs
ko: GTK+ 대화 상자에서 취소를 누르면 반환합니다

note: (itstool) path: item/p
en: Returned by Close buttons in GTK+ dialogs
ko: GTK+ 대화 상자에서 닫기를 누르면 반환합니다

note: (itstool) path: item/p
en: Returned by Yes buttons in GTK+ dialogs
ko: GTK+ 대화 상자에서 예를 누르면 반환합니다

note: (itstool) path: item/p
en: Returned by No buttons in GTK+ dialogs
ko: GTK+ 대화 상자에서 아니요를 누르면 반환합니다

note: (itstool) path: item/p
en: Returned by Apply buttons in GTK+ dialogs
ko: GTK+ 대화 상자에서 적용을 누르면 반환합니다

note: (itstool) path: item/p
en: Returned by Help buttons in GTK+ dialogs
ko: GTK+ 대화 상자에서 도움말을 누르면 반환합니다

note: (itstool) path: info/desc
en: A slider widget for selecting a value from a range
ko: 일정 범위 내에서 값을 선택하는 슬라이더 위젯

note: (itstool) path: page/p
en: Slide the scales!
ko: Scale 손잡이를 잡고 끌어봅시다!

note: (itstool) path: item/p
en: <link href="http://developer.gnome.org/glib/stable/glib-String-Utility-Functions.html#g-strdup-printf">String Utility Functions</link>
ko: <link href="http://developer.gnome.org/glib/stable/glib-String-Utility-Functions.html#g-strdup-printf">문자열 유틸리티 함수</link>

note: (itstool) path: info/desc
en: A slider which corresponds to a numerical value
ko: 숫자 값을 설정하는 슬라이더

note: (itstool) path: page/p
en: A Scale is a horizontal or vertical slider, that represents a value inside a numerical range. When you create a new Scale, you set what its default position is, what the numbers at the top and bottom of the range are, and things like how much it moves up or down when you click on the Scale to either side of the knob. To keep from having to type all that in every time you create a new Scale, you can create an object called an Adjustment which keeps track of all that, then tell each new Scale to use that Adjustment.
ko: Scale은 숫자값 범위 내의 값을 나타내는 수평 수직 방향의 슬라이더입니다. 새 Scale을 만들 때 기본 위치, 최소 최대 값, Scale의 손잡이를 양 끝에서 눌렀을 때 얼마나 옮길지를 설정합니다. 새 Scale을 만들 때마다 언제든 형식을 지키도록  Scale 값을 기억하는 Adjustment 객체를 만들고 새 Scale에 Adjustment를 사용하게 할 수 있습니다.

note: (itstool) path: page/p
en: This scale is a simple widget that lets you adjust the size of an iceberg that penguins live on. The number of penguins on the iceberg is the product of the values of the two sliders. Try playing with them and seeing what happens.
ko: 이 Scale은 펭귄이 살 빙산의 크기를 조절하는 간단한 위젯입니다. 빙산 위에 사는 수많은 펭귄은 슬라이더 두개의 값으로 만듭니다. 다루어보시고 어떤 일이 일어나는지 확인해보시죠.

note: (itstool) path: section/p
en: All the code for this sample goes in the ScaleExample class. The above code creates a <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html">Gtk.Application</link> for our widgets and window to go in.
ko: 이 예제의 모든 코드는 ScaleExample 클래스에 있습니다. 위 코드는 위젯과 창을 넣을 <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html">Gtk.Application</link>을 만듭니다.

note: (itstool) path: section/title
en: Creating the scales
ko: Scale 만들기

note: (itstool) path: section/p
en: The new_with_range method is one way to create a new Scale widget. The parameters it takes are a <link href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.Orientation.html">Gtk.Orientation</link>, the minimum value, the maximum value, and the increment for a single step. After that we use the Scale's methods to set its starting value, and how many decimal places it runs to. We also set its vertical alignment in this case, to control where it appears in the window.
ko: new_with_range 메서드는 새 Scale 위젯을 만드는 수단입니다. 매개변수에는 <link href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.Orientation.html">Gtk.Orientation</link>, 최소값, 최대 값, 증가 단계 값이 들어갑니다. 그 다음 Scale 메서드를 활용하여 시작 값과, 10진 값을 얼마나 둘지를 설정합니다. 또한 창에 나타내는 모양새를 수직으로 두게끔 설정하기도 합니다.

note: (itstool) path: section/p
en: We can use the set_draw_value method to tell it whether or not to show the number next to the sliding scale. It's commented out in this example.
ko: 슬라이딩 눈금에 숫자를 표시할 지 여부를 set_draw_value 메서드를 활용하여 설정할 수 있습니다. 이 예제에서는 주석 처리했습니다.

note: (itstool) path: section/p
en: An Adjustment is an object we can use to simplify things when creating a new Scale. The Adjustment's "value" property is what the Scale's default value is, while "upper" and "lower" make the high and low ends of the numerical range. Meanwhile, the increment values show how much the slider moves when you do things like click on it.
ko: Adjustment는 새 Scale을 만들 때 간단하게 활용할 수 있는 객체입니다. Adjustments의 "value" 속성은 Scale 기본 값, "upper"는 최대, "lower"는 최소 값을 나타냅니다. 한편 증가값은 Slider를 클릭했을 때 옮겨갈 단계 값을 보여줍니다.

note: (itstool) path: section/p
en: Here we create a new Scale object using _adjustment as its "adjustment" property. This is a great shortcut. We still have to tell it to round off the decimal place, though. Note that the draw_value property is commented out; this is how you tell it not to show the number next to the Scale when you're creating one this way.
ko: 여기서 우리는 _adjustment를 "adjustment" 속성으로 활용하여 새 Scale 객체를 만들었습니다. 굉장한 편의 수단입니다. 여전히 소숫점 영역을 반올림 해야 하긴 하지만요. 참고로 draw_value 속성은 주석처리했습니다. 이런 방식으로 Scale을 만들 때 Scale에 숫자를 표시하지 않는 방편이기 때문입니다.

note: (itstool) path: section/p
en: We can use the get_value method to find out the numerical value a Scale is set at. We can then do whatever we want with it, including multiply the two Scales' values together and have a <link xref="label.js">Label</link> show us the product. We set the label's text to wrap around, because we're having it display a silly message too.
ko: Scale에 설정한 숫자 값을 가져올 때 get_value 메서드를 사용할 수 있습니다. 그 다음 Scale 두 개의 값을 곱한 값을 <link xref="label.js">Label</link>에 보여주는 등 우리가 원하는 어떤 것이든 할 수 있습니다. 레이블의 텍스트는 줄을 바꿀 수 있는데, 줄을 바꾸지 않으면 말도 안되는 메시지를 화면에 보여주기 떄문입니다.

note: (itstool) path: section/p
en: After we create the Label, we connect the two Scales' "value-changed" signals to _recalc, a function that will recalculate the number of penguins on the iceberg and come up with a new message.
ko: Label을 만들고 나면 Scale의 "value-changed" 시그널을 빙산의 펭귄 수를 다시 계산해서 새 메시지로 띄우는 _recalc  함수에 연결하겠습니다.

note: (itstool) path: section/p
en: Here we create a <link xref="grid.js">Grid</link> to put everything in, then attach all our widgets to it. Note that here and on some of the widgets themselves we're using margins to keep things neatly spaced.
ko: 여기서 모든 위젯을 넣을 <link xref="grid.js">Grid</link>를 만들고 Grid에 다 넣겠습니다. 참고로 여기 그리고 일부 위젯 자체에 여백을 주어 정돈된 느낌을 주는 공간을 확보합니다.

note: (itstool) path: section/p
en: Finally, we add the Grid to the window, then tell the window to show itself and all the widgets inside of it.
ko: 마지막으로 Grid를 창에 추가하고 창 자체와 그 안에 있는 모든 위젯을 화면에 나타내게 하겠습니다.

note: (itstool) path: section/title
en: Function which handles the scales' values changing
ko: Scale 값을 바꾸는 함수

note: (itstool) path: section/p
en: Remember, we can get a Scale's value using its get_value method. Here we simply recalculate what the product of the two values is after one of the Scales is moved, add in a silly message depending on how many penguins are left, and change the wording on _label to show the new number and message.
ko: 기억하실지 모르겠지만, Scale 값을 get_value 메서드로 가져올 수 있습니다. 여기서는, 간단하게 Scale을 움직인 다음 두 Scale의 값을 다시 계산하고 펭귄이 몇마리가 남는지 어설픈 메시지를 추가한 다음, 동작 중인 _label을 바꿔 새 숫자가 들어간 메시지를 보여주겠습니다.

note: (itstool) path: section/p
en: Finally, we create a new instance of the finished ScaleExample class, and set the application running.
ko: 마지막으로, 마무리한 ScaleExample 클래스의 새 인스턴스를 만들고 프로그램을 실행하도록 설정하겠습니다.

note: (itstool) path: section/title
en: Useful methods for a Scale widget
ko: Scale 위젯에 쓸만한 메서드

note: (itstool) path: section/p
en: A Gtk.Adjustment is needed to construct the Gtk.Scale. This is the representation of a value with a lower and upper bound, together with step and page increments, and a page size, and it is constructed as <code>Gtk.Adjustment(value, lower, upper, step_increment, page_increment, page_size)</code> where the fields are of type <code>float</code>; <code>step_increment</code> is the increment/decrement that is obtained by using the cursor keys, <code>page_increment</code> the one that is obtained clicking on the scale itself. Note that <code>page_size</code> is not used in this case, it should be set to <code>0</code>.
ko: Gtk.Adjustment는 Gtk.Scale을 만들떄 필요합니다. 상한 값, 하한 값, 단계 및 페이지 증가 값을 저장하며, <code>Gtk.Adjustment(value, lower, upper, step_increment, page_increment, page_size)</code>로 구성합니다. 여기서 각 값은 <code>float</code>형식입니다. <code>step_increment</code>는 커서 키를 활용할 때 가져올 증가 감소 값이며, <code>page_increment</code>는 Scale 자체를 눌렀을 떄 가져올 값입니다. 참고로 지금과 같은 경우는 <code>page_size</code> 값을 활용하지 않으므로 <code>0</code> 값으로 설정해야합니다.

note: (itstool) path: section/p
en: In line 28 the signal <code>"value-changed"</code> is connected to the callback function <code>scale_moved()</code> using <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. See <link xref="signals-callbacks.py"/> for a more detailed explanation.
ko: 28번째 줄에서 <code>"value-changed"</code> 시그널은 <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code> 함수로  <code>scale_moved()</code> 콜백 함수에 연결했습니다. 더 자세한 설명은 <link xref="signals-callbacks.py"/>를 참조하십시오.

note: (itstool) path: item/p
en: <code>get_value()</code> retrieves the current value of the scale; <code>set_value(value)</code> sets it (if the <code>value</code>, of type <code>float</code>, is outside the minimum or maximum range, it will be clamped to fit inside them). These are methods of the class Gtk.Range.
ko: <code>get_value()</code> 함수는 Scale의 현재 값을 가져옵니다. <code>set_value(value)</code> 함수는 Scale 값을 설정합니다(<code>float</code> 형식의 <code>value</code> 값이 최소 최대 값 범위를 벗어나면, 범위내 값으로 바뀝니다). 이 메서드는 Gtk.Range 클래스에 있습니다.

note: (itstool) path: item/p
en: Use <code>set_draw_value(False)</code> to avoid displaying the current value as a string next to the slider.
ko: 슬라이더 옆에 현재 값을 나타나지 않게 하려면 <code>set_draw_value(False)</code> 함수를 사용하십시오.

note: (itstool) path: item/p
en: To highlight the part of the scale between the origin and the current value:
ko: 초기 값과 현재 값 사이의 Scale 부분을 강조하려면:

note: (itstool) path: item/p
en: in the callback function of the "value-changed" signal, so to have the new filling every time the value is changed. These are methods of the class Gtk.Range.
ko: "value-changed" 시그널의 콜백 함수에서는 값이 바뀔 때마다 새로 채워넣습니다. 이 메서드는 Gtk.Range 클래스에 있습니다.

note: (itstool) path: item/p
en: <code>add_mark(value, position, markup)</code> adds a mark at the <code>value</code> (<code>float</code> or <code>int</code> if that is the precision of the scale), in <code>position</code> (<code>Gtk.PositionType.LEFT, Gtk.PositionType.RIGHT, Gtk.PositionType.TOP, Gtk.PositionType.BOTTOM</code>) with text <code>Null</code> or <code>markup</code> in the Pango Markup Language. To clear marks, <code>clear_marks()</code>.
ko: <code>add_mark(value, position, markup)</code> 함수는 <code>value</code> 값 위치에, <code>position</code> 방향(<code>Gtk.PositionType.LEFT, Gtk.PositionType.RIGHT, Gtk.PositionType.TOP, Gtk.PositionType.BOTTOM</code>)으로,  <code>Null</code> 또는 팡고 마크업 언어인 <code>markup</code> 값 텍스트를 붙여 표시를 추가합니다(Scale에서 허용하는 값일 경우 <code>float</code>형 또는 <code>int</code>형). 마크를 지우려면 <code>clear_marks()</code> 함수를 사용하십시오.

note: (itstool) path: item/p
en: <code>set_digits(digits)</code> sets the precision of the scale at <code>digits</code> digits.
ko: <code>set_digits(digits)</code> 함수는 Scale 정밀도 자리수를 <code>digits</code> 자리로 설정합니다.

note: (itstool) path: item/p
en: <link href="http://developer.gnome.org/gtk3/unstable/gtk3-Standard-Enumerations.html">Standard Enumerations</link>
ko: <link href="http://developer.gnome.org/gtk3/unstable/gtk3-Standard-Enumerations.html">표준 서수형 값 목록</link>

note: (itstool) path: info/desc
en: Adds scrollbars to its child widget
ko: 스크롤 표시줄을 하위 위젯에 추가합니다

note: (itstool) path: page/p
en: An image in a scrolled window.
ko: 스크롤 창에 이미지를 나타냅니다.

note: (itstool) path: section/title
en: Useful methods for a ScrolledWindow widget
ko: ScrolledWindow 위젯에 쓸만한 메서드

note: (itstool) path: item/p
en: <code>set_policy(hscrollbar_policy, vscrollbar_policy)</code> where each of the arguments is one of <code>Gtk.Policy.AUTOMATIC, Gtk.Policy.ALWAYS, Gtk.Policy.NEVER</code> regulates whether the horizontal and vertical scrollbars should appear: with <code>AUTOMATIC</code> they appear only if needed, <code>ALWAYS</code> and <code>NEVER</code> are self-explanatory.
ko: <code>set_policy(hscrollbar_policy, vscrollbar_policy)</code> 함수에서 각 인자에는 수평 수직 방향으로 스크롤 표시줄을 나타낼지 여부를 정규화 한 <code>Gtk.Policy.AUTOMATIC, Gtk.Policy.ALWAYS, Gtk.Policy.NEVER</code> 값 중 하나가 들어갑니다. <code>AUTOMATIC</code> 값을 넣으면 필요할 경우 나타내며, <code>ALWAYS</code>, <code>NEVER</code>는 값에서 설명하는 의미와 같습니다.

note: (itstool) path: item/p
en: <code>add_with_viewport(widget)</code> is used to add the Gtk.Widget <code>widget</code> without native scrolling capabilities inside the window.
ko: <code>add_with_viewport(widget)</code> 함수는 창에 자체 스크롤 기능을 넣지 않고 Gtk.Widget <code>widget</code>을 추가하는데 사용합니다.

note: (itstool) path: item/p
en: <code>set_placement(window_placement)</code> sets the placement of the contents with respect to the scrollbars for the scrolled window. The options for the argument are <code>Gtk.CornerType.TOP_LEFT</code> (default: the scrollbars are on the bottom and on the right of the window), <code>Gtk.CornerType.TOP_RIGHT, Gtk.CornerType.BOTTOM_LEFT, Gtk.CornerType.BOTTOM_RIGHT</code>.
ko: <code>set_placement(window_placement)</code> 함수는 스크롤 창에서 스크롤 표시줄을 나타낼 컨텐트 위치를 설정합니다. 인자 옵션은 <code>Gtk.CornerType.TOP_LEFT</code> (기본값: 스크롤 표시줄을 창 하단과 우측에 나타냄), <code>Gtk.CornerType.TOP_RIGHT, Gtk.CornerType.BOTTOM_LEFT, Gtk.CornerType.BOTTOM_RIGHT</code>가 있습니다.

note: (itstool) path: item/p
en: <code>set_hadjustment(adjustment)</code> and <code>set_vadjustment(adjustment)</code> set the Gtk.Adjustment <code>adjustment</code>. This is the representation of a value with a lower and upper bound, together with step and page increments, and a page size, and it is constructed as <code>Gtk.Adjustment(value, lower, upper, step_increment, page_increment, page_size)</code> where the fields are of type <code>float</code>. (Note that <code>step_increment</code> is not used in this case, it can be set to <code>0</code>.)
ko: <code>set_hadjustment(adjustment)</code> 함수와 <code>set_vadjustment(adjustment)</code> 함수는 각각 Gtk.Adjustment <code>adjustment</code>를 설정합니다. 상한 값, 하한 값, 단계/페이지 증가 값, 페이지 크기를 나타내며, <code>Gtk.Adjustment(value, lower, upper, step_increment, page_increment, page_size)</code>로 만듭니다. 여기서 각 필드 값은 <code>float</code> 형식입니다. (참고로 지금 같은 경우는 <code>step_increment</code>를 사용하지 않으므로 <code>0</code> 값으로 설정합니다).

[ctx: text]
note: (itstool) path: info/title
en: Separator (C)
ko: 구분선(C)

note: (itstool) path: info/desc
en: A separator widget
ko: 구분선 위젯

note: (itstool) path: page/title
en: Separator
ko: 구분선

note: (itstool) path: page/p
en: A horizontal and a vertical separator divide some labels.
ko: 몇가지 레이블을 나누는 수평, 수직 구분선입니다.

note: (itstool) path: section/title
en: API Reference
ko: API 참고

[ctx: text]
note: (itstool) path: info/title
en: Separator (Python)
ko: 구분선(Python)

[ctx: text]
note: (itstool) path: info/title
en: Separator (Vala)
ko: 구분선(Vala)

note: (itstool) path: page/title
en: Set up gedit for JavaScript development
ko: JavaScript 개발용 지에디트 설정

note: (itstool) path: page/p
en: This tutorial will show you how to set up <link href="http://projects.gnome.org/gedit/">gedit</link>, GNOME's basic text editor, so that it has a handful of extra features which are useful for writing JavaScript code.
ko: 이 따라하기 지침서는 그놈 기본 텍스트 편집기 <link href="http://projects.gnome.org/gedit/">지에디트</link> 설정 방법을 보여주어 JavaScript 코드 작성에 쓸만한 추가 기능을 활성화할 수 있게 합니다.

note: (itstool) path: section/title
en: Making code clearer
ko: 코드를 명확하게 하기

note: (itstool) path: section/p
en: Click on <gui>Edit</gui> in gedit's menu bar, then click on <gui>Preferences</gui>. You should see something like this:
ko: 지에디트 메뉴 표시줄에서 <gui>편집</gui>을 누르고 <gui>기본 설정</gui>을 누르십시오. 다음과 같은 화면을 볼 수 있습니다:

note: (itstool) path: section/p
en: Here are the options you want to make sure are turned on.
ko: 활성화 여부를 확인할 옵션은 다음과 같습니다.

note: (itstool) path: item/p
en: <gui>Display line numbers</gui> will help you compare the code you type in with the original, and make it easier to see which line is causing an error if there is a bug.
ko: <gui>줄 번호 표시</gui> 옵션은 원래 여러분이 입력한 코드를 비교할 때 도움을 주며, 버그가 있을 경우 오류가 난 줄을 쉽게 찾아볼 수 있습니다.

note: (itstool) path: item/p
en: <gui>Highlight current line</gui> makes it easier to see which line you're on, when you have to go back and forth a lot.
ko: <gui>현재 줄 강조</gui> 옵션은 줄 위아래로 왔다갔다 하고 있을 때 몇번째 줄을 편집하고 있는지 쉽게 살펴볼 수 있게 합니다.

note: (itstool) path: item/p
en: <gui>Highlight matching brackets</gui> helps you make sure you didn't leave out a bracket by accident.
ko: <gui>일치하는 대괄호 강조</gui> 옵션은 실수로 괄호를 빼먹었는지 확인할 수 있게 합니다.

note: (itstool) path: section/title
en: Making editing easier
ko: 코드 편집을 쉽게 하기

note: (itstool) path: section/p
en: In gedit's <gui>Preferences</gui> dialog, click on the <gui>Editor</gui> tab. You should see something like this:
ko: 지에디트의 <gui>기본 설정</gui> 대화상자에서  <gui>편집기</gui> 탭을 누르십시오. 다음과 같은 화면을 볼 수 있습니다:

note: (itstool) path: section/p
en: Here, you want to have <gui>Enable automatic indentation</gui> turned on. This means that when you hit <key>Enter</key> the cursor stays indented as far as the last line was. This is extremely useful when writing JavaScript code, since it uses indentation to make it clearer which parts do what.
ko: <gui>자동 들여 쓰기 사용</gui>을 원하실지도 모르겠습니다. <key>Enter</key>키를 치면 마지막 줄을 들여쓴 만큼 커서를 둡니다. 들여쓸 부분에 들여쓰기를 사용하여 코드를 더 알아보기 쉽게 하므로, JavaScript 코드를 작성할 때 상당히 쓸만합니다.

note: (itstool) path: note/p
en: If you want to share code with other people who write GNOME JavaScript applications, you'll also want to set <gui>Tab width</gui> to 4 and turn on <gui>Insert spaces instead of tabs</gui>.
ko: 그놈 JavaScript 프로그램을 작성하는 다른 사람과 코드를 공유하려 한다면, <gui>탭 간격</gui> 을 4로 설정하고 <gui>탭 대신 공백 입력</gui>을 사용하십시오.

[ctx: text]
note: (itstool) path: info/title
en: Signals and callbacks (Python)
ko: 시그널과 콜백 함수(Python)

note: (itstool) path: info/desc
en: An explanation of signals and callbacks in GTK+.
ko: GTK+의 시그널과 콜백 함수를 설명합니다.

note: (itstool) path: page/title
en: Signals and callbacks
ko: 시그널과 콜백 함수

note: (itstool) path: section/p
en: Like most GUI toolkits, GTK+ uses an event-driven programming model. When the user is doing nothing, GTK+ sits in the main loop and waits for input. If the user performs some action - say, a mouse click - then the main loop "wakes up" and delivers an event to GTK+.
ko: GUI 툴킷처럼 GTK+ 에도 이벤트 주도 프로그래밍 모델을 사용합니다. 사용자가 아무 동작도 취하지 않으면 GTK+는 메인 루프상에 머무르며 입력을 기다립니다. 사용자가 어떤 동작을 취하면 - 마우스 클릭이라 칩시다 - 메인 루프가 "깨어나고" GTK+에 이벤트를 전달합니다.

note: (itstool) path: section/p
en: When widgets receive an event, they frequently emit one or more signals. Signals notify your program that "something interesting happened" by invoking functions you have connected to the signal. Such functions are commonly known as callbacks. When your callbacks are invoked, you would typically take some action. After a callback finishes, GTK+ will return to the main loop and await more user input.
ko: 위젯에서 이벤트를 받으면 하나 이상의 시그널을 내보냅니다. 시그널은 프로그램에 "기다리고 있던 무슨 일이 일어났다"는 사실을 시그널에 연결한 함수를 실행하여 알립니다. 이런 함수는 보통 콜백이라고 합니다. 콜백 함수를 실행하면 보통 어떤 동작을 취합니다. 콜백 함수 실행이 끝나면 GTK+에서 메인 루프로 돌아와서 다른 사용자의 입력을 기다립니다.

note: (itstool) path: section/p
en: A generic example is: <code>handler_id = widget.connect("event", callback, data)</code>. <code>widget</code> is an instance of a widget we created earlier. Next, the <code>event</code> we are interested in. Each widget has its own particular events which can occur. For instance, if you have a Gtk.Button you usually want to connect to the "clicked" event: this means that when the button is clicked, the signal is issued. Another example is the <code>notify::property</code> signal: whenever a <link xref="properties.py">property</link> is modified on a GObject, instead of just emitting the <code>notify</code> signal, GObject associates as a detail to this signal emission the name of the property modified. This allows clients who wish to be notified of changes to only one property to filter most events before receiving them. Thirdly, the callback argument is the name of the callback function, which contains the code which runs when signals of the specified type are issued. Finally, the optional data argument includes any data which should be passed when the signal is issued.
ko: 일반적인 예를 들자면 <code>handler_id = widget.connect("event", callback, data)</code> 코드가 있습니다. <code>widget</code>는 우리가 앞서 만든 인스턴스입니다. 그 다음 <code>event</code>는 우리가 기다리는 부분입니다. 각 위젯은 사용자의 동작으로 나타나는 자체 이벤트가 있습니다. 예를 들어 Gtk.Button에서 보통 여러분은 "clicked" 이벤트에 연결하고 싶어합니다. 단추를 누르면 시그널이 나온단 얘깁니다. 다른 예를 들자면 <code>notify::property</code> 시그널을 들 수 있습니다. GObject에서 언제든 <link xref="properties.py">property</link>를 수정했든지간에 <code>notify</code> 시그널을 내보내는 대신, GObject에서 수정한 속성 이름으로 더욱 자세한 상황을 시그널로 내보냅니다. 이런 방식을 통해 여러 이벤트 중 오직 하나의 속성이 바뀐 사실에 대해서만 받을 수 있습니다. 세번째로 이 콜백 매개변수는 콜백 함수의 인자 이름이며, 이 매개변수에는 지정 형식으로 시그널을 내보냈을때 실행할 코드가 들어있습니다. 마지막으로, 추가 데이터 인자에는 시그널을 내보냈을 떄 전달해야 할 데이터가 들어갑니다.

note: (itstool) path: section/p
en: The function returns a number (the <code>handler_id</code>) that identifies this particular signal-callback pair. This number is required to disconnect from a signal such that the callback function will not be called during any future or currently ongoing emissions of the signal it has been connected to, as in <code>widget.disconnect(handler_id)</code>.
ko: 함수에서는 이 시그널-콜백 함수 쌍을 구분하는 번호(<code>handler_id</code>) 값을 반환합니다. 이 번호 값은 <code>widget.disconnect(handler_id)</code> 처럼 시그널에서 앞으로 쓸 일이 없는 콜백 함수를 끊거나 시그널을 계속 내보내는 상황일 경우 필요합니다.

note: (itstool) path: section/p
en: <link href="http://developer.gnome.org/gobject/stable/signal.html">Signals</link> in GObject documentation
ko: GObject 문서의 <link href="http://developer.gnome.org/gobject/stable/signal.html">시그널</link>

note: (itstool) path: section/p
en: <link href="http://python-gtk-3-tutorial.readthedocs.org/en/latest/basics.html">Basics - Main loop and Signals</link> in Python GTK+ 3 Tutorial
ko: Python GTK+ 3 따라하기 지침의 <link href="http://python-gtk-3-tutorial.readthedocs.org/en/latest/basics.html">메인 루프와 시그널 기본</link>

note: (itstool) path: info/desc
en: Retrieve an integer or floating point number
ko: 정수 또는 소수를 가져옵니다

note: (itstool) path: page/p
en: Choose a number, by entering it or by clicking on the -/+ buttons!
ko: 숫자를 입력하거나 -/+ 단추를 눌러 입력 숫자를 선택합니다!

note: (itstool) path: info/desc
en: A number entry field that has + and - buttons
ko: + 단추와 - 단추가 있는 숫자 항목 필드

note: (itstool) path: page/p
en: A SpinButton is not related to a <link xref="spinner.js">Spinner</link>. It's a text entry field which only accepts numbers, and which has plus and minus buttons to let you change the value without having to type anything in.
ko: SpinButton은 <link xref="spinner.js">Spinner</link>와는 관련이 없습니다. 숫자 값만 받는 텍스트 항목 빌드이며, 더하기 빼기 단추가 있어 직접 입력받지 않고도 숫자 값을 입력 받을 수 있습니다.

note: (itstool) path: page/p
en: It's best used when it's obvious that only a number can be entered into it. In this example, two SpinButtons are used for the number of kittens and number of cans of tuna to give them.
ko: 숫자만 입력할 수 있다는게 명백하다면 최상의 용도입니다. 이 예제에서는 SpinButton 두개를 활용하여 고양이 수랑 참치캔 수를 입력합니다.

note: (itstool) path: section/p
en: All the code for this sample goes in the SpinButtonExample class. The above code creates a <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html">Gtk.Application</link> for our widgets and window to go in.
ko: 이 예제의 모든 코드는 SpinButtonExample 클래스에 들어갑니다. 위 코드는 위젯과 창이 들어가는 <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html">Gtk.Application</link>을 만듭니다.

note: (itstool) path: section/title
en: Creating the SpinButtons
ko: SpinButton 만들기

note: (itstool) path: section/p
en: We can use the new_with_range function to create a new SpinButton quickly. Its first parameter is the SpinButton's starting value, its second is the maximum value, and its third is how much to increment it when the plus or minus buttons are pressed.
ko: new_with_range 함수를 사용하여 새 SpinButton을 빨리 만들 수 있습니다. 첫번째 매개변수는 SpinButton의 시작 값, 두번째는 최대 값, 세번째는 더하기 빼기 단추를 눌렀을 때 적용할 증가 감소 값입니다.

note: (itstool) path: section/p
en: After we create the first SpinButton, we connect its value-changed signal to a function which handles what happens when the number inside either SpinButton changes.
ko: 첫 SpinButton을 만들고 나면, value-changed 시그널을 SpinButton의 숫지 값이 바뀌었을 때 처리할 함수에 연결하겠습니다.

note: (itstool) path: section/p
en: If you want more fine-grained control over a SpinButton, or want to create a bunch of SpinButtons which all use the same parameters, you can create an object called an <link href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.Adjustment.html">Adjustment</link>. Then you can use that object as a new SpinButton's adjustment property, and it sets all the values at once. Afterwards, you can change all the SpinButtons which use that adjustment by changing the Adjustment object's properties.
ko: SpinButton을 더 세밀하게 조절하려거나, 모든 SpinButtons에서 동일한 매개 변수를 활용하게 하려면 <link href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.Adjustment.html">Adjustment</link> 객체를 만들 수 있습니다. 그 다음 SpinButton의 adjustment 새 속성값으로 이 객체를 사용하며, 모든 값을 한번에 설정합니다. 이렇게 하면, Adjustment 객체 속성 값을 바꾸어서 모든 SpinButton의 adjustment 속성 값을 바꿀 수 있습니다.

note: (itstool) path: section/p
en: The commented-out lines here show things you can do to customize your SpinButton. You can set the number of digits which go after the decimal point, for example, or tell it to wrap the number around if it goes past the upper or lower bounds that you set.
ko: 여기서 주석 표시를 날린 부분은 SpinButton의 속성을 개별적으로 설정할 수 있습니다. 예를 들면 소숫점 다음에 표시할 숫자 갯수를 설정하거나, 여러분이 설정한 자릿수 범위 위아래를 벗어나면 숫자 값이 시작 값 내지는 끝 값으로 돌아가도록 설정할 수 있습니다.

note: (itstool) path: note/p
en: For the kitties' sake, please don't use set_digits to allow a decimal number of kittens.
ko: 고양이 수 처리를 목적으로, 고양이 숫자 값을 받을 때 set_digits를 사용하지 마십시오.

note: (itstool) path: section/title
en: Creating the rest of the UI
ko: 나머지 UI 만들기

note: (itstool) path: section/p
en: We create each <link xref="label.js">Label</link> individually, and then string them together along with the SpinButtons. The last label needs to show the number of cans of tuna per kitten, so it has a variable in the middle, which corresponds to an equation that uses the SpinButtons' get_value functions to find out what they're set at. JavaScript's Math function's floor method is used to round the number of cans of tuna per kitten down to the nearest whole number.
ko: 각 <link xref="label.js">Label</link>을 만들고 SpinButtons에 문자열을 넣겠습니다. 마지막 레이블에는 고양이 한마리당 참치캔 갯수를 보여주어야 하므로, 각각의 SpinButton에 어떤 값을 설정했는지 가져오는 get_value 함수를 활용하여 공식에 해당하는 변수를 둡니다. JavaScript의 Math 함수 중 floor 메서드는 고양이 한마리당 필요한 참치캔 갯수가 소수로 나왔을 경우 소숫점 아래를 버릴때 씁니다.

note: (itstool) path: section/p
en: Here we use <link xref="grid.js">Grid</link> widgets to keep everything organized. One Grid holds the labels and SpinButtons in order, while the next puts that Grid on top and the final Label on the bottom.
ko: 여기서 모든 위젯을 모아두려 <link xref="grid.js">Grid</link> 위젯을 사용하겠습니다. 그리드 하나는 레이블과 SpinButton를 순서대로 유지하며 그 다음 둘 내용은 그리스 상단에, 마지막으로 레이블은 하단에 둡니다.

note: (itstool) path: section/p
en: There isn't a wrong way to organize things in Grids, so long as you like how it turns out. In this case, the top Grid has a margin on the bottom to keep it evenly spaced from the bottom Label, and the bottom Label is inside a separate Grid so it will be centered relative to the Labels and SpinButtons on the top.
ko: 여러분이 바라는대로 결과가 나오는 동안 그리드에 무언가를 정돈해넣는 잘못된 방식은 없습니다. 이 경우 그리드 하단에 여백이 있는데, 하단 레이블과 균등한 간격을 유지하고, 하단 레이블은 별도의 그리드에 두어, 상단의 레이블과 SpinButton과 견주어 봤을 떄 상대적으로 가운데에 들어갑니다.

note: (itstool) path: section/p
en: Finally, we add the larger Grid to the window, then tell the window to show itself and all the widgets inside of it.
ko: 마지막으로 창에 제일 큰 그리드를 추가하고, 창에서 창 자신과 그 안에 들어간 위젯을 모두 보여주도록 하겠습니다.

note: (itstool) path: section/title
en: Function which handles the SpinButtons' numerical values being adjusted
ko: SpinButton의 숫자 값 조절을 처리하는 함수

note: (itstool) path: section/p
en: Here we update the perKitten variable based on the SpinButtons' new values, and use the set_label property to refresh what _lastLabel shows. Since both SpinButtons have their value-changed signal connected to this function, every time either of the numbers changes this function will update the Label.
ko: 여기에서는 SpinButton의 새 값에 따라 perKitten 값을 업데이트하며, set_label 속성으로 _lastLabel에서 보여줄 내용을 새로 고칩니다. 두 SpinButton에는 앞에 언급한 함수와 연결한 value-changed 시그널이 있기 때문에, 숫자가 바뀔 때마다 이 함수를 통해 레이블의 내용을 새로 고칩니다.

note: (itstool) path: section/p
en: Finally, we create a new instance of the finished SpinButtonExample class, and set the application running.
ko: 마지막으로 마무리한 SpinButtonExample 클래스의 새 인스턴스를 만들고 프로그램 실행을 설정합니다.

note: (itstool) path: info/desc
en: Retrieve an integer or floating-point number from the user.
ko: 사용자로 부터 정수나 소수 값을 받습니다.

note: (itstool) path: section/title
en: Useful methods for a SpinButton widget
ko: SpinButton 위젯에 쓸만한 메서드

note: (itstool) path: section/p
en: A Gtk.Adjustment is needed to construct the Gtk.SpinButton. This is the representation of a value with a lower and upper bound, together with step and page increments, and a page size, and it is constructed as <code>Gtk.Adjustment(value, lower, upper, step_increment, page_increment, page_size)</code> where the fields are of type <code>float</code>; <code>step_increment</code> is the increment/decrement that is obtained by using the cursor keys or the buttons of the spinbutton. Note that <code>page_increment</code> and <code>page_size</code> are not used in this case, and they should be set to <code>0</code>.
ko: Gtk.Adjustment는 Gtk.SpinButton을 만들떄 씁니다. 이 객체는 상한값, 하한값, 단계값, 페이지 증가 값, 페이지 크기를 나타내며 <code>Gtk.Adjustment(value, lower, upper, step_increment, page_increment, page_size)</code>  생성자로 만듭니다. 여기서 필드 값은 <code>float</code>입니다. <code>step_increment</code> 은 커서 키를 사용할 떄 또는 SpinButton의 증감 단추를 사용할 때 가져올 증가 감소 값입니다. 참고로,  <code>page_increment</code>와 <code>page_size</code>는 이 상황에 활용하지 않으므로 <code>0</code> 값으로 설정해야합니다.

note: (itstool) path: section/p
en: In line 23 the signal <code>"value-changed"</code> is connected to the callback function <code>spin_selected()</code> using <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. See <link xref="signals-callbacks.py"/> for a more detailed explanation.
ko: 23번째 줄에서 <code>"value-changed"</code> 시그널은 <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code> 함수로  <code>spin_selected()</code> 콜백 함수에 연결했습니다. 더 자세한 설명은 <link xref="signals-callbacks.py"/>를 참조하십시오.

note: (itstool) path: item/p
en: If you want the value of the spinbutton to wrap around when they exceed the maximum or the minimum, set <code>set_wrap(True)</code>. The <code>"wrapped"</code> signal is emitted when this happens.
ko: SpinButton 값이 최대 최소 값을 넘어설 경우 시작 값 내지는 끝 값으로 돌아가게 하려면 <code>set_wrap(True)</code> 함수를 설정하십시오. 이 상황이 일어나면 <code>"wrapped"</code> 시그널을 내보냅니다.

note: (itstool) path: item/p
en: <code>set_digits(digits)</code> sets the precision to be displayed by the spinbutton, up to 20 digits.
ko: <code>set_digits(digits)</code> 함수는 SpinButton에 나타낼 수 있는 자리수를 최대 20자리까지 설정합니다.

note: (itstool) path: item/p
en: To get the value of the spinbutton as an integer, use <code>get_value_as_int()</code>.
ko: SpinButton에서 정수 값을 받으려면 <code>get_value_as_int()</code> 함수를 사용하십시오.

note: (itstool) path: info/desc
en: Retrieve an integer or floating point number.
ko: 정수값 또는 소수 값을 받습니다.

note: (itstool) path: info/desc
en: A spinner animation
ko: 스피너 애니메이션

note: (itstool) path: page/p
en: This Spinner is stopped and started by pressing the spacebar.
ko: 이 스피너는 스페이스바를 누르면 회전 동작을 멈추거나 시작합니다.

note: (itstool) path: item/p
en: <link href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gdk.html">Gdk - Key Values</link>
ko: <link href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gdk.html">Gdk - 키 값</link>

note: (itstool) path: note/p
en: <code>Gdk.keyval_name(event.keyval)</code> converts the key value <code>event.keyval</code> into a symbolic name. The names and corresponding key values can be found <link href="http://git.gnome.org/browse/gtk+/tree/gdk/gdkkeysyms.h">here</link>,but for instance <code>GDK_KEY_BackSpace</code> becomes the string <code>"BackSpace"</code>.
ko: <code>Gdk.keyval_name(event.keyval)</code>은  <code>event.keyval</code> 키 값을 심볼릭 이름으로 변환합니다. 이름과 관련 키 값은 <link href="http://git.gnome.org/browse/gtk+/tree/gdk/gdkkeysyms.h">여기</link>에서 알아볼 수 있지만, 예를 들어 <code>GDK_KEY_BackSpace</code> 인스턴스는 <code>"BackSpace"</code> 문자열입니다.

note: (itstool) path: info/desc
en: Report messages of minor importance to the user
ko: 별로 중요하지 않은 메시지를 사용자에게 알립니다

note: (itstool) path: page/p
en: This statusbar is used to demonstrate how messages are stacked in a last-in-first-out order. The message at the top of the stack is always the one displayed.
ko: Statusbar는 가장 나중에 넣은 메시지를 먼저 빼내는 순으로 스택에 메시지를 넣어 다루는 방법을 보여줍니다. 항상 스택 상단의 메시지만 나타납니다.

note: (itstool) path: info/desc
en: Show notifications in a dedicated statusbar
ko: 지정 상태 표시줄에 알림 표시

note: (itstool) path: page/p
en: This statusbar keeps track of how many times you've clicked a button. Applications like <link href="http://projects.gnome.org/gedit/">gedit</link> use statusbars to display information at a glance, and show notifications without interrupting the user.
ko: 이 상태 표시줄은 단추를 얼마나 눌렀는지 횟수 정보를 지니고 있습니다. <link href="http://projects.gnome.org/gedit/">지에디트</link>의 경우는 상태 표시줄을 활용하여 잠깐 살펴볼 정보를 나타내고 사용자의 일을 방해하지 않으면서 알림을 보여줍니다.

note: (itstool) path: page/p
en: Messages pushed to a statusbar go on top of its stack, and can be popped off to show the next-most recent one. You can also clear away every message of a specific type all at once. This sample application demonstrates these functions.
ko: 상태 표시줄에 밀어넣은 메시지는 스택의 상단에 있으며, 가장 최근에 밀어넣은 순으로 보여주면서 빼낼 수 있습니다. 지정 형식의 모든 메시지를 한번에 빼낼 수 있습니다. 이 예제 프로그램에서는 이런 기능을 보여드립니다.

note: (itstool) path: section/p
en: All the code for this sample goes in the StatusbarExample class. The above code creates a <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html">Gtk.Application</link> for our widgets and window to go in.
ko: 이 예제의 모든 코드는 StatusbarExample 클래스에 들어갑니다. 위 코드는 위젯과 창을 넣는 <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html">Gtk.Application</link>을 만듭니다.

note: (itstool) path: section/p
en: The _buildUI function is where we put all the code to create the application's user interface. The first step is creating a new <link href="GtkApplicationWindow.js.page">Gtk.ApplicationWindow</link> to put all our widgets into. The next step is to create a vertically-oriented Gtk.Paned interface, to divide the window up into two sections. This way the statusbar looks like those used in other applications, and it stays at the bottom of the window, even if the user resizes it.
ko: _buildUI 함수는 프로그램 사용자 인터페이스를 만들 모든 코드를 넣는 곳입니다. 첫번째 단계에서는 모든 위젯을 넣을 새 <link href="GtkApplicationWindow.js.page">Gtk.ApplicationWindow</link>를 만듭니다. 그 다음 단계에서는 수직 방향 Gtk.Paned 인터페이스를 만들어 창을 두 부분으로 나눕니다. 이 방식으로 상태 표시줄을 다른 프로그램에서 나타나는 것처럼 표시하고, 사용자가 창 크기를 조절하더라도 창 하단에 머물러 있습니다.

note: (itstool) path: section/title
en: Creating the buttons
ko: 단추 만들기

note: (itstool) path: section/p
en: This code creates the three <link href="button.js.page">Gtk.Buttons</link> we'll use to push a new message to the statusbar, pop the last one off, and clear all existing messages. The "back" and "clear" buttons are <link href="https://developer.gnome.org/gtk3/3.4/gtk3-Stock-Items.html">stock buttons</link>, which are automatically translated into any language GNOME supports.
ko: 이 코드는 상태 표시줄에서 새 메시지를 밀어넣고, 마지막 매시지를 빼내며, 기존 모든 메시지를 지울 때 쓸 <link href="button.js.page">Gtk.Buttons</link> 세 개를 만듭니다. "뒤로"와 "지우기" 단추는 그놈에서 지원하는 언어로 이미 자동으로 번역해주는 <link href="https://developer.gnome.org/gtk3/3.4/gtk3-Stock-Items.html">스톡 단추</link> 입니다.

note: (itstool) path: section/p
en: This code creates the <link href="grid.js.page">Gtk.Grid</link> that we'll use to organize the buttons, and attaches the buttons to it in order. It then creates a <link href="paned.js.page">Gtk.Frame</link> which will take up most of the window and has a large amount of padding around the buttons, and adds the Grid to the Frame. Note that we still need to put the Frame into the Paned interface, and then add it to the ApplicationWindow.
ko: 단추를 모아 정돈하고 순서대로 단추를 붙여넣는데 쓸 <link href="grid.js.page">Gtk.Grid</link>를 만듭니다. 그 다음 대부분 창을  차지하고, 단추 주변에 상당히 많은 여백을 차지하는 <link href="paned.js.page">Gtk.Frame</link>를 만들고 그리드를 프레임에 추가합니다. 참고로 프레임을 Pane 인터페이스에 넣고 ApplicationWindow에 추가해야합니다.

note: (itstool) path: section/title
en: Creating the statusbar
ko: 상태 표시줄 만들기

note: (itstool) path: section/p
en: Here we create the Gtk.Statusbar, and push a message to it to start off with. Then we give it its own narrow frame at the bottom of the window.
ko: Gtk.Statusbar를 만들고 시작할 때 메시지를 밀어넣습니다. 그 다음 창 하단에 좁은 틀을 확보합니다.

note: (itstool) path: section/p
en: Every message needs to have a context id, which is an integer value you can get from the statusbar with the get_context_id() function. Its only parameter is the string value you use to describe that particular context id. Normally, you'll get a new context id for different kinds of messages, so that you can use the remove() function to remove a specific message and not just the most recent one on the stack. This is a simple example with only one kind of message, though, so we're just using one for everything.
ko: 모든 메시지에는 컨텍스트 ID가 필요한데 get_context_id() 함수로 상태 표시줄에서 가져올 수 있는 정수값입니다. 각각의 컨텍스트 ID를 설명할 때 여러분이 활용할 유일한 매개 변수는 문자열 값 뿐입니다. 보통 메시지의 다양한 유형에 대해 새 컨텍스트 ID를 받기에 remove() 함수는 스택에 있는 최근 메시지가 아닌 지정 메시지를 제거할 목적으로 활용할 수 있습니다. 이 부분은 어떤 종류의 메시지에 대한 예제이므로 모든 경우에 대해 한가지만 활용하겠습니다.

note: (itstool) path: section/p
en: We use the push() function to push a new message onto the stack. Its first parameter is the context id, and its second is the message.
ko: 스택에 새 메시지를 밀어넣을때는 push() 함수를 사용합니다. 처음 매개변수는 컨텍스트 ID며 두번째는 메시지입니다.

note: (itstool) path: section/p
en: This code finishes up creating the window, by packing the frames into the pane, adding it to the window, and telling the window to show all child widgets.
ko: 이 코드는 하위 창에 프레임을 패킹해넣고 창에 추가한 다음, 창에게 하위 위젯을 나타내도록 지시하여 창 만들기를 끝냅니다.

note: (itstool) path: section/title
en: Functions for interacting with the statusbar
ko: 상태 표시줄을 다루는 함수

note: (itstool) path: section/p
en: Here we have functions which demonstrate pushing a message onto the stack, popping the top one off of it, and clearing all messages of a particular context id. The pop() function just takes one parameter, which is the context id for the type of message you want to pop off the most recent one of. The remove_all() function works the same way, except it removes all messages of that type from the stack.
ko: 여기서 메시지를 스택에 밀어넣고, 상단의 메시지를 빼내며, context ID를 가진 일부 메시지를 모두 지우는 함수가 있습니다. pop() 함수는 여러분이 빼고자 하는 최근 추가 메시지 형식에 대한 context ID 매개 변수만을 가지며, 설정 형식의 모든 메시지를 스택에서 제거했을 경우는 제외됩니다.

note: (itstool) path: section/p
en: Finally, we create a new instance of the finished StatusbarExample class, and set the application running.
ko: 마지막으로, StatusbarExample 클래스에서 새 인스턴스를 만들고 프로그램 실행을 설정하겠습니다.

note: (itstool) path: page/p
en: This statusbar tells you if you click the button or if you press any key (and which key).
ko: 이 상태 표시줄은 단추를 누르거나 아무 키(어떤 키)를 눌렀을 때 알려줍니다.

note: (itstool) path: note/p
en: <code>Gdk.keyval_name(event.keyval)</code> converts the key value <code>event.keyval</code> into a symbolic name. The names and corresponding key values can be found <link href="http://git.gnome.org/browse/gtk+/tree/gdk/gdkkeysyms.h">here</link>, but for instance <code>GDK_KEY_BackSpace</code> becomes the string <code>"BackSpace"</code>.
ko: <code>Gdk.keyval_name(event.keyval)</code>은  <code>event.keyval</code> 키 값을 심볼릭 이름으로 변환합니다. 이름과 관련 키 값은 <link href="http://git.gnome.org/browse/gtk+/tree/gdk/gdkkeysyms.h">여기</link>에서 알아볼 수 있지만, 예를 들어 <code>GDK_KEY_BackSpace</code> 인스턴스는 <code>"BackSpace"</code> 문자열입니다.

note: (itstool) path: section/title
en: Useful methods for a Statusbar widget
ko: Statusbar 위젯에 쓸만한 메서드

note: (itstool) path: section/p
en: In line 17 the signal <code>"clicked"</code> is connected to the callback function <code>button_clicked_cb()</code> using <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. See <link xref="signals-callbacks.py"/> for a more detailed explanation.
ko: 17번째 줄에서 <code>"clicked"</code> 시그널은 <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code> 함수로  <code>button_clicked_cb()</code> 콜백 함수에 연결했습니다. 더 자세한 설명은 <link xref="signals-callbacks.py"/>를 참조하십시오.

note: (itstool) path: item/p
en: <code>pop(context_id)</code> removes the first message in the statusbar stack with the given <code>context_id</code>.
ko: <code>pop(context_id)</code> 함수는 상태 표시줄 스택에서 <code>context_id</code>가 주어진 처음 메시지를 제거합니다.

note: (itstool) path: item/p
en: <code>remove_all(context_id)</code> removes all the messages in the statusbar stack with the given <code>context_id</code>.
ko: <code>remove_all(context_id)</code> 함수는 상태 표시줄 스택에서 <code>context_id</code>가 주어진 모든 메시지를 제거합니다.

note: (itstool) path: item/p
en: <code>remove(context_id, message_id)</code> removes the message with the given <code>message_id</code> in the statusbar stack with the given <code>context_id</code>. The <code>message_id</code> is returned by <code>push(context_id, "the message")</code> when pushing the message on the statusbar.
ko: <code>remove(context_id, message_id)</code> 함수는 상태 표시줄 스택에서 <code>message_id</code>가 주어진 메시지를 제거합니다. <code>message_id</code>는 <code>push(context_id, "the message")</code> 함수로 상태 표시줄에 메시지를 밀어넣을 때 반환합니다.

note: (itstool) path: item/p
en: <link href="http://developer.gnome.org/gdk/stable/gdk-Keyboard-Handling.html">Gdk - Key Values</link>
ko: <link href="http://developer.gnome.org/gdk/stable/gdk-Keyboard-Handling.html">Gdk - 키 값</link>

note: (itstool) path: page/p
en: This statusbar tells you what's going on.
ko: 상태 표시줄은 무슨 일이 일어나는지 알려줍니다.

note: (itstool) path: info/desc
en: An explanation of how to deal with strings in Python and GTK+.
ko: 파이썬과 GTK+에서 문자열을 다루는 방법을 설명합니다.

note: (itstool) path: page/title
en: Strings
ko: 문자열

note: (itstool) path: note/p
en: GNOME strongly encourages the use of Python 3 for writing applications!
ko: 그놈은 프로그램을 작성할 때 파이썬 3 활용을 강력하게 권장합니다!

note: (itstool) path: section/title
en: Strings in Python 2
ko: 파이썬 2의 문자열

note: (itstool) path: section/p
en: Python 2 comes with two different kinds of objects that can be used to represent strings, <code>str</code> and <code>unicode</code>. Instances of <code>unicode</code> are used to express Unicode strings, whereas instances of the <code>str</code> type are byte representations (the encoded string). Under the hood, Python represents Unicode strings as either 16- or 32-bit integers, depending on how the Python interpreter was compiled.
ko: 파이썬 2에서는 문자열을 표현하는 두가지 다른 객체 형식이 있는데 <code>str</code>과 <code>unicode</code>가 있습니다. <code>unicode</code> 인스턴스는 유니코드 문자열을 표현할 때 활용하며, <code>str</code>형식은 인코딩한 문자열 바이트를 표현할 때 활용합니다. 내부적으로 파이썬에서는 파이썬 인터프리터를 어떻게 컴파일했느냐에 따라 유니코드 문자열을 16비트 내지는 32비트 정수로 표현합니다.

note: (itstool) path: section/p
en: Unicode strings can be converted to 8-bit strings with <code>unicode.encode()</code>. Python’s 8-bit strings have a <code>str.decode()</code> method that interprets the string using the given encoding (that is, it is the inverse of the <code>unicode.encode()</code>):
ko: 유니코드 문자열은 <code>unicode.encode()</code>로 8비트 문자열로 바꿀 수 있습니다. 파이썬의 8비트 문자열은 주어진 인코딩으로 문자열을 해석하는 <code>str.decode()</code> 메서드가 있습니다(그 말인 즉슨, <code>unicode.encode()</code>의 반대 개념입니다):

note: (itstool) path: section/p
en: Unfortunately, Python 2.x allows you to mix <code>unicode</code> and <code>str</code> if the 8-bit string happened to contain only 7-bit (ASCII) bytes, but would get <sys>UnicodeDecodeError</sys> if it contained non-ASCII values.
ko: 불행하게도 파이썬 2.x에서는 8비트 문자열에 7비트(아스키) 바이트가 들어가지만 ASCII 값이 아닌 경우 <sys>UnicodeDecodeError</sys>가 발생하므로, <code>unicode</code>와 <code>str</code> 의 혼용을 허용하지 않습니다.

note: (itstool) path: section/title
en: Strings in Python 3
ko: 파이썬 3의 문자열

note: (itstool) path: section/p
en: Since Python 3.0, all strings are stored as Unicode in an instance of the <code>str</code> type. Encoded strings on the other hand are represented as binary data in the form of instances of the bytes type. Conceptually, <code>str</code> refers to text, whereas bytes refers to data. Use <code>encode()</code> to go from <code>str</code> to <code>bytes</code>, and <code>decode()</code> to go from <code>bytes</code> to <code>str</code>.
ko: 파이썬 3.0 부터는 모든 문자열을 <code>str</code> 형식의 인스턴스에 유니코드로 저장합니다. 다른 방식으로 인코딩한 문자는 바이트 타입의 인스턴스에 이진 데이터로 표현합니다. 개념적으로 <code>str</code>은 텍스트를 참조하고 bytes는 데이터를 참조합니다. <code>str</code> 형식에서 <code>bytes</code> 형식으로 변환할 때는 <code>encode()</code> 함수를, <code>bytes</code> 형식에서 <code>str</code> 형식으로 변환할 때는 <code>decode()</code> 함수를 사용하십시오.

note: (itstool) path: section/p
en: In addition, it is no longer possible to mix Unicode strings with encoded strings, because it will result in a <code>TypeError</code>:
ko: 게다가, 더이상 유니코드 문자열과 인코딩 문자열을 혼용할 수 없는데, 결과적으로 <code>TypeError</code>가 발생하기 때문입니다:

note: (itstool) path: section/title
en: Unicode in GTK+
ko: GTK+의 유니코드

note: (itstool) path: section/p
en: GTK+ uses UTF-8 encoded strings for all text. This means that if you call a method that returns a string you will always obtain an instance of the <code>str</code> type. The same applies to methods that expect one or more strings as parameter, they must be UTF-8 encoded. However, for convenience PyGObject will automatically convert any unicode instance to str if supplied as argument:
ko: GTK+에서는 UTF-8 인코딩 문자열을 모든 텍스트에 사용합니다. 무슨 이야기냐면, 문자열을 반환하는 메서드를 호출하면 <code>str</code> 형식 인스턴스를 받습니다. 하나 이상의 문자열을 받는 메서드에도 동일하게 적용하며, UTF-8로 인코딩해야합니다. 그러나 PyGObject에서는 인자에 데이터가 들어오면 어떤 유니코드 인스턴스든 문자열로 자동으로 바꿔줍니다:

note: (itstool) path: section/p
en: Furthermore:
ko: 게다가:

note: (itstool) path: section/p
en: would return <code>False</code>, with the warning <code>__main__:1: UnicodeWarning: Unicode equal comparison failed to convert both arguments to Unicode - interpreting them as being unequal</code> (<code>Gtk.Label.get_text()</code> will always return a <code>str</code> instance; therefore, <code>txt</code> and <code>unicode_string</code> are not equal).
ko: 는 <code>False</code>값을 반환하며, <code>__main__:1: UnicodeWarning: Unicode equal comparison failed to convert both arguments to Unicode - interpreting them as being unequal</code> (<code>Gtk.Label.get_text()</code> 는 항상 <code>str</code> 인스턴스를 내보내기 때문에, <code>txt</code> 와 <code>unicode_string</code> 은 다릅니다) 경고를 내보냅니다..

note: (itstool) path: section/p
en: This is especially important if you want to internationalize your program using <link href="http://docs.python.org/library/gettext.html"><code>gettext</code></link>. You have to make sure that <code>gettext</code> will return UTF-8 encoded 8-bit strings for all languages.
ko: <link href="http://docs.python.org/library/gettext.html"><code>gettext</code></link>로 프로그램을 국제화할 경우 특히 더 중요합니다. <code>gettext</code>에서 모든 언어에 대해 항상 UTF-8로 인코딩한 8비트 문자열을 반환하는지 확인하셔야합니다.

note: (itstool) path: section/p
en: In general it is recommended to not use <code>unicode</code> objects in GTK+ applications at all, and only use UTF-8 encoded <code>str</code> objects since GTK+ does not fully integrate with <code>unicode</code> objects.
ko: 일반적으로 GTK+ 프로그램 전체에서 <code>unicode</code> 객체를 안 쓰는게 좋으며, GTK+가 <code>unicode</code>를 완전히 통합하지 않았기에,  UTF-8로 인코딩한 <code>str</code> 객체만 씁니다.

note: (itstool) path: section/p
en: String encoding is more consistent in Python 3.x because PyGObject will automatically encode/decode to/from UTF-8 if you pass a string to a method or a method returns a string. Strings, or text, will always be represented as instances of <code>str</code> only.
ko: 문자열 인코딩은 파이썬 3.x에서 좀 더 일관성이 있는데 PyGObject는 메서드로 문자열을 넘겨주거나 메서드에서 문자열을 반환할 때 자동으로 UTF-8로/부터 인코딩/디코딩을 처리합니다. 문자열, 텍스트는 항상 <code>str</code> 인스턴스로만 표현합니다.

note: (itstool) path: section/p
en: <link href="http://python-gtk-3-tutorial.readthedocs.org/en/latest/unicode.html">How To Deal With Strings - The Python GTK+ 3 Tutorial</link>
ko: <link href="http://python-gtk-3-tutorial.readthedocs.org/en/latest/unicode.html">문자열 다루기 - Python GTK+ 3 따라하기 지침서</link>

note: (itstool) path: info/desc
en: A "light switch" style toggle
ko: "조명 스위치" 방식 토글

note: (itstool) path: page/p
en: This switch toggles the title of the window.
ko: 이 스위치는 창 제목의 표시 여부를 바꿉니다.

note: (itstool) path: info/desc
en: A sliding switch that can be flipped on and off
ko: 켬/끔 상태를 뒤집을 수 있는 슬라이딩 스위치

note: (itstool) path: page/p
en: A Switch has two positions, on and off. This example shows how you can use multiple switches together to control which <link xref="image.js">Image</link> is shown in the window. The pictures used in this example <link href="https://live.gnome.org/TarynFox?action=AttachFile&amp;do=get&amp;target=Animal+Photos.zip">can be downloaded here</link>.
ko: 스위치 위치는 켬과 끔이 있습니다. 이 예제에서는 어떤 <link xref="image.js">Image</link>를 창에 보여줄 지 여러 스위치로 동시에 제어하는 방법을 보여드립니다. 이 예제에서 사용한 그림은 <link href="https://live.gnome.org/TarynFox?action=AttachFile&amp;do=get&amp;target=Animal+Photos.zip">여기에서 다운로드할 수 있습니다</link>.

note: (itstool) path: note/p
en: The window will contain a "broken image" icon instead of a picture if picture files named <file>redfox.png</file>, <file>muteswan.png</file>, <file>fruitbat.png</file>, and <file>gentoopenguin.png</file> aren't in the same directory. You can change the code and the pictures around as you like, but the Creative Commons-licensed photos used in this example were taken from the following sources and cropped to 640x425:
ko: <file>redfox.png</file>, <file>muteswan.png</file>, <file>fruitbat.png</file>, <file>gentoopenguin.png</file> 파일이 동일한 디렉터리에 없으면 창에는 그림 대신 "깨진 그림" 아이콘이 나타납니다. 원하는 대로 코드와 그림 이곳저곳을 바꿀 수 있지만 이 예제에서 크리에이티브 커먼즈 라이선스 기반으로 활용하는 사진은 다음 원본을 가져왔으며 640x425 크기로 잘랐습니다:

note: (itstool) path: item/p
en: <link href="http://en.wikipedia.org/wiki/File:Fuzzy_Freddy.jpg">Red fox photo</link> by Rob Lee, licensed <link href="http://creativecommons.org/licenses/by/2.0/deed.en">CC-By</link>
ko: Rob Lee의 <link href="http://en.wikipedia.org/wiki/File:Fuzzy_Freddy.jpg">Red fox photo</link>는 <link href="http://creativecommons.org/licenses/by/2.0/deed.en">CC-By</link> 라이선스를 따릅니다

note: (itstool) path: item/p
en: <link href="http://en.wikipedia.org/wiki/File:Pygoscelis_papua_-Nagasaki_Penguin_Aquarium_-swimming_underwater-8a.jpg">Gentoo penguin photo</link> by Ken Funakoshi, licensed <link href="http://creativecommons.org/licenses/by-sa/2.0/deed.en">CC-By-SA</link>
ko: Ken Funakoshi의 <link href="http://en.wikipedia.org/wiki/File:Pygoscelis_papua_-Nagasaki_Penguin_Aquarium_-swimming_underwater-8a.jpg">Gentoo penguin photo</link>는 <link href="http://creativecommons.org/licenses/by-sa/2.0/deed.en">CC-By-SA</link> 라이선스를 따릅니다

note: (itstool) path: item/p
en: <link href="http://www.flickr.com/photos/shekgraham/127431519/in/photostream/">Fruit bat photo</link> by Shek Graham, licensed <link href="http://creativecommons.org/licenses/by/2.0/deed.en">CC-By</link>
ko: Shek Graham의 <link href="http://www.flickr.com/photos/shekgraham/127431519/in/photostream/">Fruit bat photo</link>는 <link href="http://creativecommons.org/licenses/by/2.0/deed.en">CC-By</link> 라이선스를 따릅니다

note: (itstool) path: item/p
en: <link href="http://commons.wikimedia.org/wiki/File:Mute_Swan-Mindaugas_Urbonas.jpg">Mute swan photo</link> by Mindaugas Urbonas, licensed <link href="http://creativecommons.org/licenses/by-sa/2.5/deed.en">CC-By-SA</link>
ko: Mindaugas Urbonas의 <link href="http://commons.wikimedia.org/wiki/File:Mute_Swan-Mindaugas_Urbonas.jpg">Mute swan photo</link>는 <link href="http://creativecommons.org/licenses/by-sa/2.5/deed.en">CC-By-SA</link> 라이선스를 따릅니다

note: (itstool) path: note/p
en: Photo credits and licensing information are shown in the application's <link xref="aboutdialog.js">AboutDialog</link>. Always remember to credit the original artist when using <link href="http://creativecommons.org">Creative Commons-licensed works!</link>
ko: 그놈 사진의 제작자와 라이선스 정보는 프로그램의 <link xref="aboutdialog.js">AboutDialog</link>로 나타냅니다. 항상 <link href="http://creativecommons.org">크리에이티브 커먼즈 라이선스 작품</link>을 사용할 때 원 저작자 저작 정보 기입을 기억하십시오!

note: (itstool) path: section/p
en: All the code for this sample goes in the SwitchExample class. The above code creates a <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html">Gtk.Application</link> for our widgets and window to go in.
ko: 이 예제의 모든 코드는 SwitchExample 클래스에 들어갔습니다. 위 코드는 위젯과 창이 들어가는 <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html">Gtk.Application</link>을 만듭니다.

note: (itstool) path: section/title
en: Creating the switches
ko: 스위치 만들기

note: (itstool) path: section/p
en: We first create the <link xref="image.js">Image</link> that the switches will control. Remember that a file named <file>redfox.png</file> needs to be in the same directory as this application.
ko: 우선 스위치가 제어할 <link xref="image.js">Image</link>를 만들겠습니다. 이 프로그램과 동일한 디렉터리에 <file>redfox.png</file> 그림을 두어야 함을 기억하십시오.

note: (itstool) path: section/p
en: We use a <link xref="label.js">Label</link> to mark each Switch, and give them a bit of a margin on the right so that they aren't crammed right next to the Switches. After that we create the Switches, and set them to be switched off by default.
ko: 각 스위치에 표시할 <link xref="label.js">Label</link>을 만들고 우측에 약간의 여백을 주어 스위치 뒤에서 쑤셔 넣은 느낌이 안나게 하겠습니다. 그 다음 스위치를 만들고 기본적으로 스위치를 꺼둔 상태로 설정하겠습니다.

note: (itstool) path: section/p
en: The signal a switch sends out when it's flipped on or off is called notify::active. After we create each switch, we connect its notify::active signal to a function called _switchFlip. If you have multiple switches that each do something different, you might want to connect them to different functions, but here they're both used for the same thing: To control what picture's displayed by _image.
ko: 스위치를 다른 방향으로 제낄 경우 스위치에서 내보내는 시그널은 notify::active입니다. 스위치를 만들고 나면 notify::active 시그널을 _switchFlip 함수에 연결합니다. 여러 스위치가 서로 다른 동작을 한다면 다른 함수에 연결해야 합니다만, 이 스위치는 _image로 표시한 그림을 처리하는 동일한 동작을 하는데 씁니다.

note: (itstool) path: section/p
en: We create a <link xref="grid.js">Grid</link> for the Labels and Switches first, so that we can organize them in a 2x2 layout with a margin between it and the Image. Then we put that Grid into a larger 2x1 Grid that has the Image on top, and the Grid with the Labels and Switches on the bottom.
ko: 레이블과 스위치를 넣을 <link xref="grid.js">Grid</link>를 먼저 만들어, 그림 사이에 간격을 준 2x2 배치로 모아둘 수 있습니다. 그 다음 더 큰 2x1 그리드를 활용하여 상단에 그림을 넣도록 하고 레이블과 스위치는 하단에 넣도록 합니다.

note: (itstool) path: section/title
en: Function which handles the switches being flipped
ko: 스위치 전환을 처리하는 함수

note: (itstool) path: section/p
en: Each time a Switch is flipped, this function checks to see which of the two Switches are active afterwards, using the Switches' built-in get_active() function. It then changes the Image accordingly. You can change the filenames around as you like, so long as you have pictures to go with them.
ko: 스위치를 제낄 때마다, 이 함수는 두 스위치 중 어떤 스위치가 동작했는지 스위치 내장 get_active() 함수로 나중에 확인합니다. 그 다음 그림을 바로 바꿉니다. 이미 그림이 있다 하더라도 원하는 대로 그림을 바꿀 수 있습니다.

note: (itstool) path: section/title
en: Creating the AboutDialog
ko: AboutDialog 만들기

note: (itstool) path: section/p
en: The first step is building the <link xref="gmenu.js">GMenu</link> that the "About" button goes into. This is the menu that appears when you click the application's name in the upper-left corner of the screen, next to the Activities menu. Our menu only has two options in it: About, and Quit.
ko: 첫 단계에서는 "정보" 단추를 넣을 <link xref="gmenu.js">GMenu</link>를 만듭니다. 화면의 좌측 상단 구석에 뜰 프로그램 이름을 눌렀을 떄 현재 활동 옆에 나타나는 메뉴입니다. 우리가 만든 메뉴에는 정보, 끝내기 옵션 두개를 넣습니다.

note: (itstool) path: section/p
en: An <link xref="aboutdialog.js">AboutDialog</link> has a lot of different things you can set, to credit everyone who worked on the application and leave a note to whomever reads it. In this case, the copyright section contains our note and credits the original photographers, while the artists section shows you a list of the photographers with links to the original photos when you click the Credits button. The web URLs put after their names in the array turn their names into clickable links in the Credits section.
ko: <link xref="aboutdialog.js">AboutDialog</link>에는 여러분이 설정할 수 있는 여러 다른 요소가 있는데, 프로그램을 만들 때 기여한 모든 사람, 그리고 이 부분을 봐야 할 독자에게 보여줄 참고 내용을 담습니다. 이 경우 저작권 섹션에 참고 메모와 만든 사람의 사진 원본 촬영자 목록을 올려둡니다. 다만, 아티스트 섹션에는 만든 사람 단추를 눌렀을 때 원본 사진 링크와 사진사 목록을 보여줍니다. 웹 URL은 만든 사람 섹션에서 누를 수 있는 항목으로 이름에 걸어두겠습니다.

note: (itstool) path: section/p
en: Finally, we create a new instance of the finished SwitchExample class, and set the application running.
ko: 마지막으로, 마무리한 SwitchExample 클래스의 새 인스턴스를 만들고, 프로그램 실행을 설정합니다.

note: (itstool) path: page/p
en: This Switch makes the title appears and disappear.
ko: 이 스위치는 제목을 나타나게 하거나 사라지게 합니다.

note: (itstool) path: section/title
en: Useful methods for a Switch widget
ko: Switch 위젯에 쓸만한 메서드

note: (itstool) path: section/p
en: In line 17 the signal <code>"notify::active"</code> is connected to the callback function <code>activate_cb()</code> using <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. See <link xref="signals-callbacks.py"/> for a more detailed explanation.
ko: 17번째 줄에서 <code>"notify::active"</code> 시그널은 <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code> 함수로  <code>activate_cb()</code> 콜백 함수에 연결했습니다. 더 자세한 설명은 <link xref="signals-callbacks.py"/>를 참조하십시오.

note: (itstool) path: page/p
en: This Switch toggles the title.
ko: 이 스위치는 제목을 바꿉니다.

note: (itstool) path: info/desc
en: Widget which displays a GtkTextBuffer
ko: GtkTextBuffer를 나타내는 위젯

note: (itstool) path: page/title
en: TextView widget
ko: TextView 위젯

note: (itstool) path: note/p
en: If we press "enter", we have a new line.
ko: "enter" 키를 누르면 줄이 바뀝니다.

note: (itstool) path: note/p
en: If we press "enter" more times then there are lines in the default sized window, then a vertical scrollbar appears.
ko: "enter" 키를 더 누르면 기본 크기 창 안에 줄이 더 생기며, 창 크기를 넘으면서 수직 스크롤 표시줄이 나타납니다.

note: (itstool) path: note/p
en: If we write a long sentence, the text will wrap breaking lines between words.
ko: 긴 문장을 적어넣으면 문장에 있는 단어 사이에서 줄바꿈이 일어납니다.

note: (itstool) path: note/p
en: If we have a loooooooooooooooooooooooooooooooooooong (that was long) word, a* horizontal scrollbar will appear.
ko: 기이이이이이이이이이이이이이이이이이이인 단어가 있다면(길었다면), 수평 스크롤 표시줄이 나타납니다.

note: (itstool) path: page/p
en: This is an example of Gtk.TextView
ko: Gtk.TextView 예제입니다

note: (itstool) path: info/desc
en: A multiline text editor
ko: 다중 행 텍스트 편집기

note: (itstool) path: page/p
en: A TextView is really (or at least usually) a nested set of three objects.
ko: TextView는 정말(아니면 최소한 보통) 세 객체의 모음으로 이루어져있습니다.

note: (itstool) path: item/p
en: At the bottom there is a <link href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.TextBuffer.html">TextBuffer</link>. This holds the text itself.
ko: 하단에는 <link href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.TextBuffer.html">TextBuffer</link>가 있습니다. TextBuffer는 텍스트를 저장해둡니다.

note: (itstool) path: item/p
en: In the middle there is the <link href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.TextView.html">TextView</link>, which is a widget that lets you see and edit the text in the buffer. It automatically resizes itself depending on how much text there is.
ko: 가운데에는 <link href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.TextView.html">TextView</link>가 있는데 버퍼의 텍스트를 보고 편집할 수 있게 하는 위젯입니다. 텍스트가 얼마나 있느냐에 따라 자동으로 크기 조절 합니다.

note: (itstool) path: item/p
en: Since the automatic resizing can make a TextView unwieldy, you normally place it inside of a ScrolledWindow. Despite the name, it's not an actual window in terms of having a title bar and an X button; it's a widget you put on the application you're making, which acts like a window onto a more manageable chunk of a TextView. If the text in the buffer is too big to fit, scrollbars will appear.
ko: 자동으로 크기 조절을 해서 TextView를 이상하게 보이지 않게 할 수 있으므로, 보통 ScrolledWindow의 안에 둡니다. 이름이 있는데도 불구, 제목 표시줄과 X 단추가 있는 실제 창이 아닙니다. 더 관리하기 쉬운 TextView에서 창처럼 동작하며, 여러분이 만들려는 프로그램에 넣을 수 있는 위젯입니다. 버퍼의 텍스트가 공간을 맞추기에 너무 많다면, 스크롤 표시줄이 나타납니다.

note: (itstool) path: page/p
en: If you want to change what text is displayed in the TextView, you act on the TextBuffer, since it's what actually holds the text. The same goes for if you want to see what text someone typed in. This sample application lets you talk to a (make-believe) penguin, and checks the TextBuffer to see if you typed the word "fish" anywhere in it.
ko: TextView에 나타난 텍스트를 바꾸려면 TextBuffer가 실제로 텍스트 내용을 가지고 있으니 TextBuffer에서 처리하십시오. 누가 어떤 텍스트를 입력하는지 여러분이 보려고 할 떄도 동일합니다. 여기 예제 프로그램에서는 펭귄으로 가장한 누군가와 대화하고, "fish" 단어가 어딘가에 있는지 TextBuffer를 확인합니다.

note: (itstool) path: note/p
en: Real-life penguin populations are declining fast, because climate change is melting the ice that they live on and killing the fish that they eat. If you'd like to play a (somewhat silly) GNOME game based on this premise, take a look at <link href="http://pingus.seul.org/">Pingus</link>.
ko: 실제로 수많은 펭귄의 수가 빠르게 줄어가고 있는데, 기후가 바뀌어 펭귄이 살아갈 터전의 빙하가 녹고 펭귄이 먹는 물고기가 줄어가기 때문입니다. 이 전제를 기반으로 만든 (약간은 바보 같을지도 모르는) 그놈 게임을 즐겨보고 싶으시다면 <link href="http://pingus.seul.org/">핑구스</link>를 찾아보십시오.

note: (itstool) path: section/p
en: All the code for this sample goes in the TextViewExample class. The above code creates a <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html">Gtk.Application</link> for our widgets and window to go in.
ko: 이 예제의 모든 코드는 TextViewExample 클래스에 들어갑니다. 위 코드는 위젯과 창이 들어가는 <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html">Gtk.Application</link>를 만듭니다.

note: (itstool) path: section/title
en: Creating the TextView
ko: TextView 만들기

note: (itstool) path: section/p
en: Our first step in this example is to create the <link xref="label.js">Label</link> that the penguin will use to talk to you. We set the text in it to wrap by setting its wrap property to true, but we'll use a different method on the TextView itself that allows for more fine-grained control.
ko: 이 예제의 첫단계에서는 펭귄이 여러분에게 무언가 할 말을 넣을 때 쓸 <link xref="label.js">Label</link>을 만듭니다. 줄바꿈 속성을 true로 설정하여 텍스트 줄을 알아서 바꾸게 한 채로 텍스트를 설정하겠지만, TextView 자체에서 더 세밀한 설정이 가능하기에 다른 방식으로 해보겠습니다.

note: (itstool) path: section/p
en: Our first step is to create a TextBuffer to put the words into. After that we create the TextView, and tell it to use the TextBuffer we created as its buffer. We also set it to be editable, since we want to be able to type new things in.
ko: 첫 단계로 내용을 넣을 TextButter를 만듭니다. 그 다음 TextView를 만들고, 앞서 만든 TextButter를 버퍼로 활용하라고 지시하겠습니다. 또한 새로운 내용을 입력할 수 있게 할 목적으로 편집 가능하게 설정하겠습니다.

note: (itstool) path: section/p
en: The wrap_mode property lets you select from four different <link href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.WrapMode.html">WrapModes</link>. Gtk.WrapMode.CHAR, for instance, starts wrapping around in the middle of a word if you keep typing when it gets to the edge. Most people are probably used to Gtk.WrapMode.WORD, which will automatically put the word you're typing on the next line if it gets to be too long.
ko: wrap_mode 속성은 네가지 각각의 <link href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.WrapMode.html">WrapModes</link> 중 하나를 선택하게 합니다. 예로, Gtk.WrapMode.CHAR는 페이지 모서리에 줄 끝이 도달하면 단어 중간을 잘라 줄을 바꿉니다. 대부분 사람은 줄이 너무 길면 단어 단위로 자동으로 줄을 바꿔주는 Gtk.WrapMode.WORD 옵션을 사용할지도 모릅니다.

note: (itstool) path: section/p
en: Here we create a ScrolledWindow, and set it to automatically scroll if it gets to be too big horizontally or vertically. We also give it a nice-looking ETCHED_IN border. After that, we put our TextView inside, and tell the ScrolledWindow to give us a viewport onto it.
ko: ScrolledWindow를 만들고 수직 수평 방향으로 너무 크면 자동으로 스크롤하게 설정하겠습니다. 또한 멋들어지게 보이도록 잘 다듬은 테두리를 설정하겠습니다. 그 다음, TextView에 넣고 ScrolledWindow에 뷰포트를 제공하라고 지시하겠습니다.

note: (itstool) path: section/p
en: The first <link xref="grid.js">Grid</link> we create only has the Label and the ScrolledWindow inside it.
ko: 처음 <link xref="grid.js">Grid</link> 부분에서 Label과 ScrolledWindow를 만들어넣겠습니다.

note: (itstool) path: section/p
en: We create a <link xref="button.js">Button</link> to send your message to the penguin, and a new Grid that has the other one on top and the Button on the bottom. The Button has a margin on top, so that it isn't squished up against the ScrolledWindow.
ko: 펭귄에게 메시지를 보낼 <link xref="button.js">Button</link>를 만들고, 상단에는 다른 새 Grid를 하단에는 Button을 넣겠습니다. 이 Button에는 상단에 여백을 주어 ScrolledWindow와 찰싹 붙어있지 않게 하겠습니다.

note: (itstool) path: section/p
en: Finally, we attach the main Grid to the window, then we tell the window and everything inside it to become visible when the application is run.
ko: 마지막으로 창에 메인 Grid를 붙이고, 프로그램을 실행할 때 창과 창 안에 있는 모든 요소를 나타내게 하겠습니다.

note: (itstool) path: section/title
en: Function which handles the penguin's response
ko: 펭귄의 응답을 처리하는 함수

note: (itstool) path: section/p
en: Here we use some basic JavaScript functions to have the penguins say something random. Penguins like fish, though, so if you mention fish we want the penguin to respond to that. To do that, we use the JavaScript String object's match method on <file>this.buffer.text</file>, which returns the contents of our TextBuffer.
ko: 여기에 펭귄이 아무렇게나 말하는 JavaScript 기본 함수를 사용합니다. 펭귄은 물고기를 좋아하니, 물고기를 언급하면 펭귄이 대답하게 하겠습니다. 따라서, TextBuffer에 내용을 반환하는 JavaScript 문자열 객체의 <file>this.buffer.text</file>에 있는 match 메서드를 사용하겠습니다.

note: (itstool) path: section/p
en: Since we want to clear out the TextBuffer after each time you click Send, we set <file>this.buffer.text</file> to contain an empty string afterwards. Then we return focus to our TextView, so that you can keep typing without having to click on it beforehand.
ko: 보내기를 누를 떄마다 TextBuffer를 지울테니, 과정이 끝나면 <file>this.buffer.text</file> 값을 빈 문자열로 넣겠습니다. 그 다음 TextView에 포커스를 반환하여 입력하기 전에 굳이 누르지 않아도 계속 입력할 수 있게 하겠습니다.

note: (itstool) path: section/p
en: Finally, we create a new instance of the finished TextViewExample class, and set the application running.
ko: 마지막으로 마무리한 TextViewExample 클래스의 새 인스턴스를 만들고 프로그램을 실행하도록 설정하겠습니다.

note: (itstool) path: info/desc
en: Widget that displays a GtkTextBuffer
ko: GtkTextBuffer를 나타내는 위젯

note: (itstool) path: note/p
en: This is an example of Gtk.TextView.
ko: Gtk.TextView 예제입니다.

note: (itstool) path: note/p
en: But we can also have a new line if we write a long sentence (the text will wrap breaking lines between words).
ko: 그러나 긴 문장을 쓸 경우 줄을 바꿀 수 있습니다(문장을 단어 단위로 나누어 줄을 바꿉니다).

note: (itstool) path: note/p
en: If we have a loooooooooooooooooooooooooooooooooooong
ko: 기이이이이이이이이이이이이이이이이이이인

note: (itstool) path: note/p
en: (that was long)
ko: (길었다면)

note: (itstool) path: note/p
en: word, an horizontal scrollbar will appear.
ko: 단어가 있다면, 수평 스크롤 표시줄이 나타납니다.

note: (itstool) path: section/title
en: Useful methods for a TextView widget
ko: TextView 위젯에 쓸만한 메서드

note: (itstool) path: section/p
en: A <code>Gtk.TextView</code> displays the text stored in a <code>Gtk.TextBuffer</code>. However, most text manipulation is accomplished with iterators, represented by a <code>Gtk.TextIter</code> - a position between two characters in the text buffer. Iterators are not valid indefinitely; whenever the buffer is modified in a way that affects the contents of the buffer, all outstanding iterators become invalid. Because of this, iterators can’t be used to preserve positions across buffer modifications. To preserve a position, we use a <code>Gtk.TextMark</code>, that can be set visible with <code>visible(True)</code>. A text buffer contains two built-in marks; an "insert" mark (the position of the cursor) and the "selection_bound" mark.
ko: <code>Gtk.TextView</code>는 <code>Gtk.TextBuffer</code>에 저장한 텍스트를 나타냅니다. 그러나, 대부분 텍스트 처리는 텍스트 버퍼의 두 문자간 위치 <code>Gtk.TextIter</code>로 표현하는 반복자로 끝냅니다. 반복자는 항상 유효한 존재는 아닙니다. 버퍼의 내용에 영향을 주어 버퍼의 내용이 바뀌면 이 부분을 알고 있든 반복자는 무효화 처리됩니다. 이 때문에, 반복자는 버퍼를 수정할 때 위치 정보를 보관할 목적으로 사용할 수 없습니다. 위치 정보를 어딘가에 보관할 때 <code>visible(True)</code> 함수로 눈에 띄게 나타낼 수 있는 <code>Gtk.TextMark</code>를 사용합니다. 텍스트 버퍼에는 자체적으로 내장한 "insert" 마크(커서 위치)와 "selection_bound"마크가 있습니다.

note: (itstool) path: section/p
en: Methods for a TextView widget:
ko: TextView 위젯의 메서드는 다음과 같습니다:

note: (itstool) path: item/p
en: The TextView widget is by default editable. If you prefer otherwise, use <code>set_editable(False)</code>. If the buffer has no editable text, it might be a good idea to use <code>set_cursor_visible(False)</code> as well.
ko: TextView 위젯은 기본적으로 편집할 수 있습니다. 편집할 수 없게 하려면  <code>set_editable(False)</code> 함수를 사용하십시오 버퍼에 편집할 수 있는 텍스트가 없다면, 마찬가지로 <code>set_cursor_visible(False)</code> 함수를 사용하시는것이 좋습니다.

note: (itstool) path: item/p
en: The justification of the text is set with <code>set_justification(Gtk.Justification.JUSTIFICATION)</code> where <code>JUSTIFICATION</code> is one of <code>LEFT, RIGHT, CENTER, FILL</code>.
ko: 텍스트 정렬은 <code>set_justification(Gtk.Justification.JUSTIFICATION)</code> 함수로 설정합니다. 여기서 <code>JUSTIFICATION</code>은 <code>LEFT, RIGHT, CENTER, FILL</code> 값 중 하나가 들어갑니다.

note: (itstool) path: item/p
en: The line wrapping of the text is set with <code>set_wrap_mode(Gtk.WrapMode.WRAP)</code> where <code>WRAP</code> is one of <code>NONE</code> (the text area is made wider), <code>CHAR</code> (break lines anywhere the cursor can appear), <code>WORD</code> (break lines between words), <code>WORD_CHAR</code> (break lines between words, but if that is not enough between characters).
ko: 텍스트 줄 바꿈은 <code>set_wrap_mode(Gtk.WrapMode.WRAP)</code> 함수로 설정합니다. 여기서 <code>WRAP</code> 값은 <code>NONE</code> (텍스트 영역이 더 넓어짐), <code>CHAR</code> (커서가 나타날 수 있는 어디든 줄 바꿈), <code>WORD</code> (단어 사이 줄 바꿈), <code>WORD_CHAR</code> (단어 사이에 줄을 바꾸지만 문자를 더 넣을 여력이 안되면 문자 사이를 줄바꿈) 값 중 하나입니다.

note: (itstool) path: section/p
en: Methods for a TextBuffer widget:
ko: TextBuffer 위젯의 메서드:

note: (itstool) path: item/p
en: <code>get_insert()</code> returns the <code>Gtk.TextMark</code> that represents the cursor, that is the insertion point.
ko: <code>get_insert()</code> 함수에서는 삽입 지점 커서를 나타내는 <code>Gtk.TextMark</code>를 반환합니다.

note: (itstool) path: item/p
en: <code>get_selection_bound()</code> returns the <code>Gtk.TextMark</code> that represents the selection bound.
ko: <code>get_selection_bound()</code> 함수는 선택 범위를 나타내는 <code>Gtk.TextMark</code>를 반환합니다.

note: (itstool) path: item/p
en: <code>set_text("some text", length)</code> where <code>length</code> is a positive integer or <code>-1</code>, sets the content of the buffer as the first <code>length</code> characters of the <code>"some text"</code> text. If <code>length</code> is omitted or <code>-1</code>, the text is inserted completely. The content of the buffer, if there is any, is destroyed.
ko: <code>length</code>에 양의 정수 또는 <code>-1</code>을 넣을 수 있는 <code>set_text("some text", length)</code> 함수는 <code>"some text"</code> 텍스트를 처음 <code>length</code> 글자 만큼 버퍼에 내용을 넣습니다. <code>length</code> 값을 생략하거나 <code>-1</code>로 두면, 텍스트를 전부 넣습니다. 어떤 값이 들어가면 버퍼의 내용을 해체합니다.

note: (itstool) path: item/p
en: <code>insert(iter, "some text", length)</code> where <code>iter</code> is a text iterator and <code>length</code> is a positive integer or <code>-1</code>, inserts in the buffer at <code>iter</code> the first <code>length</code> characters of the <code>"some text"</code> text. If <code>length</code> is omitted or <code>-1</code>, the text is inserted completely.
ko: <code>iter</code> 에 텍스트 반복자가 들어가고 <code>length</code>에 양의 정수 또는 <code>-1</code>을 넣을 수 있는 <code>insert(iter, "some text", length)</code> 함수에는 <code>"some text"</code> 텍스트 중 처음 <code>length</code> 글자를 버퍼의 <code>iter</code> 위치에 삽입합니다. <code>length</code> 값을 생략하거나 <code>-1</code>로 두면, 텍스트를 전부 넣습니다.

note: (itstool) path: item/p
en: <code>insert_at_cursor("some text", length)</code> does the same as <code>insert(iter, "some text", length)</code>, with the current cursor taken as <code>iter</code>.
ko: <code>insert_at_cursor("some text", length)</code> 함수는 <code>insert(iter, "some text", length)</code> 함수와 동일한 동작을 취하지만 현재 커서 위치를 <code>iter</code>로 취합니다.

note: (itstool) path: item/p
en: <code>create_mark("mark_name", iter, left_gravity)</code> where <code>iter</code> is a <code>Gtk.TextIter</code> and <code>left_gravity</code> is a boolean, creates a <code>Gtk.TextMark</code> at the position of <code>iter</code>. If <code>"mark_name"</code> is <code>None</code>, the mark is anonymous; otherwise, the mark can be retrieved by name using <code>get_mark()</code>. If a mark has left gravity, and text is inserted at the mark’s current location, the mark will be moved to the left of the newly-inserted text. If <code>left_gravity</code> is omitted, it defaults to <code>False</code>.
ko: <code>iter</code>는 <code>Gtk.TextIter</code>이고, <code>left_gravity</code> 값은 부울린 값인 <code>create_mark("mark_name", iter, left_gravity)</code> 함수는 <code>Gtk.TextMark</code>를 <code>iter</code> 위치에 만듭니다. <code>"mark_name"</code>을 <code>None</code>으로 설정하면, 익명으로 표시합니다. 그렇지 않으면 <code>get_mark()</code> 함수를 활용할 때 지정 이름으로 표시 항목을 가져올 수 있습니다. 마크가 왼쪽 정렬 상태고 마크 현재 위치에 텍스트를 넣으면, 마크는 새로 넣은 텍스트의 왼편으로 갑니다. <code>left_gravity</code> 매개변수 값을 생략하면 기본값은 <code>False</code>로 들어갑니다.

note: (itstool) path: item/p
en: To specify that some text in the buffer should have specific formatting, you must define a tag to hold that formatting information, and then apply that tag to the region of text using <code>create_tag("tag name", property)</code> and <code>apply_tag(tag, start_iter, end_iter)</code> as in, for instance:
ko: 버퍼에 임의의 텍스트를 특정 형식으로 지정하려면, 형식 정보를 유지하는 태그를 지정해야하며, 다음과 같이  <code>create_tag("tag name", property)</code> 함수와 <code>apply_tag(tag, start_iter, end_iter)</code> 함수로 태그를 텍스트 영역에 적용해야합니다:

note: (itstool) path: item/p
en: The following are some of the common styles applied to text:
ko: 다음은 텍스트에 적용하는 일반 모양새 일부입니다:

note: (itstool) path: item/p
en: Background colour ("background" property)
ko: 배경 색상("background" 속성)

note: (itstool) path: item/p
en: Foreground colour ("foreground" property)
ko: 전경 색상("foreground" 속성)

note: (itstool) path: item/p
en: Underline ("underline" property)
ko: 밑줄("underline" 속성)

note: (itstool) path: item/p
en: Bold ("weight" property)
ko: 굵게("weight" 속성)

note: (itstool) path: item/p
en: Italics ("style" property)
ko: 기울임("style" 속성)

note: (itstool) path: item/p
en: Strikethrough ("strikethrough" property)
ko: 취소선("strikethrough" 속성)

note: (itstool) path: item/p
en: Justification ("justification" property)
ko: 양쪽배분("justification" 속성)

note: (itstool) path: item/p
en: Size ("size" and "size-points" properties)
ko: 크기("size"와 "size-points" 속성)

note: (itstool) path: item/p
en: Text wrapping ("wrap-mode" property)
ko: 텍스트 줄바꿈("wrap-mode" 속성)

note: (itstool) path: item/p
en: You can also delete particular tags later using <code>remove_tag()</code> or delete all tags in a given region by calling <code>remove_all_tags()</code>.
ko: <code>remove_tag()</code> 함수로 태그 일부를 삭제하거나 <code>remove_all_tags()</code> 함수를 호출하여 주어진 영역의 모든 태그를 삭제할 수 있습니다.

note: (itstool) path: section/p
en: Methods for a TextIter widget
ko: TextIter 위젯 메서드

note: (itstool) path: item/p
en: <code>forward_search(needle, flags, limit)</code> searches forward for <code>needle</code>. The search will not continue past the <code>Gtk.TextIter</code> limit. The <code>flags</code> can be set to one of the following, or any combination of it by concatenating them with the bitwise-OR operator <code>|</code>: <code>0</code> (the match must be exact); <code>Gtk.TextSearchFlags.VISIBLE_ONLY</code> (the match may have invisible text interspersed in needle); <code>Gtk.TextSearchFlags.TEXT_ONLY</code> (the match may have pixbufs or child widgets mixed inside the matched range); <code>Gtk.TextSearchFlags.CASE_INSENSITIVE</code> (the text will be matched regardless of what case it is in). The method returns a tuple containing a <code>Gtk.TextIter</code> pointing to the start and to the first character after the match; if no match is found, <code>None</code> is returned.
ko: <code>forward_search(needle, flags, limit)</code>는 <code>needle</code>을 앞방향으로 검색합니다. <code>Gtk.TextIter</code>에서 지정한 한계값에 도달하면 검색을 계속하지 않습니다. <code>flags</code> 는 <code>0</code>(결과 일치 내용이 정확해야함), <code>Gtk.TextSearchFlags.VISIBLE_ONLY</code> (보이지 않는 글자가 needle에 있을 수도 있음); <code>Gtk.TextSearchFlags.TEXT_ONLY</code> (일치 범위에 있는 내용에 픽셀 버퍼 또는 하위 위젯의 조합으로 이루어짐); <code>Gtk.TextSearchFlags.CASE_INSENSITIVE</code> (대소문자 관계 없이 일치하면 됨)값 중 하나로 지정하거나 비트-OR 연산자 <code>|</code>로 지정할 수 있습니다. 메서드에서는 시작 지점을 가리키는 <code>Gtk.TextIter</code>와 일치 결과를 찾은 지점 다음의 첫번째 문자를 튜플 형태로 반환합니다. 만약 일치 결과가 없으면 <code>None</code>을 반환합니다.

note: (itstool) path: item/p
en: <code>backward_search(needle, flags, limit)</code> does the same as <code>forward_search()</code>, but moving backwards.
ko: <code>backward_search(needle, flags, limit)</code> 함수는 <code>forward_search()</code>와 동일하게 동작하지만 뒷 방향으로 검색합니다.

note: (itstool) path: note/p
en: If we have a loooooooooooooooooooooooooooooooooooong word, a horizontal scrollbar will appear.
ko: 기이이이이이이이이이이이이이이이이이이인 단어가 있다면 수평 스크롤 표시줄이 나타납니다.

note: (itstool) path: info/desc
en: A button which retains state
ko: 상태를 유지하는 단추

note: (itstool) path: page/p
en: When this ToggleButton is in an active state, the spinner spins.
ko: ToggleButton을 활성 상태로 두면 스피너가 돌아갑니다.

note: (itstool) path: info/desc
en: Stays pressed until you click it again
ko: 다시 클릭하기 전에는 눌린 상태를 유지합니다

note: (itstool) path: page/p
en: A ToggleButton is like a normal <link xref="button.js">Button</link>, except that it stays pressed in when you click it. You can use it like an on/off switch, to control things like the <link xref="spinner.js">Spinner</link> in this example.
ko: ToggleButton은 보통 <link xref="button.js">Button</link>이지만 눌렀을 때 눌린 상태라는 점은 다릅니다. 이 예제에서 <link xref="spinner.js">Spinner</link>와 같은 매개를 다룰때 켬/끔 스위치로 사용할 수 있습니다.

note: (itstool) path: page/p
en: A ToggleButton's get_active method returns true if it's pressed in, and false if it's not. Its set_active method is used if you want to change its state without needing to click on it. When it changes state from pressed in to popped out and vice-versa, it sends out the "toggled" signal, which you can connect to a function to do something.
ko: ToggleButton의 <code>get_active()</code> 메서드는 눌렸을 때 true를 반환합니다. 그리고 눌린 상태가 아니면 false를 반환합니다. <code>set_active()</code> 메서드는 단추를 누르지 않아도 상태를 설정하고 싶을 때 사용합니다. 눌려있거나 튀어나왔거나 하는 상태를 바꿀 때, 어떤 함수와 연결할 수 있는 "toggled" 시그널을 내보냅니다.

note: (itstool) path: section/title
en: Creating the ToggleButton and other widgets
ko: ToggleButton과 다른 위젯 만들기

note: (itstool) path: section/p
en: We want this <link xref="spinner.js">Spinner</link> to expand vertically and horizontally, to take up as much space as possible inside the window.
ko: 여기 <link xref="spinner.js">Spinner</link>를 가로 세로 망향으로 확장하여 창 안에서 최대한의 공간을 취할 수 있도록 하려고 합니다.

note: (itstool) path: section/p
en: Creating a ToggleButton is a lot like creating a normal <link xref="button.js">Button</link>. The biggest difference is that you're handling a "toggled" signal instead of a "clicked" signal. This code binds the _onToggle function to that signal, so that it's called whenever our ToggleButton is toggled.
ko: ToggleButton을 만드는 과정은 보통 <link xref="button.js">Button</link>을 만드는 과정과 비슷합니다. "clicked" 시그널이 아닌 "toggled" 시그널을 처리한다는게 큰 차이점입니다. 이 코드에서는 _onToggle 함수를 시그널에 연결하여 ToggleButton의 상태가 바뀌었을 때 호출합니다.

note: (itstool) path: section/p
en: Here we create a simple <link xref="grid.js">Grid</link> to organize everything in, then attach the Spinner and ToggleButton to it.
ko: 여기서 우리는 모든 위젯을 모아두는 간단한 <link xref="grid.js">Grid</link>를 만들고 Spinner와 ToggleButton을 붙여두겠습니다.

note: (itstool) path: section/p
en: Now we add the Grid to the Window, and tell the Window to show itself and its child widgets when the application is started.
ko: 이제 창에 Grid를 추가하고, 프로그램을 시작할 때 창 자체를 나타낸 다음 하위 위젯을 나타내라고 하겠습니다.

note: (itstool) path: section/title
en: Making something happen when the ToggleButton is toggled
ko: ToggleButton 상태가 바뀔때 동작 만들기

note: (itstool) path: section/p
en: Whenever someone toggles the button, this function checks what its state is afterwards using get_active and starts or stops the spinner accordingly. We want it to spin only while the button is pressed in, so if get_active returns true we start the spinner. Otherwise, we tell it to stop.
ko: 단추 눌린 상태를 누군가가 바꾸면, 이 함수에서 get_active() 함수를 사용하여 상태를 확인한 다음에 바로 스피너 동작을 시작하거나 멈춥니다. 우리는 단추가 눌린 동안에만 스피너가 돌아가게 하려고 하기에 get_active에서 true를 반환할 경우에 스피너 회전을 시작하겠습니다. 아니면 멈추라고 하고요.

note: (itstool) path: section/title
en: Useful methods for a ToggleButton widget
ko: ToggleButton 위젯에 쓸만한 메서드

note: (itstool) path: section/p
en: In line 22 the signal <code>"toggled"</code> is connected to the callback function <code>toggled_cb()</code> using <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. See <link xref="signals-callbacks.py"/> for a more detailed explanation.
ko: 22번째 줄에서 <code>"toggled"</code> 시그널은 <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code> 함수로  <code>toggled_cb()</code> 콜백 함수에 연결했습니다. 더 자세한 설명은 <link xref="signals-callbacks.py"/>를 참조하십시오.

note: (itstool) path: info/desc
en: A bar of buttons
ko: 단추 표시줄

note: (itstool) path: page/p
en: Toolbar can contain either text or stock icons. In this sample we use stock icons. This example has fullscreen functionality.
ko: Toolbar에는 텍스트나 스톡 아이콘을 넣을 수 있습니다. 이 예제에서는 스톡 아이콘을 사용하겠습니다. 이 예제에는 전체 화면 기능이 있습니다.

note: (itstool) path: page/p
en: This example uses SimpleActions (window and app). App actions can easily be added to the app menu.
ko: SimpleAction(창과 앱)을 활용하는 예제입니다. 앱 동작은 앱 메뉴에서 쉽게 추가할 수 있습니다.

note: (itstool) path: info/desc
en: A bar of tools
ko: 도구 표시줄

note: (itstool) path: page/p
en: This example uses SimpleActions (window and app). App actions can easily be added the the app menu.
ko: SimpleAction(창과 앱)을 활용하는 예제입니다. 앱 동작은 앱 메뉴에서 쉽게 추가할 수 있습니다.

note: (itstool) path: item/p
en: <link href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.html">Gtk Stock items</link>
ko: <link href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.html">Gtk에 들어있는 항목</link>

note: (itstool) path: info/desc
en: A bar of buttons and other widgets
ko: 단추 및 기타 위젯 표시줄

note: (itstool) path: page/p
en: An example of toolbar with buttons (from stock icons).
ko: (스톡 아이콘에서 온)단추를 Toolbar에 넣은 예제입니다.

note: (itstool) path: section/title
en: Useful methods for a Toolbar widget
ko: Toolbar 위젯에 쓸만한 메서드

note: (itstool) path: section/p
en: In line 32 the signal <code>"activate"</code> from the action <code>undo_action</code> is connected to the callback function <code>undo_callback()</code> using <code><var>action</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. See <link xref="signals-callbacks.py"/> for a more detailed explanation.
ko: 32번째 줄에서 <code>undo_action</code> 동작의 <code>"activate"</code> 시그널은 <code><var>action</var>.connect(<var>signal</var>, <var>callback function</var>)</code> 함수로 <code>undo_callback()</code> 콜백 함수에 연결했습니다. 더 자세한 설명은 <link xref="signals-callbacks.py"/>를 참조하십시오.

note: (itstool) path: item/p
en: Use <code>insert(tool_item, position)</code> to insert the <code>tool_item</code> at <code>position</code>. If <code>position</code> is negative, the item is appended at the end of the toolbar.
ko: <code>position</code> 위치에 <code>tool_item</code>을 넣으려면 <code>insert(tool_item, position)</code> 함수를 사용하십시오. <code>position</code> 값이 음수면 해당 항목을 도구 모음 마지막에 붙여넣습니다.

note: (itstool) path: item/p
en: <code>get_item_index(tool_item)</code> retrieves the position of <code>tool_item</code> on the toolbar.
ko: <code>get_item_index(tool_item)</code> 함수는 도구 모음에서 <code>tool_item</code> 항목의 위치를 가져옵니다.

note: (itstool) path: item/p
en: <code>get_n_items()</code> returns the number of items on the toolbar; <code>get_nth_item(position)</code> returns the item in position <code>position</code>.
ko: <code>get_n_items()</code> 함수는 도구 모음의 항목 갯수를 가져옵니다. <code>get_nth_item(position)</code> 함수는 <code>position</code> 위치의 항목을 반환합니다.

note: (itstool) path: item/p
en: If the toolbar does not have room for all the menu items, and <code>set_show_arrow(True)</code>, the items that do not have room are shown through an overflow menu.
ko: 모든 메뉴 항목에 대해 ToolBar에서 공간을 가지고 있지 않고, <code>set_show_arrow(True)</code> 함수를 실행했다면, 공간이 없는 항목은 오버플로우 메뉴에 나타납니다.

note: (itstool) path: item/p
en: <code>set_icon_size(icon_size)</code> sets the size of icons in the toolbar; <code>icon_size</code> can be one of <code>Gtk.IconSize.INVALID, Gtk.IconSize.MENU, Gtk.IconSize.SMALL_TOOLBAR, Gtk.IconSize.LARGE_TOOLBAR, Gtk.IconSize.BUTTON, Gtk.IconSize.DND, Gtk.IconSize.DIALOG</code>. This should be used only for special-purpose toolbars, normal application toolbars should respect user preferences for the size of icons. <code>unset_icon_size()</code> unsets the preferences set with <code>set_icon_size(icon_size)</code>, so that user preferences are used to determine the icon size.
ko: <code>set_icon_size(icon_size)</code> 함수는 도구 모음의 아이콘 크기를 설정합니다. <code>icon_size</code> 값은 <code>Gtk.IconSize.INVALID, Gtk.IconSize.MENU, Gtk.IconSize.SMALL_TOOLBAR, Gtk.IconSize.LARGE_TOOLBAR, Gtk.IconSize.BUTTON, Gtk.IconSize.DND, Gtk.IconSize.DIALOG</code> 중 하나가 될 수 있습니다. 도구 모음에 지정 목적을 위해서만 사용해야 하며 일반 프로그램 도구 모음에서는 사용자가 원하는 아이콘 크기 설정을 따라야합니다. <code>unset_icon_size()</code> 함수는 <code>set_icon_size(icon_size)</code> 함수로 설정한 항목의 설정을 취소하므로 아이콘 크기를 결정할 때 사용자 설정 값을 사용합니다.

note: (itstool) path: item/p
en: <code>set_style(style)</code>, where <code>style</code> is one of <code>Gtk.ToolbarStyle.ICONS, Gtk.ToolbarStyle.TEXT, Gtk.ToolbarStyle.BOTH, Gtk.ToolbarStyle.BOTH_HORIZ</code>, sets if the toolbar shows only icons, only text, or both (vertically stacked or alongside each other). To let user preferences determine the toolbar style, and unset a toolbar style so set, use <code>unset_style()</code>.
ko: <code>style</code> 값을 <code>Gtk.ToolbarStyle.ICONS, Gtk.ToolbarStyle.TEXT, Gtk.ToolbarStyle.BOTH, Gtk.ToolbarStyle.BOTH_HORIZ</code> 중 하나로 사용하는 <code>set_style(style)</code> 함수는 도구 모음에 아이콘만 나타낼 지, 텍스트만 나타낼 지, 아니면 둘 다(수직 방향, 수평 방향) 나타낼 지를 설정합니다. 사용자 설정으로 도구 모음 모양새를 결정하게 하고, 도구 모음 모양새 설정을 취소하려면 <code>unset_style()</code> 함수를 사용하십시오.

note: (itstool) path: item/p
en: <link href="http://developer.gnome.org/gdk3/unstable/gdk3-Event-Structures.html#GdkEventWindowState">Event Structures</link>
ko: <link href="http://developer.gnome.org/gdk3/unstable/gdk3-Event-Structures.html#GdkEventWindowState">이벤트 구조체</link>

[ctx: text]
note: (itstool) path: info/title
en: Toolbar created using Glade (Python)
ko: 글레이드로 만든 도구 모음(Python)

note: (itstool) path: page/title
en: Toolbar created using Glade
ko: 글레이드로 만든 도구 모음

note: (itstool) path: page/p
en: This example is similar to <link xref="toolbar.py"/>, except we use Glade to create the toolbar in an XML .ui file.
ko: 이 예제는 XML .ui 파일을 만들 때 글레이드를 사용한다는 점만 빼면 <link xref="toolbar.py"/>와 유사합니다.

note: (itstool) path: section/title
en: Creating the toolbar with Glade
ko: 글레이드로 도구 모음 만들기

note: (itstool) path: section/p (itstool) path: page/p
en: To create the toolbar using the <link href="http://glade.gnome.org/">Glade Interface Designer</link>:
ko: <link href="http://glade.gnome.org/">글레이드 인터페이스 디자이너</link>로 도구 모음을 만들려면:

note: (itstool) path: item/p
en: Open Glade, and save the file as <file>toolbar_builder.ui</file>
ko: 글레이드를 열고 <file>toolbar_builder.ui</file> 파일로 저장하십시오

note: (itstool) path: item/p
en: <media type="image" src="media/glade_ui.png" width="900"> Screenshot of Glade ui </media>
ko: <media type="image" src="media/glade_ui.png" width="900"> 글레이드 사용자 인터페이스 스크린샷 </media>

note: (itstool) path: item/p
en: Under <gui>Containers</gui> on the left hand side, right click on the toolbar icon and select <gui>Add widget as toplevel</gui>.
ko: 왼편의 <gui>컨테이너</gui>에서, 도구모음 아이콘에 마우스 커서를 올려둔 후 오른쪽 단추를 누르고 <gui>최상위에 위젯 추가</gui>를 선택하십시오.

note: (itstool) path: item/p
en: <media type="image" src="media/glade_select_toolbar.png"> Screenshot of toolbar icon in Glade ui </media>
ko: <media type="image" src="media/glade_select_toolbar.png"> 글레이드 UI 도구 모음 아이콘 스크린샷 </media>

note: (itstool) path: item/p
en: Under the <gui>General</gui> tab on the bottom right, change the <gui>Name</gui> to <input>toolbar</input> and <gui>Show Arrow</gui> to <gui>No</gui>.
ko: 하단 우측의 <gui>일반</gui> 탭에서 , <gui>이름</gui>을 <input>toolbar</input>로 바꾸고 <gui>Show Arrow</gui>는 <gui>No</gui>로 바꾸십시오.

note: (itstool) path: item/p
en: <media type="image" src="media/glade_toolbar_general.png"> Screenshot of General tab </media>
ko: <media type="image" src="media/glade_toolbar_general.png"> 일반 탭 스크린샷 </media>

note: (itstool) path: item/p
en: Under the <gui>Common</gui> tab, set <gui>Horizontal Expand</gui> to <gui>Yes</gui>.
ko: <gui>공통 사항</gui> 탭에서, <gui>수평 확장</gui>을 <gui>Yes</gui>로 설정하십시오.

note: (itstool) path: item/p
en: <media type="image" src="media/glade_toolbar_common.png"> Screenshot of Common tab </media>
ko: <media type="image" src="media/glade_toolbar_common.png"> 공통 사항 탭 스크린샷 </media>

note: (itstool) path: item/p
en: Right click on the toolbar in the top right and select <gui>Edit</gui>. The <gui>Tool Bar Editor</gui> window will appear.
ko: 우측 상단의 도구 모음에서 마우스 오른쪽 단추를 누른후 <gui>편집</gui>을 선택하십시오. <gui>도구 모음 편집기</gui> 창이 뜹니다.

note: (itstool) path: item/p
en: <media type="image" src="media/glade_toolbar_edit.png"> Screenshot of where to right click to edit toolbar. </media>
ko: <media type="image" src="media/glade_toolbar_edit.png"> 도구 모음을 편집할 때 오른쪽 단추를 누를 부분의 스크린샷. </media>

note: (itstool) path: item/p
en: We want to add 5 ToolButtons: New, Open, Undo, Fullscreen and Leave Fullscreen. First, we will add the New ToolButton.
ko: 새 파일, 열기, 실행 취소, 전체 화면, 전체 화면 나가기 도구 단추 5개를 추가하겠습니다. 우선 새 도구 단추를 추가하겠습니다.

note: (itstool) path: item/p
en: Under <gui>Hierarchy</gui> tab, click <gui>Add</gui>.
ko: <gui>계층 구조</gui> 탭에서, <gui>추가</gui>를 누르십시오.

note: (itstool) path: item/p
en: Change the name of the ToolItem to <input>new_button</input>.
ko: ToolItem 이름을 <input>new_button</input>으로 바꾸십시오.

note: (itstool) path: item/p
en: Scroll down and set <gui>Is important</gui> to <gui>Yes</gui>. This will cause the label of the ToolButton to be shown, when you view the toolbar.
ko: 스크롤을 내린 후 <gui>Is important</gui>를 <gui>Yes</gui>로 설정하십시오. 이렇게 설정하면, 도구 모음에서 도구 단추 레이블이 나타납니다.

note: (itstool) path: item/p
en: Enter the <gui>action name</gui>: <input>app.new</input>.
ko: <gui>동작 이름</gui>을 <input>app.new</input>로 입력하십시오.

note: (itstool) path: item/p
en: Change the <gui>Label</gui> to <input>New</input>.
ko: <gui>레이블</gui>을 <input>New</input>로 바꾸십시오.

note: (itstool) path: item/p
en: Select the <gui>New</gui> Stock Id from the drop down menu, or type <input>gtk-new</input>.
ko: 드롭 다운 메뉴에서 <gui>새로 만들기</gui>의 스톡 ID를 선택하거나 <input>gtk-new</input>를 입력하십시오.

note: (itstool) path: item/p
en: Repeat the above steps for the remaining ToolButtons, with the following properties:
ko: 나머지 ToolButton에 대해 위 단계를 반복하시고, 다음 속성을 설정하십시오:

note: (itstool) path: td/p
en: Is important
ko: 중요 여부

note: (itstool) path: td/p
en: Action name
ko: 동작 이름

note: (itstool) path: td/p
en: Stock Id
ko: 스톡 ID

note: (itstool) path: td/p
en: Yes
ko: 예

note: (itstool) path: td/p
en: Open
ko: 열기

note: (itstool) path: td/p
en: Undo
ko: 실행 취소

note: (itstool) path: td/p
en: Fullscreen
ko: 최대 화면

note: (itstool) path: td/p
en: Leave Fullscreen
ko: 전체 화면 나가기

note: (itstool) path: item/p
en: Close the <gui>Tool Bar Editor</gui>.
ko: <gui>도구 모음 편집기</gui>를 닫으십시오.

note: (itstool) path: item/p
en: When our program will first start, we do not want the <gui>Leave Fullscreen</gui> ToolButton to be visible, since the application will not be in fullscreen mode. You can set this in the <gui>Common</gui> tab, by clicking the <gui>Visible</gui> property to <gui>No</gui>. The ToolButton will still appear in the interface designer, but will behave correctly when the file is loaded into your program code. Note that the method <code>show_all()</code> would override this setting - so in the code we have to use <code>show()</code> separately on all the elements.
ko: 프로그램을 처음 시작할 때, 프로그램이 전체 화면 모드가 아니기에 <gui>전체 화면 나가기</gui> ToolButton을 나타내고 싶진 않습니다. 이 설정은 <gui>일반</gui>  탭에서 <gui>Visible</gui>을 누르고 <gui>No</gui>로 설정할 수 있습니다. ToolButton은 인터페이스 디자이너에서 여전히 나타나겠지만 프로그램 코드에 파일을 불러올 때, 상태에 따라 올바르게 나타납니다. 참고로 <code>show_all()</code> 메서드는 이 설정을 무시한 채로 적용합니다. 따라서, 코드에서는 모든 구성요소에 <code>show()</code> 함수를 각각 적용해야합니다.

note: (itstool) path: item/p
en: <media type="image" src="media/glade_visible_no.png"> Setting the visible property to No </media>
ko: <media type="image" src="media/glade_visible_no.png"> visible 속성을 No로 설정 </media>

note: (itstool) path: item/p
en: Save your work, and close Glade.
ko: 작업을 저장하고 글레이드를 닫으십시오.

note: (itstool) path: item/p
en: The XML file created by Glade is shown below. This is the description of the toolbar. At the time of this writing, the option to add the class Gtk.STYLE_CLASS_PRIMARY_TOOLBAR in the Glade Interface did not exist. We can manually add this to the XML file. To do this, add the following XML code at line 9 of <file>toolbar_builder.ui</file>:
ko: 글레이드에서 만든 XML 파일은 아래와 같습니다. 도구 모음의 설명 부분입니다. 이 글을 쓰는 시점에서는 글레이드 인터페이스에서 추가할 Gtk.STYLE_CLASS_PRIMARY_TOOLBAR 옵션 클래스가 없습니다. 이 옵션 클래스를 XML 파일에 직접 추가할 수 있습니다. 이렇게 하려면, 다음 <file>toolbar_builder.ui</file> XML 코드 9번째 줄에  추가하십시오:

note: (itstool) path: item/p
en: If you do not add this, the program will still work fine. The resulting toolbar will however look slightly different then the screenshot at the top of this page.
ko: 추가하지 않았더라도 프로그램은 여전히 멀쩡하게 동작합니다. Toolbar의 결과는 이 페이지 상단의 스크린샷보다는 약간 다르게 보일 수도 있습니다.

note: (itstool) path: section/p (itstool) path: page/p
en: We now create the code below, which adds the toolbar from the file we just created.
ko: 이제 앞서 만들었던 파일로 Toolbar를 추가하는 아래 코드를 작성하겠습니다.

note: (itstool) path: section/title
en: Useful methods for Gtk.Builder
ko: Gtk.Builder에 쓸만한 메서드

note: (itstool) path: section/p
en: For the useful methods for a Toolbar widget, see <link xref="toolbar.py"/>
ko: Toolbar 위젯의 쓸만한 메서드를 찾아보려면 <link xref="toolbar.py"/>를 참고하십시오

note: (itstool) path: section/p
en: Gtk.Builder builds an interface from an XML UI definition.
ko: Gtk.Builder는 XML UI 정의로 인터페이스를 만듭니다.

note: (itstool) path: item/p
en: <code>add_from_file(filename)</code> loads and parses the given file and merges it with the current contents of the Gtk.Builder.
ko: <code>add_from_file(filename)</code> 함수는 주어진 파일을 불러오고 해석한 다음 Gtk.Builder의 현재 내용과 합칩니다.

note: (itstool) path: item/p
en: <code>add_from_string(string)</code> parses the given string and merges it with the current contents of the Gtk.Builder.
ko: <code>add_from_string(string)</code> 함수는 주어진 문자열을 해석하고 Gtk.Builder의 현재 내용과 합칩니다.

note: (itstool) path: item/p
en: <code>add_objects_from_file(filename, object_ids)</code> is the same as <code>add_from_file()</code>, but it loads only the objects with the ids given in the <code>object_id</code>s list.
ko: <code>add_objects_from_file(filename, object_ids)</code> 함수는 <code>add_from_file()</code> 함수와 동일하지만, <code>object_id</code> 목록에 주어진 ID가 딸린 객체만을 불러옵니다.

note: (itstool) path: item/p
en: <code>add_objects_from_string(string, object_ids)</code> is the same as <code>add_from_string()</code>, but it loads only the objects with the ids given in the <code>object_id</code>s list.
ko: <code>add_objects_from_string(string, object_ids)</code> 함수는 <code>add_from_string()</code>함수와 동일하지만, <code>object_id</code> 목록에 주어진 ID의 객체만을 불러옵니다.

note: (itstool) path: item/p
en: <code>get_object(object_id)</code> retrieves the widget with the id <code>object_id</code> from the loaded objects in the builder.
ko: <code>get_object(object_id)</code> 함수는 빌더에서 불러온 객체의 <code>object_id</code> ID를 가진 위젯을 가져옵니다.

note: (itstool) path: item/p
en: <code>get_objects()</code> returns all loaded objects.
ko: <code>get_objects()</code> 함수는 불러온 모든 객체를 반환합니다.

note: (itstool) path: item/p
en: <code>connect_signals(handler_object)</code> connects the signals to the methods given in the <code>handler_object</code>. This can be any object which contains keys or attributes that are called like the signal handler names given in the interface description, e.g. a class or a dict. In line 39 the signal <code>"activate"</code> from the action <code>undo_action</code> is connected to the callback function <code>undo_callback()</code> using <code><var>action</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. See <link xref="signals-callbacks.py"/> for a more detailed explanation.
ko: <code>connect_signals(handler_object)</code> 함수는 <code>handler_object</code>로 지정한 메서드에 시그널을 연결합니다. 이 함수에는 class 또는 dict 처럼 인터페이스 설명에 주어진 시그널 핸들러 이름처럼 키 또는 속성이 들어간 객체가 될 수 있습니다. 39번째 줄에서 <code>undo_action</code> 동작의 <code>"activate"</code> 시그널은 <code><var>action</var>.connect(<var>signal</var>, <var>callback function</var>)</code> 함수로 <code>undo_callback()</code> 콜백 함수에 연결했습니다. 더 자세한 설명은 <link xref="signals-callbacks.py"/>를 참조하십시오.

[ctx: text]
note: (itstool) path: info/title
en: Toolbar created using Glade (Vala)
ko: 글레이드로 만든 도구 모음(Vala)

note: (itstool) path: page/p
en: This example is similar to <link xref="toolbar.vala"/>, except we use Glade to create the toolbar in an XML ui file.
ko: 이 예제는 XML UI 파일을 사용해 도구 모음을 만들 때 글레이드를 사용할 수 있다는 점은 빼고 <link xref="toolbar.vala"/>와 유사합니다.

note: (itstool) path: item/p
en: When our program will first start, we don't want the <gui>Leave Fullscreen</gui> ToolButton to be visible, since the application will not be in fullscreen mode. You can set this in the <gui>Common</gui> tab, by clicking the <gui>Visible</gui> property to <gui>No</gui>. The ToolButton will still appear in the interface designer, but will behave correctly when the file is loaded into your program code.
ko: 프로그램을 처음 시작할 때, 프로그램이 전체 화면 모드가 아니기에 <gui>전체 화면 나가기</gui> ToolButton을 나타내고 싶진 않습니다. 이 설정은 <gui>일반</gui>  탭에서 <gui>Visible</gui>을 누르고 <gui>No</gui>로 설정할 수 있습니다. ToolButton은 인터페이스 디자이너에서 여전히 나타나겠지만 프로그램 코드에 파일을 불러올 때, 상태에 따라 올바르게 나타납니다.

note: (itstool) path: info/desc
en: Add tips to your widgets
ko: 위젯에 도움말을 추가합니다

note: (itstool) path: page/p
en: A toolbar with a tooltip (with an image) for a button.
ko: 단추에 풍선 도움말(및 그림)을 넣은 도구 모음입니다.

note: (itstool) path: note/p
en: This example builds on the <link xref="toolbar.c">Toolbar</link> example.
ko: 이 예제는 <link xref="toolbar.c">도구 모음</link> 예제로 만듭니다.

note: (itstool) path: item/p
en: <link href="http://developer.gnome.org/gtk3/stable/gtk3-Stock-Items.html">Stock Items</link>
ko: <link href="http://developer.gnome.org/gtk3/stable/gtk3-Stock-Items.html">취급 항목</link>

note: (itstool) path: note/p
en: This example builds on the <link xref="toolbar.js">Toolbar</link> example.
ko: 이 예제는 <link xref="toolbar.js">도구 모음</link> 예제로 만듭니다.

note: (itstool) path: note/p
en: This example builds on the <link xref="toolbar.py">Toolbar</link> example.
ko: 이 예제는 <link xref="toolbar.py">도구 모음</link> 예제로 만듭니다.

note: (itstool) path: section/title
en: Useful methods for a Tooltip widget
ko: Tooltip 위젯에 쓸만한 메서드

note: (itstool) path: section/p
en: <code>set_tooltip_text(text)</code> and <code>set_tooltip_markup(text)</code> can be used to add a tooltip of plain text (or text in the Pango Markup Language) to a widget.
ko: <code>set_tooltip_text(text)</code> 함수와 <code>set_tooltip_markup(text)</code> 함수는 일반 텍스트(또는 팡고 마크업 언어 텍스트) 풍선 도움말을 위젯에 추가할 때 활용할 수 있습니다.

note: (itstool) path: section/p
en: For more complex tooltips, for instance for a tooltip with an image:
ko: 더 복잡한 풍선 도움말은, 그림 위의 풍선 도움말을 예로 들 수 있습니다:

note: (itstool) path: item/p
en: Set the <code>"has-tooltip"</code> property of the widget to <code>True</code>; this will make GTK+ monitor the widget for motion and related events which are needed to determine when and where to show a tooltip.
ko: 위젯의 <code>"has-tooltip"</code> 속성을 <code>True</code> 값으로 설정하십시오. GTK+에서 풍선 도움말을 보여줄 때와 위치를 결정할 때 필요한 위젯의 움직임과 관련 이벤트를 지겨보게합니다.

note: (itstool) path: item/p
en: Connect to the <code>"query-tooltip"</code> signal. This signal will be emitted when a tooltip is supposed to be shown. One of the arguments passed to the signal handler is a GtkTooltip object. This is the object that we are about to display as a tooltip, and can be manipulated in your callback using functions like <code>set_icon()</code>. There are functions for setting the tooltip's markup (<code>set_markup(text)</code>), setting an image from a stock icon (<code>set_icon_from_stock(stock_id, size)</code>), or even putting in a custom widget (<code>set_custom(widget)</code>).
ko: <code>"query-tooltip"</code> 시그널에 연결하십시오. 이 시그널은 풍선 도움말을 나타낼 때 내보냅니다. 시그널 핸들러에 보내는 인자 중 하나는 GtkTooptip 객체입니다. 우리가 풍선 도움말로 나타내려는 객체고, <code>set_icon()</code> 같은 함수로 다룰 수 있습니다. 풍선 도움말의 마크업을 설정(<code>set_markup(text)</code>), 스톡 아이콘으로 그림을 설정(<code>set_icon_from_stock(stock_id, size)</code>), 또는 개별 위젯을 두는(<code>set_custom(widget)</code>) 몇가지 함수가 있습니다.

note: (itstool) path: item/p
en: Return <code>True</code> from your query-tooltip handler. This causes the tooltip to be show. If you return <code>False</code>, it will not be shown.
ko: query-tooltip 핸들러에서 <code>True</code> 값을 반환하십시오. 풍선 도움말을 나타냅니다. <code>False</code> 값을 반환하면 풍선 도움말이 나타나지 않습니다.

note: (itstool) path: section/p
en: In the probably rare case where you want to have even more control over the tooltip that is about to be shown, you can set your own GtkWindow which will be used as tooltip window. This works as follows:
ko: 풍선 도움말이 나타날 때 즈음에 풍선 도움말에 대해 뭔가를 더 다루는 경우는 흔하지 않는데, 이 경우 풍선 도움말 창으로 활용할 GtkWindow를 설정할 수 있습니다. 다음과 같이 하시면 됩니다:

note: (itstool) path: item/p
en: Set <code>"has-tooltip"</code> and connect to <code>"query-tooltip"</code> as before.
ko: <code>"has-tooltip"</code>을 설정하고 이전과 같이 <code>"query-tooltip"</code> 에 연결하십시오.

note: (itstool) path: item/p
en: Use <code>set_tooltip_window()</code> on the widget to set a GtkWindow created by you as tooltip window.
ko: 풍선 도움말 창으로 만든 GTKWindow를 설정하려면 <code>set_tooltip_window()</code> 함수를 위젯에서 사용하십시오.

note: (itstool) path: item/p
en: In the <code>"query-tooltip"</code> callback you can access your window using <code>get_tooltip_window()</code> and manipulate as you wish. The semantics of the return value are exactly as before, return <code>True</code> to show the window, <code>False</code> to not show it.
ko: <code>"query-tooltip"</code> 콜백에서는 <code>get_tooltip_window()</code> 함수로 창에 접근할 수 있고 원하는대로 조절할 수 있습니다. 반환값 의미는 이전에 언급한 바와 같습니다. <code>True</code> 반환 값은 창을 나타내고 <code>False</code>값은 창을 나타내지 않습니다.

note: (itstool) path: note/p
en: This example builds on the <link xref="toolbar.vala">Toolbar</link> example.
ko: 이 예제는 <link xref="toolbar.vala">도구 모음</link> 예제로 만듭니다.

note: (itstool) path: item/p
en: <link href="https://developer.gnome.org/gtk3/3.4/gtk3-Stock-Items.html#GTK-STOCK-UNDO:CAPS">Stock Items</link>
ko: <link href="https://developer.gnome.org/gtk3/3.4/gtk3-Stock-Items.html#GTK-STOCK-UNDO:CAPS">취급 항목</link>

[ctx: text]
note: (itstool) path: info/title
en: Simple Treeview with ListStore (Python)
ko: 간단한 TreeView와 ListStore(Python)

note: (itstool) path: info/desc
en: A TreeView displaying a ListStore (more complex example)
ko: ListStore를 표시하는 TreeView(더 복잡한 예제)

note: (itstool) path: page/title
en: More Complex Treeview with ListStore
ko: 좀 더 복잡한 TreeView와 ListStore

note: (itstool) path: page/p
en: This TreeView displays a simple ListStore with the selection "changed" signal connected.
ko: 이 TreeView에서는 선택 "changed" 시그널을 연결한 간단한 ListStore를 보여줍니다.

note: (itstool) path: section/title
en: Useful methods for a TreeView widget
ko: TreeView 위젯에 쓸만한 메서드

note: (itstool) path: section/p
en: The TreeView widget is designed around a <em>Model/View/Controller</em> design: the <em>Model</em> stores the data; the <em>View</em> gets change notifications and displays the content of the model; the <em>Controller</em>, finally, changes the state of the model and notifies the view of these changes. For more information and for a list of useful methods for TreeModel see <link xref="model-view-controller.py"/>.
ko: TreeView 위젯은 <em>Model/View/Controller</em>  방식으로 설계했습니다. <em>Model</em>은 데이터를, <em>View</em>는 바뀐 내용 알림을 받은 후의 모델의 내용을, 마지막으로 <em>Controller</em>는 모델의 상태를 바꾸고 뷰에게 바뀐 모델의 상태를 알리는 코드를 담습니다. 자세한 내용과 TreeModel에 대한 쓸만한 메서드 목록을 보시려면 <link xref="model-view-controller.py"/>를 참고하십시오.

note: (itstool) path: section/p
en: In line 36 the <code>"changed"</code> signal is connected to the callback function <code>on_changed()</code> using <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. See <link xref="signals-callbacks.py"/> for a more detailed explanation.
ko: 36번째 줄에서 <code>"changed"</code> 시그널은 <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code> 함수로  <code>on_changed()</code> 콜백 함수에 연결했습니다. 더 자세한 설명은 <link xref="signals-callbacks.py"/>를 참조하십시오.

[ctx: text]
note: (itstool) path: info/title
en: TreeView with TreeStore (Python)
ko: TreeView와 TreeStore(Python)

note: (itstool) path: info/desc
en: A TreeView displaying a TreeStore (more complex example, with CellRendererToggle)
ko: TreeStore를 보여주는 TreeView(CellRendererToggle이 들어간 더 복잡한 예제)

note: (itstool) path: page/title
en: More Complex TreeView with TreeStore
ko: 좀 더 복잡한 TreeView와 TreeStore

note: (itstool) path: page/p
en: This TreeView displays a TreeStore with two columns, one of which is rendered as a toggle.
ko: 이 TreeView에서는 두 열을 TreeStore로 나타내는데, 두 열 중 하나는 상태 반전 방식으로 보여줍니다.

note: (itstool) path: section/p
en: In line 48 the <code>"toggled"</code> signal is connected to the callback function <code>on_toggled()</code> using <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. See <link xref="signals-callbacks.py"/> for a more detailed explanation.
ko: 48번째 줄에서 <code>"toggled"</code> 시그널은 <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code> 함수로  <code>on_toggled()</code> 콜백 함수에 연결했습니다. 더 자세한 설명은 <link xref="signals-callbacks.py"/>를 참조하십시오.

[ctx: text]
note: (itstool) path: info/title
en: TreeView with ListStore (JavaScript)
ko: TreeView와 ListStore(JavaScript)

note: (itstool) path: info/desc
en: A widget that shows a separate list of items
ko: 각각의 항목 목록을 보여주는 위젯

note: (itstool) path: page/title
en: TreeView with ListStore
ko: TreeView와 ListStore

note: (itstool) path: page/p
en: A TreeView is like a window onto the contents of either a ListStore or a TreeStore. A ListStore is like a spreadsheet: a "flat", two-dimensional list of things broken up into rows and columns. A TreeStore, meanwhile, can branch out in different directions like a tree can. In this example, we create a TreeView that shows the contents of a ListStore with (fictitious) names and phone numbers in it, and set it so that the <link xref="label.js">Label</link> at the bottom of the window shows more information about whichever name you click on.
ko: TreeView는 ListStore 또는 TreeStore의 내용을 보여주는 창입니다. ListStore는 스프레드 시트와 같습니다. 2차원 평면 자료구조이며 행과 열로 나뉩니다. 반면에 TreeStore는 트리로 할 수 있듯이 자료 묶음 방향을 가지로 쪼갤 수 있습니다. 이 예제에서는 TreeView로 가상의 이름과 전화번호가 들어간 ListStore의 내용을 보여주고, 누른 항목의 이름이 무엇인지 자세한 정보를 보여주도록 창 하단의 <link xref="label.js">Label</link>에 설정하겠습니다.

note: (itstool) path: page/p
en: The TreeView is not just a single widget, but contains a number of smaller ones:
ko: TreeView는 단일 위젯이 아니지만 여러 작은 부분을 담고 있습니다:

note: (itstool) path: item/p
en: TreeViewColumn widgets show each (vertical) column of information from the ListStore. Each one has a title which can be shown at the top of the column, like in the screenshot.
ko: TreeViewColumn 위젯은 ListStore의 각(수직) 열 정보를 보여줍니다. 각각의 TreeViewWidget은 스크린샷에서 보시는 바와 같이 열 상단에 나타낼 제목을 지니고 있습니다.

note: (itstool) path: item/p
en: CellRenderer widgets are "packed" into each TreeViewColumn, and contain the instructions for how to display each individual "cell", or item from the ListStore. There are multiple different types, including the CellRendererText used here and the CellRendererPixbuf, which displays a picture ("pixel buffer").
ko: CellRenderer 위젯은 각 TreeViewColumn에 "패킹" 처리하고, 각 "셀" 또는 ListStore의 항목을 표시하는 방식의 지시 사항을 담습니다. 여기서 사용하는 CellRendererText 그리고 그림("픽셀 버퍼")를 나타내는 CellRendererPixBuf 같은 다양한 형식이 있습니다.

note: (itstool) path: page/p
en: Finally, we're going to use an object called a TreeIter, which isn't a widget so much as an invisible cursor which points to a (horizontal) row in the ListStore. Whenever you click on a name in the phonebook, for instance, we create a TreeIter pointing to the row that's selected, and then use that to tell the ListStore which entry we want the Label to show more information about.
ko: 마지막으로 ListStore에서 (가로 방향) 행을 가리키는 보이지 않는 커서로 위젯이 아닌 TreeIter 객체를 활용하겠습니다. 예를 들어 전화번호부에 이름을 누르면, 선택한 줄을 가리키는 TreeIter를 만드는데, TreeIter는 레이블에 더 많은 정보를 보여줄 항목이 무엇인지 ListStore에 지시할 때 활용합니다.

note: (itstool) path: note/p
en: The TreeView is probably the most complicated Gtk widget, because of how many parts it has and how they all have to work together. Give yourself time to learn how it works and experiment with it, or try something easier first if you're having trouble.
ko: TreeView는 아마도 Gtk 위젯 중에 제일 복잡한 gtk 위젯이 아닐까 하는데, 위젯이 지닌 부분의 양과 함께 동작하는 방식 때문입니다. 동작 방식과 실험을 배울 시간을 확보하시든지, 하다가 문제 생기면 쉬운 부분 부터 먼저 진행하십시오.

note: (itstool) path: section/p
en: All the code for this sample goes in the TreeViewExample class. The above code creates a <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html">Gtk.Application</link> for our widgets and window to go in.
ko: 이 예제의 모든 코드는 TreeViewExample 클래스에 들어갑니다. 위 코드는 위젯과 창이 들어갈 <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html">Gtk.Application</link>을 만듭니다.

note: (itstool) path: section/code
en: 
            // Create the underlying liststore for the phonebook
            this._listStore = new Gtk.ListStore ();
            this._listStore.set_column_types ([
                GObject.TYPE_STRING,
                GObject.TYPE_STRING,
                GObject.TYPE_STRING,
                GObject.TYPE_STRING]);
ko: 
            // Create the underlying liststore for the phonebook
            this._listStore = new Gtk.ListStore ();
            this._listStore.set_column_types ([
                GObject.TYPE_STRING,
                GObject.TYPE_STRING,
                GObject.TYPE_STRING,
                GObject.TYPE_STRING]);
    읽

note: (itstool) path: section/p
en: We first create the ListStore like we would any widget. Then we call its set_column_types method, and pass it an array of GObject data types. (We could have put the types all on one line, but here we are breaking them up to make it easier to read.)
ko: 우선 어떤 위젯도 다룰 수 있도록 ListStore를 만들겠습니다. 그 다음 set_column_types 메서드를 호출하여 GObject 데이터 형식의 배열에 전달하겠습니다(한 줄에 모든 형식을 넣을 수 있지만, 보기 쉽게 하려는 목적으로 쪼갰습니다).

note: (itstool) path: section/p
en: The GObject data types you can use include:
ko: 여러분이 사용할 수 있는 GObject 데이터 형식은 다음과 같습니다:

note: (itstool) path: item/p
en: <file>gtk.gdk.Pixbuf</file> -- A picture
ko: <file>gtk.gdk.Pixbuf</file> -- 그림

note: (itstool) path: section/p
en: In this case, we're making a ListStore of four columns, each one containing string values.
ko: 이 경우, 각 칸마다 문자열 값이 들어가는 4칸을 지닌 ListStore를 만듭니다.

note: (itstool) path: section/p
en: Here we have the information to go in the ListStore. It's an array of objects, each one corresponding to a single entry in our phone book.
ko: ListStore에 정보를 넣었습니다. 전화번호부의 단일 항목에 해당하는 객체 배열입니다.

note: (itstool) path: section/p
en: Note that the TreeView in the screenshot doesn't actually show the data from the "description" properties. Instead, that information's shown in the Label beneath it, for whichever row that you click on. That's because the TreeView and ListStore are two separate things, and a TreeView can show all or part of a ListStore, and display what's in it in different ways. You can even have multiple widgets show things from the same ListStore, like the Label in our example or even a second TreeView.
ko: 참고로 스크린샷의 TreeView는 실제로 "description" 속성의 데이터를 보여주지 않습니다. 대신 레이블 아래 여러분이 클릭해서 나타난 정보를 보여줍니다. 왜냐면 TreeView와 ListStore는 별개의 존재고, TreeView는 ListStore의 모든 부분을 보여줄 수 있으며, 무엇이 들어있는지 보여주는 방식이 다르기 때문입니다. 우리 예제의 레이블 내지는 두번째 TreeView 처럼 동일한 ListStore의 내용을 여러 위젯으로 보여줄 수 있습니다.

note: (itstool) path: section/p
en: This <file>for</file> loop puts the strings from our phonebook into our ListStore in order. In order, we pass the ListStore's set method the iter that points to the correct row, an array which says which columns we want to set, and an array which contains the data we want to put into those columns.
ko: <file>for</file> 루프로 전화번호부에서 가져온 문자열을 ListStore에 순서대로 넣습니다. 순서대로 ListStore의 set 메서드로 설정하고자 하는 열의 배열, 각 열에 넣어두고나 하는 데이터가 들어간 배열, 올바른 열을 가리키는 iter 값을 전달합니다.

note: (itstool) path: section/p
en: A ListStore's <file>append</file> method adds a horizontal row onto it (it starts out with none), and returns a TreeIter pointing to that row like a cursor. So by passing <file>this._listStore.append()</file> to the ListStore as a property, we're creating a new row and telling the <file>set</file> method which row to set data for at the same time.
ko: ListStore의 <file>append</file> 메서드로 수평줄을 추가하고(아무것도 없는 상태에서 시작),  커서와 같은 해당 줄에 대한 TreeIter 포인터를 반환합니다. 따라서 ListStore에 <file>this._listStore.append()</file> 함수 값을 속성으로 전달하여 새 줄을 만들고 <file>set</file> 메서드를 통해 방금 만든 새 줄에 통시에 데이터를 넣도록 하겠습니다.

note: (itstool) path: section/title
en: Creating the TreeView
ko: TreeView 만들기

note: (itstool) path: section/p
en: Here we create a basic TreeView widget, that expands both horizontally and vertically to use as much space as needed. We set it to use the ListStore we created as its "model", or the thing it'll show us stuff from.
ko: 여기서는 기본적인 TreeView 위젯을 만들어, 가로 세로 방향으로 필요한 만큼 충분한 공간을 늘릴수 있게 하겠습니다. 우리가 만든 ListStore를 "모델"로 사용하거나, 어딘가로부터 가져온 내용을 활용하게 하겠습니다.

note: (itstool) path: section/p
en: Now we create each of the vertical TreeViewColumns we'll see in the TreeView. The title for each one goes at the top, as you can see in the screenshot.
ko: 이제 TreeView에서 볼 각각의 TreeViewColumn을 만들겠습니다. 각 TreeViewColumn의 제목은, 스크린샷에서 보시는 대로 상단에 올라갑니다.

note: (itstool) path: section/p
en: Here we create the CellRenderers that we'll use to display the text from our ListStore, and pack them into the TreeViewColumns. Each CellRendererText is used for all the entries in that column. Our normal CellRendererText just creates plain text, while our bold one uses heavier-weight text. We put it into the first name column, and tell the other two to use copies of the normal one. The "true" used as the second parameter for the <file>pack_start</file> method tells it to expand the cells when possible, instead of keeping them compact.
ko: 여기서 ListStore의 텍스트를 나타내는데 활용할 CellRenderer를 만들었고 TreeViewColumns에 감쌌습니다. 각 CellRendererText는 칸에 들어간 모든 항목에 사용합니다. 굵은 글씨에는 더 굵은 텍스트를 사용하지만, 일반적인 CellRendererText는 그냥 텍스트를 만듭니다. 일단 이름 열에 넣고, 다른 두 부분은 일반 CellRendererText로 넣으라고 하겠습니다. <file>pack_start</file> 메서드 두번째 매개변수 값으로 사용하는 "true" 값은 가능할 경우 작은 상태로 유지하지 말고 셀 크기를 확장하라고 지시합니다.

note: (itstool) path: note/p
en: <link href="http://www.pygtk.org/docs/pygtk/pango-constants.html">Here is a list</link> of other text properties you can use. In order to use these Pango constants, make sure to put the line <file>const Pango = imports.gi.Pango;</file> at the beginning of your code like we did.
ko: 여러분이 활용할 수 있는 다른 텍스트 속성 <link href="http://www.pygtk.org/docs/pygtk/pango-constants.html">목록</link> 입니다. 팡고 상수를 활용하려면, 우리가 했던 바와 같이 <file>const Pango = imports.gi.Pango;</file> 줄을 코드 앞부분에 넣었는지 확인하십시오.

note: (itstool) path: section/p
en: Now that we've put the CellRenderers into the TreeViewColumns, we use the <file>add_attribute</file> method to tell each column to pull in text from the model our TreeView is set to use; in this case, the ListStore with the phonebook.
ko: 이제 CellRenderer를 TreeViewColumns에 넣었습니다. <file>add_attribute</file> 메서드를 활용하여 활용하기로 설정한 TreeView 모델에서 텍스트를 가져와서 각 칸에 뿌리도록 하겠습니다. 이 경우 전화번호부가 들어간 ListStore가 되겠습니다.

note: (itstool) path: item/p
en: The first parameter is which CellRenderer we're going to use to render what we're pulling in.
ko: 첫번째 매개변수는 우리가 렌더러에 데이터를 가져다 넣을때 활용할 CellRenderer입니다.

note: (itstool) path: item/p
en: The second parameter is what kind of information we're going to pull in. In this case, we're letting it know that we're rendering text.
ko: 두번째 매개변수는 가져다젛을 정보의 종류입니다. 여기서는 텍스트를 렌더링하라고 알려줍니다.

note: (itstool) path: item/p
en: The third parameter is which of the ListStore's columns we're pulling that information in from.
ko: 세번째 매개변수는 우리가 가져올 정보가 들어간 ListStore의 열 위치를 말합니다.

note: (itstool) path: section/p
en: After we've set that up, we use the TreeView's <file>insert_column</file> method to put our TreeViewColumns inside it in order. Our TreeView is now complete.
ko: 설정하고 나면 TreeView의 <file>insert_column</file> 메서드를 활용하여 TreeViewColumns 네 순서대로 넣겠습니다. 이제 TreeView 구현이 끝났습니다.

note: (itstool) path: note/p
en: Normally, you might want to use a loop to initialize your TreeView, but in this example we're spelling things out step by step for the sake of making it easier to understand.
ko: 보통 TreeView를 초기화하려고 루프를 사용하고 싶을지도 모릅니다만, 이 예제에서는 이해를 쉽게 하기 위한 단계별로 하나하나 설명하겠습니다.

note: (itstool) path: section/title
en: Building the rest of the UI
ko: 나머지 사용자 인터페이스 구성

note: (itstool) path: section/p
en: The TreeView's <file>get_selection</file> method returns an object called a TreeSelection. A TreeSelection is like a TreeIter in that it's basically a cursor that points at a particular row, except that the one it points to is the one that's visibly highlighted as selected.
ko: TreeView의 <file>get_selection</file> 메서드는 TreeSelection 객체를 반환합니다. TreeSelection은 행 일부를 가리키는 근본 커서로서 TreeIter와 유사하지만, TreeSelection에는 선택한 부분을 눈에 띄게 강조하는 차이점을 안고 있습니다.

note: (itstool) path: section/p
en: After we get the TreeSelection that goes with our TreeView, we ask it to tell us when it changes which row it's pointing to. We do this by connecting its <file>changed</file> signal to the _onSelectionChanged function we wrote. This function changes the text displayed by the Label we just made.
ko: TreeSelection을 TreeView에서 가져오고 난 후, TreeSelection에 가리키는 행이 어디인지 요청할 수 있습니다. <file>changed</file> 시그널을 우리가 작성한 _onSelectionChanged 함수에 연결하면 됩니다. 이 함수는 우리가 만든 Label의 텍스트를 바꿉니다.

note: (itstool) path: section/p
en: After we've gotten that out of the way, we create a <link xref="grid.js">Grid</link> to put everything in, then add it to our window and tell the window to show itself and its contents.
ko: 위 과정을 끝내고 나면, 모든 위젯을 넣을 <link xref="grid.js">Grid</link>를 만들고, Grid를 창에 추가하여 창과 창에 있는 내용을 표시하도록 합니다.

note: (itstool) path: section/title
en: Function which handles a changed selection
ko: 바뀐 선택을 처리하는 함수

note: (itstool) path: section/p
en: The line of code with the let statement is a little convoluted, but it's nonetheless the best way to get a TreeIter pointing to the same row as our TreeSelection. It has to create a couple of other object references, but <file>iter</file> is the only one we need.
ko: let 문 코드 줄은 조금 복잡하긴 하지만, 그래도 TreeSelection에서 동일한 줄을 가리키는 TreeIter를 가져오는 최상의 수단입니다. 다른 수많은 객체 참조를 들고 있긴 하지만, <file>iter</file>만 필요합니다.

note: (itstool) path: section/p
en: After we've done that, we call the Label's <file>set_label</file> function, and use the ListStore's <file>get_value</file> function a handful of times to fill in the data we want to put in it. Its parameters are a TreeIter pointing to the row we want to get data from, and the column.
ko: 이 과정이 끝나면 레이블의 <file>set_label</file> 함수를 호출하고 ListStore의 <file>get_value</file>  함수를 활용하여 짦은 시간 내에 원하는 데이터를 채워넣겠습니다. 매개 변수는 우리가 가져온 줄 위치와 열을 가리키는 TreeIter입니다.

note: (itstool) path: section/p
en: Here, we want to get data from all four columns, including the "hidden" one that's not part of the TreeView. This way, we can use our Label to show strings that are too large to fit in the TreeView, and that we don't need to see at a glance.
ko: TreeView의 일부가 아닌 "hidden"을 네 열의 데이터와 가져오려합니다. 여기서 TreeView에 맞추긴 너무 긴 문자열을 Label에 표시하여 굳이 살펴볼 필요가 없게 하겠습니다.

note: (itstool) path: section/p
en: Finally, we create a new instance of the finished TreeViewExample class, and set the application running.
ko: 마지막으로 TreeViewExample 클래스의 새 인스턴스를 만들고 프로그램 실행을 설정하겠습니다.

[ctx: text]
note: (itstool) path: info/title
en: Simple TreeView with ListStore (Python)
ko: 간단한 TreeView와 ListStore(Python)

note: (itstool) path: info/desc
en: A TreeView displaying a ListStore (simpler example)
ko: ListStore를 표시하는 TreeView(더 간단한 예제)

note: (itstool) path: page/title
en: Simple TreeView with ListStore
ko: 간단한 TreeView와 ListStore

note: (itstool) path: section/p
en: The TreeView widget is designed around a <em>Model/View/Controller</em> design: the <em>Model</em> stores the data; the <em>View</em> gets change notifications and displays the content of the model; the <em>Controller</em>, finally, changes the state of the model and notifies the view of these changes. For more information, and for a list of useful methods for TreeModel, see <link xref="model-view-controller.py"/>.
ko: TreeView 위젯은 <em>Model/View/Controller</em>  방식으로 설계했습니다. <em>Model</em>은 데이터를, <em>View</em>는 바뀐 내용 알림을 받은 후의 모델의 내용을, 마지막으로 <em>Controller</em>는 모델의 상태를 바꾸고 뷰에게 바뀐 모델의 상태를 알리는 코드를 담습니다. 자세한 내용과 TreeModel에 대한 쓸만한 메서드 목록을 보시려면 <link xref="model-view-controller.py"/>를 참고하십시오.

note: (itstool) path: section/p
en: In line 44 the <code>"changed"</code> signal is connected to the callback function <code>on_changed()</code> using <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code>. See <link xref="signals-callbacks.py"/> for a more detailed explanation.
ko: 44번째 줄에서 <code>"changed"</code> 시그널은 <code><var>widget</var>.connect(<var>signal</var>, <var>callback function</var>)</code> 함수로 <code>on_changed()</code> 콜백 함수에 연결했습니다. 더 자세한 설명은 <link xref="signals-callbacks.py"/>를 참조하십시오.

[ctx: text]
note: (itstool) path: info/title
en: Simple Treeview with ListStore (Vala)
ko: 간단한 TreeView와 ListStore(Vala)

note: (itstool) path: info/desc
en: A widget can display any TreeModel implementation (lists and trees)
ko: TreeModel 구현체를 나타낼 수 있는 위젯(리스트와 트리)

note: (itstool) path: page/title
en: Simple Treeview with ListStore
ko: ListStore로 구현한 간단한 TreeView

note: (itstool) path: page/p
en: This TreeView displays a simple ListStore with the Selection "changed" signal connected.
ko: 이 트리뷰에서는 선택 "changed" 시그널을 연결하여 간단한 ListStore를 보여드립니다.

note: (itstool) path: info/desc
en: A TreeView displaying a TreeStore (simpler example)
ko: TreeStore를 표시하는 TreeView(더 간단한 예제)

note: (itstool) path: page/title
en: Simpler TreeView with TreeStore
ko: 더 간단한 TreeView와 TreeStore

note: (itstool) path: page/p
en: This TreeView displays a TreeStore.
ko: 이 TreeView에서는 TreeStore의 내용을 표시합니다.

[ctx: text]
note: (itstool) path: info/title
en: Tutorial for beginners (Python)
ko: 초보자 지침서(Python)

note: (itstool) path: info/desc
en: A tutorial for beginners who want to learn how to program GUIs using GTK+ in Python.
ko: GTK+를 활용하여 파이썬 언어로 프로그래밍하는 방법을 배워보려는 초보자용 따라하기 지침입니다.

note: (itstool) path: synopsis/p
en: By following these tutorials you will learn the basics of GUI programming using GTK+ in Python.
ko: 이 따라하기 지침서를 통해 파이썬 언어를 통한 GTK+ GUI 프로그래밍 기본을 배웁니다.

note: (itstool) path: synopsis/p
en: If you have never programmed before, or are not familiar with the concepts of object oriented programming, you may need to learn a few basics first. The book <link href="http://learnpythonthehardway.org/book/">Learn Python the Hard Way</link> or <link href="http://docs.python.org/tutorial/index.html">The Python Tutorial</link> may be a better place for you to start. You may also be interested in <link href="http://python-gtk-3-tutorial.readthedocs.org/en/latest/index.html">The Python GTK+ 3 Tutorial</link>. Once you master the basics, be sure to come back and check out these tutorials.
ko: 프로그래밍을 해본 적이 없거나 객체지향 프로그래밍에 익숙하지 않다면 우선 기본 학습이 필요합니다. <link href="http://learnpythonthehardway.org/book/">Learn Python the Hard Way</link> 또는 <link href="http://docs.python.org/tutorial/index.html">The Python Tutorial</link>이 시작하기에 좋은 자료입니다. <link href="http://python-gtk-3-tutorial.readthedocs.org/en/latest/index.html">The Python GTK+ 3 Tutorial</link>에도 관심있을 지도 모릅니다. 기본을 익히고 나면 돌아와서 이 지침서를 다시 확인해보십시오.

note: (itstool) path: section/title
en: To run the code samples
ko: 예제 코드를 실행하려면

note: (itstool) path: section/p
en: To run the code samples in the tutorial:
ko: 지침서의 예제 코드를 실행하려면:

note: (itstool) path: item/p
en: Type or copy and paste the code into a file, and save the file with a name like <var>filename</var>.py
ko: 파일에 코드를 입력하거나 복사하여 붙여넣고 <var>filename</var>.py 식으로 파일을 저장하십시오

note: (itstool) path: item/p
en: To execute the code, type in the terminal:
ko: 코드를 실행하려면 터미널에 다음과 같이 입력하십시오:

note: (itstool) path: section/p
en: After executing the code, you will either see the widget on your screen, or (if you have mistyped some of the code) you will see an error message that will help you identify the problem.
ko: 코드를 실행한 다음에는 화면에 위젯을 띄워 볼 수 있거나, (코드에 오타가 있을 경우) 문제를 확인하는데 도움을 줄 오류 메시지를 볼 수 있습니다.

note: (itstool) path: section/title
en: A path through the widgets (with some theory)
ko: 위젯 활용법(과 약간의 이론 지식)

note: (itstool) path: section/p
en: The tutorial will walk you through increasingly complex examples and programming theory, but you can also feel free to just go directly to the tutorial that is most helpful to you.
ko: 이 따라하기 지침은 여러분을 점점 복잡한 예제와 프로그래밍 이론 내용으로 안내하지만, 여러분에게 더 도움이 되는 내용이 들어있는 다른 따라하기 지침으로 바로 건너뛰셔도 됩니다.

note: (itstool) path: steps/title
en: Tutorial
ko: 지침서

note: (itstool) path: steps/title
en: Basic windows
ko: 기본 창

note: (itstool) path: steps/title
en: Images and labels
ko: 그림 및 레이블

note: (itstool) path: steps/title
en: Introduction to properties
ko: 속성 소개

note: (itstool) path: steps/title
en: Grid, separator and scrolling
ko: 그리드, 구분선, 스크롤

note: (itstool) path: steps/title
en: Signals, callbacks and buttons
ko: 시그널, 콜백 함수 및 단추

note: (itstool) path: steps/title
en: Other display widgets
ko: 기타 표시 위젯

note: (itstool) path: steps/title
en: Entry widgets
ko: Entry 위젯

note: (itstool) path: steps/title
en: A widget to write and display text
ko: 텍스트를 쓰고 표시하는 위젯

note: (itstool) path: steps/title
en: Dialogs
ko: 대화상자

note: (itstool) path: steps/title
en: Menus, Toolbars and Tooltips (also: using Glade and GtkBuilder)
ko: 메뉴, 도구모음, 풍선 도움말(및: 글레이드 GtkBuilder 사용)

note: (itstool) path: steps/title
en: TreeViews and ComboBoxes (using the M/V/C design)
ko: TreeViews와 ComboBox(M/V/C 설계 사용)

note: (itstool) path: steps/title
en: Custom widget
ko: 개별 구성 위젯

note: (itstool) path: page/title
en: Tutorials, code samples and platform demos in Vala
ko: Vala 언어용 따라하기 지침, 코드 예제, 플랫폼 데모

note: (itstool) path: section/title
en: Code samples and tutorial
ko: 예제 코드 및 따라하기 지침

[ctx: text]
note: (itstool) path: info/title
en: Weather application (JavaScript)
ko: 날씨 프로그램(JavaScript)

note: (itstool) path: info/desc
en: How to plan an application that uses asynchronous calls. Asynchronous calls will be presented through a weather application.
ko: 비동기 함수 호출을 활용하는 프로그램을 기획하는 방법입니다. 비동기 함수 호출은 날씨 프로그램에서 보여드리겠습니다.

note: (itstool) path: page/title
en: Weather application
ko: 날씨 프로그램

note: (itstool) path: synopsis/p
en: In this guide well construct a weather application using asynchronous calls. Weather information in this example is fetched from geonames.org and the application is using the <link href="http://en.wikipedia.org/wiki/List_of_airports_by_ICAO_code:_E">ICAO codes </link> to place your weather request. To write and run all the code examples yourself, you need an editor to write code in, Terminal and GNOME 3 or higher installed into your computer. In this guide we we'll go through the following parts:
ko: 안내서의 이 부분에서는 비동기 호출을 활용하여 로컬 라이브러리 geoNames를 만듭니다. 이 예제의 날씨 정보는 geonames.org에서 가져오며, 프로그램에서 날씨 정보를 요청할 때 <link href="http://en.wikipedia.org/wiki/List_of_airports_by_ICAO_code:_E">ICAO codes</link>를 활용합니다. 모든 코드 예제를 여러분 스스로 작성하고 실행하라면 코드를 작성해넣을 편집기, 터미널, 그놈 3 이상을 컴퓨터에 설치해야 합니다. 이 안내서에서는 다음 내용을 진행합니다:

note: (itstool) path: item/p
en: <link xref="#planningUi">Planning the graphical user interface</link>
ko: <link xref="#planningUi">그래픽 사용자 인터페이스 기획</link>

note: (itstool) path: item/p
en: <link xref="#asynchronous">Asynchronous calls</link>
ko: <link xref="#asynchronous">비동기 함수 호출</link>

note: (itstool) path: item/p
en: <link xref="#main">The main program file</link>
ko: <link xref="#main">main 프로그램 파일</link>

note: (itstool) path: item/p
en: <link xref="#main">Local library GeoNames</link>
ko: <link xref="#main">자체 GeoNames 라이브러리</link>

note: (itstool) path: item/p
en: <link xref="#main">Autotools and Icons</link>
ko: <link xref="#main">Autotool과 아이콘</link>

note: (itstool) path: section/title
en: Planning the graphical user interface
ko: 그래픽 사용자 인터페이스 기획

note: (itstool) path: section/p
en: Structuring an application for GNOME 3 means you will be using <link href="http://developer.gnome.org/platform-overview/stable/gtk">GTK+</link>. The most important thing is to remember that the main window will only accept one widget. You must plan your structure accordingly (this example is using Gtk.Grid). A useful method is to draw out the main window and place every widget needed inside that box. By looking at an image of your future application it is easier to tell what are the relations between widgets. For example Gtk.Grid places your widgets in relation to other widgets, so after the first widget is in place, placing widgets can be done in relation to any widget on the grid.
ko: 그놈 3 프로그램을 구성한다는 건 결국 <link href="http://developer.gnome.org/platform-overview/stable/gtk">GTK+</link>를 사용한다는 의미입니다. 메인 창은 하나의 위젯만 받아들일 수 있다는 점이 기억해야 할 중요한 점입니다. 이에 따라 구조를 기횡해야 합니다(이 예제는 Gtk.Grid를 사용함). 쓸만한 메서드는 메인 창을 그리고 필요한 모든 위젯을 박스에 넣는 함수입니다. 나중에 만들 프로그램의 그림을 살펴보면 여러 위젯에 어떤 관계가 있는지 쉽게 이야기할 수 있습니다. 예를 들어 Gtk.Grid에는 다른 위젯과의 관계에 따라 여러분의 위젯을 둡니다. 따라서 처음 위젯을 두고 나면, 그리드에서 다른 위젯에 관계에 따라 다른 위젯을 어떤 위치에 둘 수 있습니다.

note: (itstool) path: section/title
en: Asynchronous calls
ko: 비동기 호출

note: (itstool) path: section/p
en: With many programming languages, all operations are run synchronously - you tell the program to do something, and it will wait until that action completes before proceeding. This is however bad for graphical user interfaces, as then the whole application will be frozen while the program waits for the operation. Going asynchronous (async) helps here. With async calls, your UI won't be blocked with any requests. Async calls make your application more flexible and better equipped to handle situations when calls take more time than expected or for some reason get jammed. Async calls can be used for example file system I/O and for slower calculations in the background.
ko: 수많은 프로그래밍 언어에서는 많은 동작 처리를 동기방식으로 처리합니다. 여러분의 프로그램에 무언가를 지시하면 앞에 진행하던 동작이 끝나기 전까지 기다립니다. 프로그램이 처리를 기다리는 동안 전체 프로그램이 멈추기에 그래픽 사용자 인터페이스에 좋지 않습니다. 여기서 비동기 방식(async)으로 처리해보겠습니다. 비동기 호출을 수행하면, 여러분이 작성한 사용자 인터페이스는 어떤 요청에도 동작을 멈추지 않습니다. async 호출은 프로그램 동작을 유연하게 하며, 예상 보다 더 많은 함수 호출이 있거나 무슨 이유로 인해 동작이 꼬이는 경우를 처리할 수 있습니다. 비동기 호출은 시스템 입출력과 백그라운드의 느린 계산처리에 활용할 수 있습니다.

note: (itstool) path: section/p
en: In this example we have to get data from geonames.org. While we do that we want the rest of our program to continue. If we wouldn't get any information from geonames.org for the lack of internet connection and this would be a synchronous application we would never get to the point where our main_quit() is processed correctly and the application would have to killed from Terminal.
ko: 이 예제에서는 geonames.org에서 데이터를 가져와야합니다. 데이터를 가져오는 동안 프로그램의 나머지 동작 부분을 계속 활용하고자 합니다. 인터넷 연결 상태가 좋지 않아 geonames.org에서 어떤 정보도 가져오지 못했고 이 프로그램이 동기 방식 처리 프로그램이라면, main_quit()를 제대로 처리할 부분을 확인할 수 없을 뿐더러 프로그램을 터미널에서 강제로 끝내야 할 수도 있습니다.

note: (itstool) path: section/title
en: The different parts of the program
ko: 프로그램의 각 부분

note: (itstool) path: page/title
en: The main program file
ko: 주 프로그램 파일

note: (itstool) path: synopsis/p
en: In this part of the guide well construct the main program file of the weather application. To write and run all the code examples yourself, you need an editor to write code in, Terminal and GNOME 3 or higher installed into your computer. In this part we we'll go through the following parts:
ko: 안내서의 이 부분에서는 날씨 프로그램의 주 프로그램 파일을 만들어보겠습니다. 여러분이 모든 코드 예제를 작성하고 실행하려면, 코드를 작성할 편집기, 터미널, 그놈 3 이상을 컴퓨터에 설치해야합니다. 여기서는 다음 내용을 진행합니다:

note: (itstool) path: item/p
en: <link xref="#widgets">Adding a grid and all the necessary widgets to it</link>
ko: <link xref="#widgets">그리드를 추가하고 필요한 위젯 넣기</link>

note: (itstool) path: item/p
en: <link xref="#asynccall">Requesting the weather information asynchronously</link>
ko: <link xref="#asynccall">날씨 정보 비동기 요청</link>

note: (itstool) path: item/p
en: <link xref="#connectingbuttons">Connecting signals to button and entry</link>.
ko: <link xref="#connectingbuttons">단추와 항목에 시그널 연결</link>.

note: (itstool) path: section/p
en: This line tells how to run the script. It needs to be the first line of the code and it needs to be executable. To get the execution rights go to Terminal and run in right folder: chmod +x scriptname. Or you can use the graphical filemanager. Just go to the right folder where your code is, right click you code file, choose properties, click the permissions tab and check the box for allow executing file as a program
ko: 이 줄은 스크립트 실행 방법을 알려줍니다. 이 부분은 코드의 처음 부분에 들어가야하며, 스크립트 파일을 실행할 수 있어야합니다. 실행 권한을 가져오려면 터미널을 열고 올바른 폴더에서 chmod +x scriptname 명령을 실행하십시오. 또는 그래픽 파일 관리자를 활용할 수 있습니다. 코드가 있는 적절한 폴더에 들어가서 코드를 작성한 파일에 마우스 커서를 두고 오른쪽 단추를 누른 다음, 속성, 권한 탭을 선택하시고 파일을 프로그램처럼 실행하도록 상자에 표시하십시오.

note: (itstool) path: section/p
en: In order to have a working program we need to import a GObject Introspection -library to our use. For working UI, we need Gtk. Gtk is imported in the beginning so we have it in our use everywhere. We also import our own local JavaScript library geonames to our use here.
ko: 프로그램이 동작하려면 GObject 인트로스펙션 라이브러리를 가져와야합니다. UI를 동작하게 할 목적으로 Gtk가 필요합니다. Gtk는 앞부분에서 임포팅해서 코드의 모든 곳에서 쓸 수 있습니다. 또한, 우리가 여기서 사용할 JavaScript geonames 자체 라이브러리를 임포티해야합니다.

note: (itstool) path: section/title
en: Adding a grid and all the necessary widgets to it
ko: 그리드를 추가하고 그리드에 필요한 모든 위젯을 넣으십시오

note: (itstool) path: section/p
en: In this section we create the grid we are going to use for positioning the widgets. All the buttons, labels and entries are initialized and placed on the grid. As seen from the placing of the different widgets, they don't need to be related only to one widget. At this point some of the labels don't have any content. The content for those widgets is applied later. If you run the application at this stage, you have the UI ready, but the widgets are not connected to anything. For this we need to first build the weather searching local library, and then get the information we need asynchronously. When we have our local library ready we can connect it to the necessary widgets.
ko: 여기서는 위젯을 적소에 배치할 때 활용할 그리드를 만들겠습니다. 모든 단추, 레이블, 항목을 초기화 하고 그리드에 배치합니다. 각기 다른 위젯의 배치에서 보셨듯이 하나의 위젯에만 관계있는건 아닙니다. 여기서는 일부 레이블에는 어떤 내용도 들어가지 않습니다. 이 위젯의 내용은 나중에 반영합니다. 프로그램을 이 단계에서 실행하면, UI를 준비한 상태이지만, 위젯은 그 어떤 요소와도 연결한 상태가 아닙니다. 여기서 날씨 검색 자체 라이브러리를 우선 만들고, 필요한 정보를 비동기 방식으로 가져와야합니다. 자체 라이브러리를 준비하고 나면 필요한 위젯에 연결할 수 있습니다.

note: (itstool) path: section/title
en: Requesting the weather information asynchronously
ko: 비동기 방식으로 날씨 정보 요청

note: (itstool) path: section/p
en: This function is dedicated for calling for the weather information and updating labels and icons accordingly. In the beginning of the function we get the user input for the search. So here for the first time we use our own library and assign it to variable GeoNames. While assigning WeatherService we give it the station. The firs thing we do with GeoNames is to request weather. Everything after GeoNames.getWeather(function(error, weather) happens only if we either get an error message or weather information. If either doesn't come, the rest of the program works as normal, so main_Quit works.
ko: 이 함수는 날씨 정보를 호출하고 레이블과 아이콘을 즉시 업데이트하는 과정에 관여합니다. 함수 시작 부분을 보면 검색에 필요한 사용자 입력을 가져옵니다. 따라서 여기서는 처음에 자체 라이브러리랄 활용하고 GeoNames 변수에 할당하겠습니다. WeatherService를 할당하는 동안 기상대에 요청을 줍니다. GeoNames에 할 일은 날씨 정보 요청입니다. GeoNames.getWeather(function(error,weather))를 호출하고 난 다음 일은 오류 메시지를 받거나 날씨 정보를 받는 일만 있을 뿐입니다. 두가지 경우가 모두 아닌 경우 프로그앰이 할 일은 그냥 평범하게 있을 때 와 동일하므로 main_Quit를 동작합니다.

note: (itstool) path: section/title
en: Connecting signals to button and entry.
ko: 단추와 항목에 시그널 연결.

note: (itstool) path: section/p
en: And finally we have the connections that make the whole application run as it should. We connect both the entry and the button to do the same thing, getting the weather. So it doesn't matter weather you press enter of click the search button.
ko: 그리고 마지막으로 전체 프로그램이 돌아가도록 돌아가도록 연결하겠습니다. 항목과 단추를 동일한 방식으로 연결하여 날씨 정보를 가져오겠습니다. 따라서 엔터키를 누르든 검색 단추를 누르든 상관 없이 동작합니다.

note: (itstool) path: section/p
en: Weatherapp.js file looks like this:
ko: Weatherapp.js 파일의 내용은 다음과 같습니다:

note: (itstool) path: section/p
en: Running until you have all the autotools files ready. :
ko: 모든 autotool 파일을 준비하기 전까지 실행합니다:

note: (itstool) path: section/p
en: Use this command on terminal while developing your modules. When calling your program in this manner it knows where to find your custom JSlibraries, in this case geonames.js.
ko: 모듈을 개발하는 동안에는 터미널에서 이 명령을 사용하십시오. 프로그램을 이 방식으로 호출할 때, 프로그램에서 개별 JS 라이브러리 위치를 파악합니다. 이 경우는 geonames.js 입니다.

note: (itstool) path: page/title
en: Autotools and Icons
ko: Autotool과 아이콘

note: (itstool) path: synopsis/p
en: In this part of the guide well construct the autotools and custom icons needed for weather application to be a seamless part of your desktop. To write and run all the code examples yourself, you need an editor to write code in, Terminal and GNOME 3 or higher installed into your computer. In this guide we we'll go through the following parts:
ko: 안내서의 이 부분에서는 날씨 프로그램에서 필요한 autotool와 데스크톱에서 감쪽같이 보일 개별아이콘을 구성하도록 하겠습니다. 여러분 스스로가 모든 코드 예제를 작성하고 실행할 때는 코드를 작성할 편집기, 터미널, 그놈 3 이상을 컴퓨터에 설치해야 합니다. 이 안내서에서는 다음 내용을 진행하겠습니다:

note: (itstool) path: item/p
en: <link xref="#icons">Custom icons for your application</link>
ko: <link xref="#icons">프로그램에 넣을 개별 아이콘</link>

note: (itstool) path: section/title
en: Autotools and necessary files
ko: Autotools와 필요한 파일

note: (itstool) path: section/p
en: Having more than one file in your folder makes using autotools a bit tricky. You need the .desktop file, autogen.sh, Makefile.am, configure.ac and as a new file: myapp.sh.in file. Hacking the autotools file is a complicated field. More information can be found in many different sources, <link href="http://en.wikipedia.org/wiki/GNU_build_system">the Wikipedia article</link> provides a good overview on the subject.
ko: autotools로 폴더에 여러 파일을 넣는건 조금 어렵습니다. .desktop 파일, autogen.sh, Makefile.am, configure.ac, 새 myapp.sh.in 파일이 필요합니다. autotool 파일을 뜯어보는건 좀 복잡한 부분입니다. 자세한 내용은 여러 곳에서 찾아볼 수 있는데, <link href="http://en.wikipedia.org/wiki/GNU_build_system">위키피디아 글</link>이 내용을 살펴보기에 좋습니다.

note: (itstool) path: section/p
en: The thing to notice in this file is that the Exec line will make this .desktop file work only after running all the other makefiles. Weatherapp.sh is a small shell script created with the weatherapp.sh.in.
ko: 이 파일에서 주목해 볼 부분은, 다른 makefile을 실행한 다음에야 .desktop 파일을 동작하게 하는 Exec 줄 부분입니다. Weatherapp.sh는 weatherapp.sh.in에서 만든 작은 쉘 스크립트입니다.

note: (itstool) path: section/p
en: This file is a template to the file Makefile will do to be run from .desktop.
ko: 이 파일은 Makefile 파일을 통해 .desktop 파일로 실행하도록 하는 서식입니다.

note: (itstool) path: section/p
en: This needs a bit more explaining. Compared to the HelloWorld Makefile.am this has changed quite a bit. Lets go through all the new blocks:
ko: 더 많은 설명이 필요합니다. HelloWorld Makefile.am과 비교하여 약간 바뀌었을 뿐입니다. 새 블록 부분을 살펴보겠습니다:

note: (itstool) path: section/p
en: bin_scripts are the files that are needed to run your application. In thin case they are the first two files are the program itself and the third is the script that launches the application.
ko: bin_scripts는 프로그램을 실행하는데 필요한 파일입니다. 이 경우 처음 두 파일은 프로그램 그 자체이며, 세번째는 프로그램을 실행하는 스크립트입니다.

note: (itstool) path: section/p
en: EXTRA_DIST are the files that are to be distributed
ko: EXTRA_DIST는 배포할 파일 목록입니다

note: (itstool) path: section/p
en: do_subst block is bits and pieces that need to be where they are
ko: du_subst 블록은 각 파일이 각각 어디에 있어야 하는지 나타내는 부분입니다

note: (itstool) path: section/p
en: after the comment #icons in the application there are all the icons that are used by the program. For them to be useful you need to install the icons in correct places and that is done by the install-icons: bit
ko: #icons in the application 주석 다음에는 프로그램에서 활용할 아이콘이 있습니다. 이 항목을 쓸 수 있으려면 아이콘을 올바른 위치에 설치해야 하는데, 이 과정은 install-icons: 부분에서 처리할 수 있습니다

note: (itstool) path: section/title
en: Custom icons for your application
ko: 프로그램 개별 아이콘

note: (itstool) path: section/p
en: When thinking about custom icons a good rule of thumb is: do you expect to see that icon used elsewhere or is it private to your app? If the first (e.g. the icons in the desktop file that are shown by the shell) then you need /usr/share/hicolor, otherwise (e.g. the weather icons of your app) /usr/share/$application/bla/bla
ko: 개별 아이콘에 대해 생각할 때 경험상 최고의 방법은 아이콘을 다른 곳에서도 쓸 지, 앱 그 자체로만 한정할 것인지에 대한 고려입니다. 전자라면(쉘에서 나타나는 desktop 파일의 아이콘) /usr/share/hicolor에 넣어야 하고, 그렇지 않으면(여러분 혼자 쓰는 앱의 날씨 아이콘) /usr/share/$application/bla/bla 같은 곳에 넣으면 됩니다

note: (itstool) path: section/p
en: Using autotools you have to make some changes to your .desktop and Makefile.am files. In the desktop file you change the Icon's name Icon=weather-icon. In the Makefile.am file you add these two lines to the end of your application #the application icon
ko: autotools를 활용하면 .desktop 파일과 Makefile.am 파일을 약간 바꿔야합니다. desktop 파일에는 Icon=weather-icon으로 아이콘 이름을 바꿔주십시오. Makefile.am 파일에는 #the application icon을 적고 그 아래에 다음 두 줄을 넣으십시오

note: (itstool) path: page/title
en: Local library geoNames
ko: 로컬 라이브러리 geoName

note: (itstool) path: synopsis/p
en: In this part of the guide we'll construct the local library geoNames using asynchronous calls. Weather information in this example is fetched from geonames.org and the application is using the <link href="http://en.wikipedia.org/wiki/List_of_airports_by_ICAO_code:_E">ICAO codes </link> to place your weather request. To write and run all the code examples yourself, you need an editor to write code in, Terminal and GNOME 3 or higher installed into your computer. In this guide we'll go through the following parts:
ko: 안내서의 이 부분에서는 비동기 호출을 활용하여 로컬 라이브러리 geoNames를 만듭니다. 이 예제의 날씨 정보는 geonames.org에서 가져오며, 프로그램에서 날씨 정보를 요청할 때 <link href="http://en.wikipedia.org/wiki/List_of_airports_by_ICAO_code:_E">ICAO codes</link>를 활용합니다. 모든 코드 예제를 여러분 스스로 작성하고 실행하라면 코드를 작성해넣을 편집기, 터미널, 그놈 3 이상을 컴퓨터에 설치해야 합니다. 이 안내서에서는 다음 내용을 진행합니다:

note: (itstool) path: item/p
en: <link xref="#geonamesimports">Local library for getting the weather</link>
ko: <link xref="#geonamesimports">날씨 정보를 가져올 자체 라이브러리</link>

note: (itstool) path: item/p
en: <link xref="#geonamesfunction">Creating function geoNames</link>
ko: <link xref="#geonamesfunction">geoNames용 함수 만들기</link>

note: (itstool) path: item/p
en: <link xref="#geonamesmethods">Methods for geoNames</link>
ko: <link xref="#geonamesmethods">geoNames용 메서드</link>

note: (itstool) path: section/title
en: Local library for getting the weather
ko: 날씨 정보를 가져오는 자체 라이브러리

note: (itstool) path: section/p
en: For this we need a new file that will be our local library.
ko: 이 동작을 처리할 때 로컬 라이브러리로 쓸 새 파일이 필요합니다.

note: (itstool) path: section/p
en: In the first lines we'll import and initialize the libraries we need to use in this local library. Soup handles all the requests we have to make with http.
ko: 첫번째 줄에는 로컬 라이브러리에서 필요한 라이브러리를 가져오고 초기화 합니다. Soup는 모든 http 요청을 처리합니다.

note: (itstool) path: section/title
en: Creating function GeoNames
ko: GeoNames 함수 만들기

note: (itstool) path: section/p
en: Here we create the function GeoNames that will handle getting weather for us. JavaScript allows us to create functions that have little inside at first and later expand them. This will be done inside the GeoNames.prototype curly braces{}
ko: 날씨를 가져올 때 처리할 GeoNames 함수를 만들었습니다. JavaScript에서는 일단 안에 넣고 나중에 확장할 함수를 만들 수 있습니다. GeoNames.prototyle 중괄호 안에 넣으면 됩니다.

note: (itstool) path: section/title
en: Methods for GeoNames
ko: GeoNames용 메서드

note: (itstool) path: section/p
en: The first method for GeoNames is getWeather and the second getIcon. In getWeather we make a http request with soup, handle errors and then parse the information from the request to form we can use it. In getIcon we simply compare the results we got from getWeather to the switch we have in order to get the icon matching current weather. Now that we have our local library ready, it's time to make use of it.
ko: GeoNames의 첫 메서드는 getWeather와 getIcon입니다. getWeather에서 Soup로 http 요청, 오류를 처리하며, 요청의 응답으로 온 정보를 우리가 사용할 수 있는 모양새로 해석합니다. getIcon에서는 getWeather에서 가져온 결과를 비교하여 현재 날씨와 일치하는 아이콘 결과를 가져옵니다. 이제 준비한 로컬 라이브러리가 있으니 쓸 수 있게 만들 시간입니다.

note: (itstool) path: section/p
en: Here is the entire code for our local library. The main program file calls this asynchronously.
ko: 로컬 라이브러리 전체 코드입니다. 주 프로그램 파일에서는 비동기 방식으로 호출합니다.

note: (itstool) path: info/desc
en: A widget that uses the Cairo library to draw
ko: 카이로 라이브러리를 그리기 용도로 활용하는 위젯

note: (itstool) path: page/p
en: Enter an angle, visualize it.
ko: 각도를 입력하면 그림으로 나타냅니다.

note: (itstool) path: item/p
en: <link href="http://www.tortall.net/mu/wiki/CairoTutorial">The Cairo Tutorial for Python Programmers</link>
ko: <link href="http://www.tortall.net/mu/wiki/CairoTutorial">파이썬 프로그래머용 카이로 지침서</link>

note: (itstool) path: info/desc
en: A toplevel window which can contain other widgets
ko: 다른 위젯을 넣을 수 있는 최상위 창

note: (itstool) path: page/p
en: A minimal GtkApplication. Use <link xref="GtkApplicationWindow.c">Application Window</link> if you need GMenu support.
ko: 소형 GtkApplication입니다. GMenu 지원 기능이 필요하면 <link xref="GtkApplicationWindow.c">ApplicationWindow</link>를 사용하세요.

note: (itstool) path: info/desc
en: A basic window which can contain other widgets
ko: 다른 위젯을 넣을 수 있는 기본 창

note: (itstool) path: td/p
en: A minimal GtkApplication
ko: 소형 GtkApplication

note: (itstool) path: td/p
en: Use <link xref="GtkApplicationWindow.js">ApplicationWindow</link> if you need GMenu support.
ko: GMenu 지원 기능이 필요하면 <link xref="GtkApplicationWindow.js">ApplicationWindow</link>를 사용하세요.

note: (itstool) path: page/p
en: In this example we used the following:
ko: 이 예제에서 다음 구성 요소를 사용합니다:

note: (itstool) path: td/p
en: A minimal GTK+ Application: a window with a title.
ko: 작은 GTK+ 프로그램: 제목이 들어간 창.

note: (itstool) path: td/p
en: Use <link xref="GtkApplicationWindow.py"/> if you need <link xref="gmenu.py"/> support.
ko: <link xref="gmenu.py"/> 지원 기능이 필요하면 <link xref="GtkApplicationWindow.py"/>를 사용하세요.

note: (itstool) path: section/title
en: Useful methods for a Window widget
ko: Window 위젯에 쓸만한 메서드

note: (itstool) path: td/p
en: The simplest Gtk.Application
ko: 간단한 Gtk.Application

note: (itstool) path: td/p
en: Use <link xref="GtkApplicationWindow.vala">Application Window</link> if you need GMenu support.
ko: GMenu 지원 기능이 필요하면 <link xref="GtkApplicationWindow.vala">ApplicationWindow</link>를 사용하세요.

note: (itstool) path: item/p
en: The widget <link href="http://www.valadoc.org/gtk+-3.0/Gtk.Window.html">Gtk.Window</link>
ko: <link href="http://www.valadoc.org/gtk+-3.0/Gtk.Window.html">Gtk.Window</link> 위젯

note: (itstool) path: item/p
en: The enum <link href="http://www.valadoc.org/gtk+-3.0/Gtk.WindowPosition.html">Gtk.WindowPosition</link>
ko: <link href="http://www.valadoc.org/gtk+-3.0/Gtk.WindowPosition.html">Gtk.WindowPosition</link> 서수형

note: (itstool) path: item/p
en: The method <link href="http://www.valadoc.org/gtk+-3.0/Gtk.Window.set_default_size.html">set_default_size</link>
ko: <link href="http://www.valadoc.org/gtk+-3.0/Gtk.Window.set_default_size.html">set_default_size</link> 메서드

note: (itstool) path: info/desc
en: Tutorial for writing a custom <code>GSource</code> implementation
ko: 개별 <code>GSource</code> 구현체 작성 지침서

note: (itstool) path: page/title
en: Custom GSources
ko: 개별 GSource

note: (itstool) path: synopsis/title
en: Summary
ko: 요약

note: (itstool) path: synopsis/p
en: This article is a tutorial on creating a custom <code>GSource</code>. For the reference documentation, see the <link href="https://developer.gnome.org/glib/stable/glib-The-Main-Event-Loop.html#GSource">GLib API reference</link>.
ko: 이 글은 개별 <code>GSource</code>를 만드는 지침 내용을 담고 있습니다. 참고 문서를 찾아보려면 <link href="https://developer.gnome.org/glib/stable/glib-The-Main-Event-Loop.html#GSource">GLib API 참고서</link>를 살펴보십시오.

note: (itstool) path: section/title
en: What is <code>GSource</code>?
ko: <code>GSource</code>가 뭐죠?

note: (itstool) path: section/p
en: A <link href="https://developer.gnome.org/glib/stable/glib-The-Main-Event-Loop.html#GSource"><code>GSource</code></link> is an expected event with an associated callback function which will be invoked when that event is received. An event could be a timeout or data being received on a socket, for example.
ko: <link href="https://developer.gnome.org/glib/stable/glib-The-Main-Event-Loop.html#GSource"><code>GSource</code></link>는 이벤트를 받았을때 실행할 콜백 함수와 관계있는 기대 이벤트입니다.  예를 들어 이벤트는 시간 초과 상황 또는 소켓을 통해 데이터를 받았을 때가 될 수 있습니다.

note: (itstool) path: section/p
en: GLib contains various types of <code>GSource</code>, but also allows applications to define their own, allowing custom events to be integrated into the main loop.
ko: GLib에는 다양한 <code>GSource</code>가 있지만, 메인 루프에 통합할 개별 이벤트를 허용하여 프로그램 자체에서의 <code>GSource</code> 정의를 허용합니다.

note: (itstool) path: section/p
en: The structure of a <code>GSource</code> and its virtual functions are documented in detail in the <link href="https://developer.gnome.org/glib/stable/glib-The-Main-Event-Loop.html#GSourceFuncs">GLib API reference</link>.
ko: <code>GSource</code> 구조와 가상 함수에 대한 자세한 문서는 <link href="https://developer.gnome.org/glib/stable/glib-The-Main-Event-Loop.html#GSourceFuncs">GLib API 참고서</link>에 있습니다.

note: (itstool) path: section/title
en: A Message Queue Source
ko: 메시지 큐 소스

note: (itstool) path: section/p
en: As a running example, a message queue source will be used which dispatches its callback whenever a message is enqueued to a queue internal to the source (potentially from another thread).
ko: 실행 예제와 같이, 소스 내부 큐에 메시지를 쌓아둘 때마다 (잠재적으로 다른 스레드에서) 콜백을 실행할 때 메시지 큐 소스를 사용합니다.

note: (itstool) path: section/p
en: This type of source is useful for efficiently transferring large numbers of messages between main contexts. The alternative is transferring each message as a separate idle <code>GSource</code> using <code>g_source_attach()</code>. For large numbers of messages, this means a lot of allocations and frees of <code>GSource</code>s.
ko: 이 소스 형식은 메인 컨텍스트간 상당한 양의 메시지를 효율적으로 주고 받을때 쓸만합니다. 대신, <code>g_source_attach()</code> 함수를 활용하여 각 메시지를 개별 대기 <code>GSource</code> 로 보내는 방법이 있습니다. 수많은 메시지에 대해 <code>GSource</code>에 대해 메모리를 할당하고 해제함을 의미합니다.

note: (itstool) path: section/title
en: Structure
ko: 구조체

note: (itstool) path: section/p
en: Firstly, a structure for the source needs to be declared. This must contain a <code>GSource</code> as its parent, followed by the private fields for the source: the queue and a function to call to free each message once finished with.
ko: 우선 source 구조를 선언해야합니다. <code>GSource</code>를 상위 구조로 넣어야하며 그 다음 source 자체 필드를 넣습니다. 큐와 각 메시지를 처리하고 나서 메모리 할당을 해제할 함수가 이에 해당합니다.

note: (itstool) path: section/title
en: Prepare Function
ko: 준비 함수

note: (itstool) path: section/p
en: Next, the prepare function for the source must be defined. This determines whether the source is ready to be dispatched. As this source is using an in-memory queue, this can be determined by checking the queue’s length: if there are elements in the queue, the source can be dispatched to handle them.
ko: 그 다음, source의 준비 함수를 정의해야합니다. source를 처리할 준비가 됐는지 여부를 결정합니다. source가 인메모리 큐를 사용하기 때문에 큐 길이를 검사하여 결정할 수 있습니다. 큐에 구성요소를 넣어두었다면 source에서 해당 구성 요소를 처리할 수 있습니다.

note: (itstool) path: section/title
en: Check Function
ko: 점검 함수

note: (itstool) path: section/p
en: As this source has no file descriptors, the prepare and check functions essentially have the same job, so a check function is not needed. Setting the field to <code>NULL</code> in <code>GSourceFuncs</code> bypasses the check function for this source type.
ko: 이 소스에 파일 서술자가 없기에, 준비하고 검사하는 함수는 근본적으로 동일한 동작을 취합니다. 따라서 검사 함수가 필요하지 않습니다. <code>GSourceFuncs</code>에서 필드 값을 <code>NULL</code>로 설정하면 소스 형식에 대한 검사 함수 동작을 건너뜁니다.

note: (itstool) path: section/title
en: Dispatch Function
ko: 실행 함수

note: (itstool) path: section/p
en: For this source, the dispatch function is where the complexity lies. It needs to dequeue a message from the queue, then pass that message to the <code>GSource</code>’s callback function. No messages may be queued: even through the prepare function returned true, another source wrapping the same queue may have been dispatched in the mean time and taken the final message from the queue. Further, if no callback has been set for the <code>GSource</code> (which is allowed), the message must be destroyed and silently dropped.
ko: 이 source에 대해, 실행 함수는 복잡성이 존재하는 곳입니다. 큐에서 메시지를 빼낸 후 <code>GSource</code>의 콜백 함수에 메시지를 전달해야합니다. 큐에 메시지가 없을 수도 있습니다. 준비 함수에서 true를 반환한다 하더라도, 동일한 큐를 래핑하는 다른 source를 평균 시간내에 처리하며 큐에서 마지막 메시지를 취하기도 합니다. 게다가 <code>GSource</code>에 (허용한) 콜백을 설정하지 않으면, 메시지를 해체하고 버려야합니다.

note: (itstool) path: section/p
en: If both a message and callback are set, the callback can be invoked on the message and its return value propagated as the return value of the dispatch function. This is <code>FALSE</code> to destroy the <code>GSource</code> and <code>TRUE</code> to keep it alive, just as for <code>GSourceFunc</code> — these semantics are the same for all dispatch function implementations.
ko: 메시지와 콜백을 설정하면 콜백에서 메시지를 처리하고, 실행 함수의 반환 값으로 반환 값을 전달합니다. <code>GSource</code>가 해체되면 <code>FALSE</code>, <code>GSourceFunc</code>에 대해 계속 남아있으면 <code>TRUE</code>입니다. 이런 식의 의미는 모든 실행 함수 구현에 동일하게 적용합니다.

note: (itstool) path: section/title
en: Callback Functions
ko: 콜백 함수

note: (itstool) path: section/p
en: The callback from a <code>GSource</code> does not have to have type <code>GSourceFunc</code>. It can be whatever function type is called in the source’s dispatch function, as long as that type is sufficiently documented.
ko: <code>GSource</code> 콜백은 <code>GSourceFunc</code> 형식일 필요는 없습니다. 이 형식에 대해 충분히 문서로 남겨둔 만큼 source의 실행 함수에서 불리는 어떤 함수 형식이든 될 수 있습니다.

note: (itstool) path: section/p
en: Normally, <code>g_source_set_callback()</code> is used to set the callback function for a source instance. With its <code>GDestroyNotify</code>, a strong reference can be held to keep an object alive while the source is still alive:
ko: 보통, 소스 인스턴스에서 콜백 함수를 설정할 때 <code>g_source_set_callback()</code> 함수를 사용합니다. <code>GDestroyNotify</code>를 함께 사용하면, 소스가 계속 살아있는 동안 객체의 강 참조를 유지할 수 있습니다:

note: (itstool) path: section/p
en: However, <code>GSource</code> has a layer of indirection for retrieving this callback, exposed as <code>g_source_set_callback_indirect()</code>. This allows GObject to set a <code>GClosure</code> as the callback for a source, which allows for sources which are automatically destroyed when an object is finalized — a <em>weak</em> reference, in contrast to the <em>strong</em> reference above:
ko: 그러나, <code>GSource</code>는 <code>g_source_set_callback_indirect()</code>로 노출하여 콜백을 전달하는 간접 계층입니다. GObject는 객체 사용을 마감했을 때 소스에서 자동으로 해제하는 소스에 <code>GClosure</code>를 콜백으로 설정할 수 있게 합니다  — 위의 <em>강</em> 참조에 대비되는 <em>약</em>참조는 다음과 같습니다:

note: (itstool) path: section/p
en: It also allows for a generic, closure-based ‘dummy’ callback, which can be used when a source needs to exist but no action needs to be performed in its callback:
ko: 소스에서는 콜백이 필요하지만 콜백에서 동작이 필요하지 않은 경우 사용할 수 있는 일반 클로저 기반 'dummy' 콜백을 허용합니다:

note: (itstool) path: section/title
en: Constructor
ko: 생성자

note: (itstool) path: section/p
en: Finally, the <code>GSourceFuncs</code> definition of the <code>GSource</code> can be written, alongside a construction function. It is typical practice to expose new source types simply as <code>GSource</code>s, not as the subtype structure; so the constructor returns a <code>GSource*</code>.
ko: 마지막으로 <code>GSource</code>의 <code>GSourceFuncs</code> 정의를 생성자 함수에 작성할 수 있습니다. 보통 하위 형식 구조로서가 아닌 <code>GSource</code>로서 새 source 형식을 노출하는 전형적인 사례입니다. 이렇게 하여 생성자에서 <code>GSource*</code>를 반환합니다.

note: (itstool) path: section/p
en: The example constructor here also demonstrates use of a child source to support cancellation conveniently. If the <code>GCancellable</code> is cancelled, the application’s callback will be dispatched and can check for cancellation. (The application code will need to make a pointer to the <code>GCancellable</code> available to its callback, as a field of the callback’s user data set in <code>g_source_set_callback()</code>).
ko: 여기 예제 생성자에서는 편하게 취소하는 방식을 지원하는 하위 source 활용법을 예를 들어 보여줍니다. <code>GCancellable</code>를 취소처리하면, 프로그램의 콜백 함수를 실행하여 취소 여부를확인할 수 있습니다(프로그램 코드에서는 <code>g_source_set_callback()</code> 함수의 콜백 사용자 데이터 세트로, 콜백 함수에 <code>GCancellable</code> 에 접근할 수 있는 포인터를 만들어아합니다.)

note: (itstool) path: section/title
en: Complete Example
ko: 완전한 예제

note: (itstool) path: listing/title
en: Complete Example Code
ko: 완전한 예제 코드

note: (itstool) path: section/title
en: Further Examples
ko: 더 많은 예제

note: (itstool) path: section/p
en: Sources can be more complex than the example given above. In <link href="http://nice.freedesktop.org/">libnice</link>, a custom <code>GSource</code> is needed to poll a set of sockets which changes dynamically. The implementation is given as <code>ComponentSource</code> in <link href="http://cgit.freedesktop.org/libnice/libnice/tree/agent/component.c#n941">component.c</link> and demonstrates a more complex use of the prepare function.
ko: 위에 보여드린 예제보다 소스가 더 복잡할 수 있습니다. <link href="http://nice.freedesktop.org/">libnice</link>에서 자체 정의한 <code>GSource</code>는 동적으로 바뀌는 소켓 세트를 폴링 처리해야 합니다. 구현체는 <link href="http://cgit.freedesktop.org/libnice/libnice/tree/agent/component.c#n941">component.c</link>의 <code>ComponentSource</code>를 들 수 있으며, 준비 함수보다 더욱 복잡한 활용의 예를 보여줍니다.

note: (itstool) path: section/p
en: Another example is a custom source to interface GnuTLS with GLib in its <code>GTlsConnection</code> implementation. <link href="https://git.gnome.org/browse/glib-networking/tree/tls/gnutls/gtlsconnection-gnutls.c#n871"><code>GTlsConnectionGnutlsSource</code></link> synchronizes the main thread and a TLS worker thread which performs the blocking TLS operations.
ko: 다른 예제로는 GLib의 <code>GTlsConnection</code> 구현체에서 GLib용 GnuTLS 인터페이스를 제공하는 부분입니다. <link href="https://git.gnome.org/browse/glib-networking/tree/tls/gnutls/gtlsconnection-gnutls.c#n871"><code>GTlsConnectionGnutlsSource</code></link>는 메인 스레드와 TLS 처리 블로킹을 수행하는 TLS 워커 스레드를 동기화합니다.
