FLTK 는 Windows 나 X11 에서 창의 크기를 조정 할 수 있도록 만들어 져 있습니다만, 기본적으로 resize 를 지원 할 경우 최초 만들어진 창의 크기에 각 위젯(Fl_Widget) 들이 만들어진 크기의 비율(ratio) 로 그 크기가 조정 되게 됩니다.
이런 방법은 최초 만들어진 UI 의 디자인적 요소를 해치지 않고 그 비율을 유지 한다는 장점이 있을 수도 있지만, 좀 더 detail 한 UI 를 적용 하는데 있어서는 오히려 해가 되는 경우가 있습니다.
예를 들어 다음과 같이 만들어진 프로그램의 경우, 최초 실행되는 크기에서 윈도우 크기를 변경 할 경우 비율대로 커지게 되면 다음과 같이 글자 크기만 빼고 비율 대로 늘어지는 모습을 가지게 됩니다.
비율대로 커지는것 까지는 좋게 생각할 수 있지만, 커지는 위젯의 크기에 비해 글자의 크기는 최초 설정 값 그대로 유지되기 때문에 실제 사용하기에 뭔가 어색한 형태가 될 수 있게 됩니다.
이를 해결 하기 위해서는 Fl_Group 을 통해서 HTML 에서 table 및 tr, td 에 크기를 강제 지정하거나 하여 늘어 나는 부분이 가로나 세로에 고정 되게 설계 하거나 할 수 있게 됩니다.
보통 근래의 많은 프로그램들이 flat 한 형태의 UI 를 추구 하는데 있어서 사람이 빠르게 인지할 수 있는 버튼이나 문구 등을 많이 사용합니다. 이를 응용하여 Fl_Group 을 통해 여러 형태로 묶는 형태를 만들어 보았습니다.
먼저 그룹을 위와 같이 여러 가지 형태로 묶은 다음, 전체 창의 크기가 변경 될 때 고정으로 넓이와 높이가 유지될 수 있도록 하되, TOP3 박스는 그 크기가 옆으로 늘어나도록 하고, LEFT1과 LEFT2 는 Fl_Group 이 아닌 Fl_Scroll 안에 추가 하여 아예 크기 변경이 없도록 하였습니다. 또한 RIGHT 로 표시되는 부분은 Fl_Group 으로 두되, 마지막의 CENTER 영역이 크기 변경이 발생 하도록 하여 세로는 크기 조정이 되나 가로는 늘어 나지 않도록 하였습니다. BOTTOM 도 마찬가지 구조 입니다.
그래서 창의 크기를 조정 할 경우 아래와 같이 TOP3 와 LEFT1,2 의 아래 공백 부분, RIGHT 의 세로, BOTTOM 의 가로 크기가 변경 되고 CENTER 의 경우 가운데 영역의 전체 크기 변경이 이루어 지게 하여 기본적인 UI layout 을 유지 하도록 디자인 할 수 있게 됩니다.
이에 실제 늘어 나는 비율을 보면 아래 처럼 확인이 가능 합니다.
여기서 중요한 점은 Fl_Group 내에서 다시 Fl_Group 을 만들수 있게 되고, 전체 창의 크기가 변경 될 때 Fl_Group 내에 특정 위젯이 늘어나는 비융에 맞게 늘어 나게 지정을 하게 되면 나머지 위젯들은 그 크기를 유지할 수 있게 된다는 것 입니다.
좀 더 자세한 사항은 아래의 첨부된 소스코드를 예제로 이해 할 수 있을 것 입니다.
main.cpp위와 같이 Fl_Goup 이나 Fl_Scroll 등으로 resize 가 발생 할 경우 이를 대처한 구조로 최초의 프로그램을 변경 하면 아래 처럼 기본 layout 을 유지 하는 형태의 모습으로 만들 수 있게 되고, 이로 인해 UI 가 의도한 바와 상관 없이 변형 되는 일을 막을 수 있게 됩니다.
WxWidget 이나 , GTK+, QT와는 다른 형태로 이해 되어야 하는 부분이 있으므로 이를 고려 해서 UI 를 구성 하게 된다면 (개인적으로) 깔끔하고 이쁜 UI 를 만들어 내는데 큰 도움이 될 듯 합니다.
