3.4.1 EH 응용 프로토 타이핑

EH 응용은 최종 사용자가 검색에 사용하는 윈도우즈 응용 프로그램입니다. 최종 사용자가 검색 질의를 입력할 수 있는 입력 창과 검색 요청을 요구하는 버튼이 필요합니다. 그리고 검색 결과를 보여주기 위한 컨트롤이 필요합니다.

검색 결과를 보여주는 컨트롤은 검색 결과가 여러 개 있을 수 있으므로 컬렉션 형태의 컨트롤로 만드는 것이 좋겠네요. 그리고 검색 결과는 페이지 제목과 주소와 내용, 점수 정보를 보여줄 수 있게 만듭시다.

앞에서도 얘기했듯이 프로토 타이핑에서는 구체적인 기능을 구현할 필요는 없습니다. 최종 사용자와 어떻게 상호 작용을 할 수 있는지 판단할 수 있는 수준으로 만듭니다.

먼저 작성할 예광탄의 모습을 먼저 소개한 후에 하나 하나 작성해 봅시다.

EH 예광탄을 실행하면 검색 질의를 입력하고 검색을 요청할 수 있는 버튼이 보입니다.

EH 예광탄 초기 화면
[그림 3.21] EH 예광탄 초기 화면

 그리고 검색 버튼을 눌렀을 때 검색 결과가 뜨고 여러 개의 검색을 스크롤하여 확인할 수 있고 특정 결과의 사이트로 갈 수 있는 바로가기 버튼이 보입니다. 예광탄 프로그램이기 때문에 검색 질의에 관계없이 같은 내용이 나오며 단순히 사용자와 상호작용을 어떻게 하는지 살펴보기 위함입니다.

EH 예광탄 검색 버튼 눌렀을 때 화면
[그림 3.22] EH 예광탄 검색 버튼 눌렀을 때 화면

 그리고 검색 결과의 바로가기 버튼을 눌렀을 때 해당 사이트 주소의 내용을 볼 수 있는 브라우저가 뜨게 합시다.

검색 결과의 바로가기 버튼을 눌렀을 때 화면
[그림 3.23] 검색 결과의 바로가기 버튼을 눌렀을 때 화면

먼저 Windows Forms 응용 프로그램 템플릿으로 EH 예광탄 프로젝트를 추가하세요. 솔루션 이름은 EH WSE라고 정할게요.

EH 예광탄 프로젝트 생성
[그림 3.24] EH 예광탄 프로젝트 생성

그리고 EH 예광탄에서 검색 결과를 표시할 컨트롤도 RankedUrlControlLibrary_PT 예광탄 이름으로 프로젝트를 추가합시다. 이 프로젝트는 Windows Forms 컨트롤 라이브러리 템플릿 형태로 추가하세요.

RankedUrlControl 라이브러리 예광탄 프로젝트 생성
[그림 3.25] RankedUrlControl 라이브러리 예광탄 프로젝트 생성

 RankedUrlControlLibrary_PT 프로젝트에 기본적으로 제공하는 사용자 정의 컨트롤은 삭제하세요. 그리고 두 개의 사용자 정의 컨트롤을 추가합니다. 하나는 검색 결과 하나의 정보를 보여주는 컨트롤이며 다른 하나는 이를 포함하는 컬렉션 형태의 컨트롤입니다.

여기에서 하나의 검색 결과를 보여주는 컨트롤의 이름은 RankedUrlControl이라 정하고 컬렉션 컨트롤의 이름은 RUListControl로 정할게요. 그리고 하나의 윈도우즈 폼을 추가하시고 EHWebBrowser라고 정합시다. 이 부분은 검색 결과의 웹 페이지를 보여주는 브라우저로 사용할 것입니다.

RankedUrlControl 추가
[그림 3.26] RankedUrlControl 추가

이제 RankedUrlControl에 자식 컨트롤을 배치합시다. 화면 배치할 때 도구 상자의 컨테이너 탭의 있는 컨트롤을 이용하면 보다 효과적으로 배치할 수 있습니다. 여기에서는 이 부분에 관한 설명은 생략할게요.

RankedUrlControl에는 페이지 제목을 위한 Label 컨트롤과 페이지 주소를 위한 Label 컨트롤, 바로가기 버튼, 내용을 표시할 Rich Text 컨트롤, 검색 결과의 점수를 표시할 Label 컨트롤을 배치합시다.

