윈도우 앱 화면 설계

화면을 설계하기에 앞서 비슷한 기능을 하는 프로그램들의 화면이 어떻게 구성되어있는지를 확인해보는 과정을 갖도록 했다

Microsoft Store에 Croquis Player라는 무료 프로그램이 있는데 해당 프로그램은 다음과 같이 화면이 구성되어 있다

Croquis Player

왼쪽에 사진들을 선택할 수 있는 추가 버튼이 있고 오른쪽에 보여주는 시간과 휴식 시간이 있는 식이다

사진을 추가하고 시작버튼을 누르면 아래와 같이 전체화면으로 사진이 표시되며

ESC를 누르면 종료 스페이스 바를 누르면 일시정지가 된다

Croquis Player 실행화면

오른쪽 위에는 남은 보여주기 시간이 표시되며 이외에 다른 UI는 존재하지 않는다

처음 시작했을 때의 프로그램 창은 따로 종료되지 않으며 슬라이드 쇼 화면만 따로 전체화면으로 생성되어 동작한다

프로그램의 버그인지 기능이 없는지 다음 사진으로 넘어가는 동작은 존재하지 않는 듯 했다

 

일단은 이런 방식으로 초기 구성을 하고 추가적인 컨트롤 버튼 등을 추가할 생각이다

추가할 기능으로는 이전 이후 사진 이동, 사진 즐겨찾기, 사진 흑백 전환, Flag 혹은 Tag 설정 등이 있을 것 같다

 

우선 위의 Croquis Player 프로그램보다 간단하게 화면을 구성하고 하나씩 덧붙이는 방식으로 진행하려고 한다

 

첫 단계

- 메인 창은 왼쪽과 오른쪽으로 나눠진다

- 왼쪽에서는 사진 목록을 추가할 버튼을 만든다

- 그 아래에 사진 목록이 표시되도록 한다

- 오른쪽에는 시작 버튼을 만든다

 

다음 단계

- 사진 목록 추가 버튼을 눌렀을 때 파일 탐색기로 파일 추가를 할 수 있도록 한다

- 추가한 파일 이름이 아래 표시된다

 

다음 단계

- 추가한 파일이 사진으로 표시된다

 

다음 단계

- 시작 버튼을 눌렀을 때 새 창이 표시된다

- 새 창에서는 아무 사진이나 우선 표시한다

 

다음 단계

- 시작 버튼을 눌렀을 때 추가한 사진 중 첫 번째 사진이 표시된다

 

다음 단계

- 메인 창에서 보여주는 시간을 입력 받는 영역을 만든다

 

다음 단계

- 시작 버튼을 눌렀을 때 새 창에서 보여주는 시간이 지나면 다음 사진으로 전환된다

 

다음 단계

- 새 창에서 남은 보여주기 시간을 나타낸다

 

다음 단계

- 다시 계획을 세운다

 

단계를 꽤 세부적으로 구성했는데 그렇지 않으면 하다가 진행은 안되고 질려서 그만 둘 가능성이 매우 높기 때문이다

구현과정은 다음 포스트에서 정리한다

주말마다 프로젝트를 진행할텐데 적어도 주말마다 한 단계는 진행하길 바란다