Direct2D C++ UI 라이브러리 "Foxhop.lib"

https://youtu.be/z85mqV4YdK0

 

모션그래픽이 적용된 UI 라이브러리를 만들어보고 싶었다.

 영화 속에나 있던 화려한 그래픽 화면을 현실에서 실제 응용프로그램으로 충분히 쓸 수 있을법 한데, 그런게 없으니 직접 만들수밖에 없었다. Direct2D 기반이라 윈도우즈 환경에서밖에 사용할 수 없다는게 가장 아쉬운 부분이라 말할 수 있겠다.

 과정은 상당히 험난했는데, 투명한 윈도우 위에서 반투명 오브젝트를 출력하기위한 갖은 노력의 일환으로 OpenGL을 이용하여 화면을 렌더링 해보는것이 시작이었다. 리눅스에서도 사용 할 수 있을테니 나쁘지 않은 선택으로 보였으나 텍스트 출력이 골자였다. Freetype 이라는 라이브러리로 폰트 파일을 로드해 글자 하나씩 직접 렌더링 하는 작업을 나는 감당 할 수 없었기에, DIrect2D의 도움을 받는것이 그 당시엔 가장 현명한 선택이었다.

 두번째 난관은 텍스트입력UI였다. 글자마다 크기도 제각각이니 이를 고려하여 입력 이벤트가 날아올때마다 글자의 폭을 고려하여 커서를 적법한 위치에 옮겨넣어야했다. 더군다나 한글입력의 경우 조립중인 한글을 계속 표현 해주어야 하기 때문에 골치가 아팠다. 마우스 클릭을 통해 커서를 이동하는것도 골치다. 특정 좌표가 가리키는게 어떤 문자인지 일일히 계산 해주어야 했는데, 우리가 당연하게 사용하고 있던 만만한 메모장이 사실은 엄청난 기술의 산물이었던 것이다.

다시는 메모장을 무시하지 마라.

 

 

 작업이 끝나고 만들어진 화면을 보니 생각보다 이쁘게 잘 뽑힌 것 같아 만족스럽지만 아직 갈 길이 멀다. 지금 있는 UI라고는 버튼, 리스트뷰(UI_Table 이라는 이름의 클래스다), 꺾은선그래프 (UI_LineChart 로 지었다), 장식용 구분선(UI_Line), 텍스트입력기(UI_TexInput) 가 전부인데, 기본적으로 제공되어야 할 또다른 UI로는 체크박스, 프로그래스바(다운로드 표시 그거), 트리뷰(파일 디렉터리 그거) 등이 있을텐데 아직 더 개발해야한다. 주식 차트를 표현할 UI도 있으면 화면이 볼 만 하겠지만 아직은 때가 아니다.

 라이브러리는 이곳에서 사용 해 볼 수 있다.

https://github.com/devadversary/FoxHop

GitHub - devadversary/FoxHop: Motion GUI Library