RankedUrlControl 컨트롤 배치
[그림 3.27] RankedUrlControl 컨트롤 배치
RankedUrlControl의 자식 컨트롤
[표 3.4] RankedUrlControl의 자식 컨트롤

바로가기 버튼의 클릭 이벤트 핸들러를 추가합니다.

private void btn_go_Click(object sender, EventArgs e)

바로가기 버튼을 클릭하면 EHWebBrowser 폼을 생성하고 Show 메서드를 호출합니다.

EHWebBrowser ewb = new EHWebBrowser(lb_addr.Text);
ewb.Show();

EHWebBrowser 폼에는 WebBrowser컨트롤을 하나 배치합니다. 여기에서는 컨트롤 이름을 ehwb라고 할게요.

입력 인자로 웹 사이트 주소를 입력 인자로 받게 하고 이를 멤버 필드에 설정합니다.

string url;
public EHWebBrowser(string url)
{
    InitializeComponent();
    this.url = url;
}

EHWebBrowser 폼의 Load 이벤트 핸들러를 추가하여 이벤트 발생 시 웹 사이트 주소로 이동하게 구현합니다.

private void EHWebBrowser_Load(object sender, EventArgs e)
{
    ehwb.Navigate(url);
}

RUListControl 컨트롤은 RankedUrlControl을 배치하는 컨테이너 컨트롤입니다. 자식 컨트롤이 여러 개 있을 때 스크롤이 가능하게 AutoScroll 속성을 True로 설정하세요.

RUListControl에 자식 결과를 기억하는 멤버 필드를 추가하세요.

int ruc_cnt;

그리고 검색 결과를 표시할 RankedUrlControl을 배치하는 메서드를 추가합시다. 이 메서드에서는 자식의 개수에 따라 추가하는 컨트롤의 Y 좌표를 계산하여 배치합니다.

/// <summary>
/// 검색 결과를 보여주는 RankedUrlControl을 추가하는 메서드
/// </summary>
/// <param name="ruc">추가할 컨트롤</param>
public void AddRankdedUrl(RankedUrlControl ruc)
{
    ruc.Location = new Point(0, ruc_cnt * 210 + 24);
    ruc.Height = 200;
    ruc.Width = this.Width-24;
    ruc.Parent = this;
    ruc_cnt++;
}

이제 RankedUrlControlLibrary_PT를 이용하여 EH 예광탄의 메인 폼에 자식 컨트롤을 배치합시다.

먼저 검색 질의를 입력하는 것을 명확히 하기 위한 Label 컨트롤과 검색 질의를 입력하는 TextBox 컨트롤과 검색 요청하는 Button 컨트롤과 검색 결과를 보여줄 RUListControl을 배치합니다.

EH 예광탄 메인 폼 컨트롤 배치
[그림 3.28] EH 예광탄 메인 폼 컨트롤 배치
EH 예광탄 메인 폼의 자식 컨트롤
[표 3.5] EH 예광탄 메인 폼의 자식 컨트롤

그리고 검색 버튼을 눌렀을 때 이벤트 핸들러를 추가합니다. 이벤트 핸들러에서는 검색 결과를 포함하는 RUListControl인 ruc_result에 검색 결과를 표시하는 사용자 정의 컨트롤인 RankedUrlControl을 생성하여 추가합니다. 여러 개의 검색 결과가 나오는 것처럼 여기에서는 5개의 검색 결과를 추가할게요.

private void btn_search_Click(object sender, EventArgs e)
{
    ruc_result.AddRankdedUrl(new RankedUrlControl());
    ruc_result.AddRankdedUrl(new RankedUrlControl());
    ruc_result.AddRankdedUrl(new RankedUrlControl());
    ruc_result.AddRankdedUrl(new RankedUrlControl());
    ruc_result.AddRankdedUrl(new RankedUrlControl());
}

이처럼 예광탄을 작성하면 이해 관계자에게 개발팀에서 분석한 요구 사항이 제대로 된 것인지 확인하기 쉬워집니다.

물론 예광탄으로 모든 요구 사항이 제대로 분석한 것인지 확인할 수 없지만 사용자와 상호작용하는 부분을 미리 살펴볼 수 있어 미래에 다시 수정해야 하는 비용을 줄일 수 있습니다.

웹 검색 엔진 만들기 [C#]