예전에 제가 일본어 공부 할 때 엑셀에 단어장을 만들고, 암기 테스트를 쉽게 하도록 도와주는 프로그램을 작성했었는데요.
(프로젝트는 윈도우 호환을 위해 닷넷 버전을 4.5.2로 하였습니다.)
기왕 만드는김에 이번엔 다른 디자인을 적용해 볼까요?
도구 - 너겟 패키지 관리 - 솔루션용 너겟 패키지 관리로 들어가서
윈도우8부터 큰 호평을 받았던 메트로 타일 스타일을 제공하는 MetroModernUI를 받았습니다.
단어연습기를 작성할 프로젝트에 적용 동의를 하면
갓 비주얼 스튜디오께서 환경을 알아서 잡아주십니다.
참조에 메트로 UI 테마 관련 dll들이 세팅되어 있습니다.
수동으로 설정할 경우 위 dll들을 다운받아 참조 설정과 도구 세팅만 해주시면 바로 사용이 가능합니다.
저번 단어연습기는 윈도우 7에서 안되는 경우가 있었지만 이번엔 XP까지 호환 되도록 4.5.2로 세팅하였습니다. ^^
이제 본격적으로 코딩 시작이네요.
우선 메트로프레임워크 참조를 달고
윈폼을 메트로폼으로 바꿔주면
짜잔~
메트로폼은 스타일 속성에 타일 색상을 바꿀 수 있습니다.
이쁜 색상을 선택해서 실행해보면
기본 윈폼보단 훨씬 이쁘죠? ^^
(메트로UI용 도구들도 많습니다)
일단 기능 구현에 앞서 구도부터 잡아 볼까요?
이번 프로그램은 창 크기 조절이 많을 예정이라 컨트롤 위치와 크기 조절에 신경을 써야 하는데요. 저는 기능별로 층을 나눠 배치를 할 생각입니다.
위에서부터 각각의 판넬들은 대략 이런 컨트롤들이 들어갈 예정이죠.
그 중 단어 출력 부분을 담당할 판넬만 세로로 크기가 변경 가능하도록 설정 하였습니다.
이제 구도를 잡았으니 메트로UI를 활용해 컨트롤도 배치하면
짜잔~
확실히 기본 컨트롤들 보단 훨씬 이쁘네요. ^^
컨트롤들도 판넬과 마찬가지로 창 크기 변경에 따라 포지션이 달라지니 정렬 기준을 잘 잡아야 합니다.
정렬 기준을 잘 잡으면
이렇게 창 크기가 변경되도 비율에 맞게 컨트롤들이 잘 붙어 있게 되죠 ㅎㅎ
이제 단어연습기의 가장 핵심이 될 단어를 보여줄 레이블들의 위치를 잘 조절하고
테두리를 만든 다음
창 크기 변경 이벤트에 컨트롤들의 크기를 조절 해줄 로직과, 레이블의 글자 크기를 자동으로 맞출 로직을 작성하면
이제 창 크기 변경에 따라 버튼 크기와 단어 표시를 해주는 레이블, 글자 크기가 자동으로 바뀌며 맞춰집니다. ^ㅡ^
디자인을 완료하면
컨트롤들의 이벤트들을 하나씩 만들어 가고
단어장인 엑셀 파일을 읽기 위해 관련 dll을
참조하여
코드를 작성했는데...
작동은 잘 되었지만 테스트 과정에서
엑셀이나 오피스가 설치되지 않는 환경에서는 작동중 에러가 발생하더라구요... ㅠㅠ
그래서 엑셀을 로딩하는 부분을 위해
EPPlus를 설치하였습니다.
저도 이번에 처음 사용해봤는데 실행 환경에 오피스 설치 여부에 영향 받지 않고, 참조를 억지로 로딩할 필요도, xml을 이용한 별도의 로딩 과정도 필요없는 정말 좋은 패키지더라구요. ^^
코드 작성을 마친 뒤 배포를 위해
인스톨러 프로젝트를 만들었고
빌드 후 설치 파일도 완성!
설치 파일과 단어장, 설명서 모아 압축된 파일은 여기서 다운 받을 수 있습니다.
(새 버전 단어학습기, 단어장 다운로드 링크 = 다운로드)
제가 만든거라서 제 구글 드라이브 링크이며 다른 광고나 바이러스는 없습니다. ^^
파일을 받으셨으면 압축을 푸시고 설치 파일인 KanaApp1.msi을 실행하시면
요렇게 설치 마법사가 뜹니다.
설치를 원하시는 위치와 권한을 선택하고 다음으로 넘어가면
파일 배치만 하는 수준이라서 설치 시간은 매우 짧을꺼에요 ㅎㅎ
설치가 완료되면 바탕화면에
요렇게 단어연습기 바로가기 아이콘도 생성됩니다.
이걸 실행하면 단어연습기가 실행됩니다.
삭제하고 싶으시면 제어판 - 프로그램 삭제로 들어가서 단어연습기를 선택하시면
그리고 마지막으로 엑셀이 설치되지 않은 환경에서 실행을 해봤는 결과
이 프로그램을 블로그에 소스 코드와 함께 배포했었습니다.
(해당 포스트로 이동하기 - 엑셀 데이터를 이용한 단어 연습기 만들기)
그런데 이 학습기는 처음에 제가 학습할 용도로 만들었던 거라 별다른 기능이 없었으며, 다른 환경에서의 호환성도 문제가 있었습니다.
해당 포스트를 봐주시고 연습기를 이용해주신 독자분들의 피드백을 통해 프로그램의 수정이 필요하다 생각되어 이번 포스트를 작성하게 되었습니다.
전편의 단어 학습기는 엑셀 파일에 저장된 단어를 읽어와서 랜덤으로 제출하는 기능만 있었는데요.
(엑셀 파일에 있는 단어들을)
(랜덤하게 제출되는 단어를 보고 암기 학습)
랜덤으로 표시되는 단어의 뜻과 읽는법을 맞추고 다음 단어로 넘어가는 방식이었으며, 학습한 단어의 갯수나 정답률을 표시하는 기능이 있었습니다.
여기에
한자가 나오는 부분의 글자 크기를 조절하는 기능과 표시될 단어의 기준을 선택할 수 있는 기능
틀린 단어만을 모아 오답 노트 처럼 심화 과정을 진행 할 수 있는 기능
단어 출제 범위를 설정 할 수 있는 기능과 창 크기에 따른 비율 변경 기능들이 보강된 새로운 단어 연습기를 만들어 보겠습니다. ^^
그리고 기존의 실행 파일만 제공하는 방식에서 프로그램 설치 후 안정적인 환경에서 실행하는 방식으로 프로그램 배포 또한 다르게 하도록 하겠습니다.
코딩하기전 프로그램의 흐름을 간략히 나타내면
1. 사용자에게 단어장 위치 정보를 획득하고
2. 해당 위치의 단어장을 찾아 검사 후
3. 단어장의 데이터를 내부 메모리에 정리하고
4. 해당 메모리로 사용자에게 원하는 옵션에 맞춰 데이터 제공
크게 4단계의 로직이 있으며 프로그램 예상 레이아웃은
이전 단어장과 기본 골격은 동일하지만
단어 제출 기준을 정할 라디오버튼, 글자 크기와 범위를 입력받을 텍스트 박스가 상단에 들어가고, 오답 데이터 수집 여부를 확인할 토글 버튼과 학습기 상태를 바꿀 토글 버튼이 추가 됩니다.
그리고 글자 크기에 따라 한자 뿐만 아니라 순서와 뜻 부분까지 함께 적용되도록 하겠습니다.
마지막으로 단어학습기의 크기를 변경시킬 경우 순서, 한자, 뜻을 표시하는 이 세개의 텍스트 박스의 크기와 글자 크기만 변경되도록 할 계획입니다.
프로그램 작성하다보니 길이가 조금 길어져서 코드 공개와 설명을 합치면 너무 길어질꺼 같아 이번편에서는 대략적인 제작 과정만 올리고 코드 관련 내용은 이후 포스트로 올리겠습니다. ^^
(새 버전 단어연습기랑 단어장 다운로드 - 다운로드)
일단 단어연습기 프로그렘을 작성할 프로젝트를 생성하고
(새 버전 단어연습기랑 단어장 다운로드 - 다운로드)
일단 단어연습기 프로그렘을 작성할 프로젝트를 생성하고
(프로젝트는 윈도우 호환을 위해 닷넷 버전을 4.5.2로 하였습니다.)
기왕 만드는김에 이번엔 다른 디자인을 적용해 볼까요?
도구 - 너겟 패키지 관리 - 솔루션용 너겟 패키지 관리로 들어가서
윈도우8부터 큰 호평을 받았던 메트로 타일 스타일을 제공하는 MetroModernUI를 받았습니다.
단어연습기를 작성할 프로젝트에 적용 동의를 하면
갓 비주얼 스튜디오께서 환경을 알아서 잡아주십니다.
참조에 메트로 UI 테마 관련 dll들이 세팅되어 있습니다.
수동으로 설정할 경우 위 dll들을 다운받아 참조 설정과 도구 세팅만 해주시면 바로 사용이 가능합니다.
저번 단어연습기는 윈도우 7에서 안되는 경우가 있었지만 이번엔 XP까지 호환 되도록 4.5.2로 세팅하였습니다. ^^
이제 본격적으로 코딩 시작이네요.
우선 메트로프레임워크 참조를 달고
윈폼을 메트로폼으로 바꿔주면
짜잔~
메트로폼은 스타일 속성에 타일 색상을 바꿀 수 있습니다.
이쁜 색상을 선택해서 실행해보면
기본 윈폼보단 훨씬 이쁘죠? ^^
(메트로UI용 도구들도 많습니다)
일단 기능 구현에 앞서 구도부터 잡아 볼까요?
이번 프로그램은 창 크기 조절이 많을 예정이라 컨트롤 위치와 크기 조절에 신경을 써야 하는데요. 저는 기능별로 층을 나눠 배치를 할 생각입니다.
위에서부터 각각의 판넬들은 대략 이런 컨트롤들이 들어갈 예정이죠.
그 중 단어 출력 부분을 담당할 판넬만 세로로 크기가 변경 가능하도록 설정 하였습니다.
이제 구도를 잡았으니 메트로UI를 활용해 컨트롤도 배치하면
짜잔~
확실히 기본 컨트롤들 보단 훨씬 이쁘네요. ^^
컨트롤들도 판넬과 마찬가지로 창 크기 변경에 따라 포지션이 달라지니 정렬 기준을 잘 잡아야 합니다.
정렬 기준을 잘 잡으면
이렇게 창 크기가 변경되도 비율에 맞게 컨트롤들이 잘 붙어 있게 되죠 ㅎㅎ
이제 단어연습기의 가장 핵심이 될 단어를 보여줄 레이블들의 위치를 잘 조절하고
테두리를 만든 다음
창 크기 변경 이벤트에 컨트롤들의 크기를 조절 해줄 로직과, 레이블의 글자 크기를 자동으로 맞출 로직을 작성하면
이제 창 크기 변경에 따라 버튼 크기와 단어 표시를 해주는 레이블, 글자 크기가 자동으로 바뀌며 맞춰집니다. ^ㅡ^
디자인을 완료하면
컨트롤들의 이벤트들을 하나씩 만들어 가고
단어장인 엑셀 파일을 읽기 위해 관련 dll을
참조하여
코드를 작성했는데...
작동은 잘 되었지만 테스트 과정에서
엑셀이나 오피스가 설치되지 않는 환경에서는 작동중 에러가 발생하더라구요... ㅠㅠ
그래서 엑셀을 로딩하는 부분을 위해
EPPlus를 설치하였습니다.
저도 이번에 처음 사용해봤는데 실행 환경에 오피스 설치 여부에 영향 받지 않고, 참조를 억지로 로딩할 필요도, xml을 이용한 별도의 로딩 과정도 필요없는 정말 좋은 패키지더라구요. ^^
코드 작성을 마친 뒤 배포를 위해
인스톨러 프로젝트를 만들었고
빌드 후 설치 파일도 완성!
설치 파일과 단어장, 설명서 모아 압축된 파일은 여기서 다운 받을 수 있습니다.
(새 버전 단어학습기, 단어장 다운로드 링크 = 다운로드)
제가 만든거라서 제 구글 드라이브 링크이며 다른 광고나 바이러스는 없습니다. ^^
파일을 받으셨으면 압축을 푸시고 설치 파일인 KanaApp1.msi을 실행하시면
요렇게 설치 마법사가 뜹니다.
설치를 원하시는 위치와 권한을 선택하고 다음으로 넘어가면
파일 배치만 하는 수준이라서 설치 시간은 매우 짧을꺼에요 ㅎㅎ
설치가 완료되면 바탕화면에
요렇게 단어연습기 바로가기 아이콘도 생성됩니다.
이걸 실행하면 단어연습기가 실행됩니다.
삭제하고 싶으시면 제어판 - 프로그램 삭제로 들어가서 단어연습기를 선택하시면
요렇게 삭제 마법사가 뜨고
매우 간단히 삭제가 되어집니다.
단어연습기 사용방법은
유튜브에 올린 영상이 있습니다.
00:13 에 아래 텍스트 박스에 마우스 클릭을 한 다음 부터는 키보드로 왼쪽, 오른쪽, 아래 화살표 키를 누르면 각각의 버튼들이 자동으로 실행되도록 하였습니다.
00:20 에서는 오답체크를 체크했는데요 이때부터 모르는 단어들은 따로 저장되어 있다가
00:28 때 오답노트로 변경 하면 오답 체크로 저장되었던 단어들만 제출되도록 하였습니다.
00:37 부터는 다시 일반 모드로 돌아옵니다. 일반 모드에서는 언제든지 오답 체크를 통해 모르는 단어 저장이 가능해집니다.
01:10 부터는 한자 크기 설정 부분을 설명하고 있습니다. 단어들 크기는 기본적으로 창 크기를 따라가지면 이렇게 임의의 크기로 고정할 수도 있도록 하였습니다. ^^
매우 간단히 삭제가 되어집니다.
단어연습기 사용방법은
00:13 에 아래 텍스트 박스에 마우스 클릭을 한 다음 부터는 키보드로 왼쪽, 오른쪽, 아래 화살표 키를 누르면 각각의 버튼들이 자동으로 실행되도록 하였습니다.
00:20 에서는 오답체크를 체크했는데요 이때부터 모르는 단어들은 따로 저장되어 있다가
00:28 때 오답노트로 변경 하면 오답 체크로 저장되었던 단어들만 제출되도록 하였습니다.
00:37 부터는 다시 일반 모드로 돌아옵니다. 일반 모드에서는 언제든지 오답 체크를 통해 모르는 단어 저장이 가능해집니다.
01:10 부터는 한자 크기 설정 부분을 설명하고 있습니다. 단어들 크기는 기본적으로 창 크기를 따라가지면 이렇게 임의의 크기로 고정할 수도 있도록 하였습니다. ^^
그리고 마지막으로 엑셀이 설치되지 않은 환경에서 실행을 해봤는 결과
엑셀이 설치되지 않거나 윈도우 7 32bit 환경에서도 무사히 실행되는 걸 확인했습니다. ^^
늦었지만 기다리셨거나 의견을 주신 독자분께 정말 감사드립니다.
긴 글 봐주셔서 감사합니다!
늦었지만 기다리셨거나 의견을 주신 독자분께 정말 감사드립니다.
긴 글 봐주셔서 감사합니다!
