제가 구현한 코드는 기본적으로 CLI 환경에서만 동작하면 돼서... GUI 구현이 궁금해졌습니다.
대충 python tkinter 혹은 cv2 라이브러리 써서 화면에 띄우거나, WebGL로 웹에 구성하는 건 해봤지만,
제대로 웹·앱 창을 어떻게 띄우나 생각해보니 원리를 전혀 모르고 살고 있더라고요.
그래서! 발전 과정부터 상세하게 알아보겠습니다.
컴퓨터에 창을 띄우는 방법은 컴퓨터 그래픽스와 사용자 인터페이스 기술(GUI: Graphic User Interface) 발전에 따라 여러 단계를 거쳐 발전했다.
초기 텍스트 기반 시스템 (1950 ~ 1970년대)
초기 컴퓨터 시스템은 텍스트 기반 시스템 (CLI: Command-Line Interface 혹은 Chracter User Interface)을 사용했다. 키보드를 통해 명령어를 입력하고, 텍스트로 결과를 출력 받는 텍스트 중심의 시스템이었다.
이 시기에는 그래픽 디스플레이가 존재하지 않았으며, 창개념이 없었다. 모든 작업은 단일 명령줄에서 수행되었다. 대표적인 시스템으로는 초기 유닉스 시스템, MS-DOS 시스템이 있다.
Sketchpad (1962)
GUI는 1962년 매사추세츠 공과대한 렉싱턴에 있는 MIT Lincoln 연구실에서 Ivan E. Sutherland가 만든 박사 학위 논문으로 sketchpad로 시작되었다.
스케치패드 사용자는 광펜(light pen)으로 음극선관(CRT: Cathode Ray Tube)에 점, 선분, 원호를 그릴 수 있었을 뿐만 아니라, 그린 것에 제약 조건과 관계를 지정할 수도 있었다.
호는 지정된 지름을 가질 수 있고, 선은 수평 또는 수직일 수 있으며, 도형은 요소와 모양의 조합으로 구성될 수 있다. 도형은 이동, 복사, 축소, 확장 및 회전할 수 있으며, 제약 조건(화면 아이콘으로 표시됨)은 동적으로 유지될 수 있었다. CRT 모니터 자체가 참신했던 당시, 사용자가 컴퓨터에 그림을 그려서 대화형으로 객체를 만들 수 있다는 아이디어는 혁신적이었다.
그려진 객체의 확대를 위해서, 최초의 window-drawing 프로그램을 고안했는데, 이를 위해 최초의 clipping 알고리즘을 만들어냈다. 여기서 clipping은 그래픽 객체의 어느 부분을 표시할지 계산하고 해당 부분만 화면에 표시하는 기술을 의미한다. 선을 그릴 위치를 계산하고, 해당 위치를 사용 중인 창의 좌표와 비교하고, 좌표가 창의 밖에 있는 선분이 표시되지 않도록 해야 했다.
Sketchpad는 MIT의 TX-2 메인프레임에서 실행이 가능했으나, 개인이 사용하기엔 너무 많은 컴퓨팅 파워가 필요했다. 이에 따라 상용화는 힘들었지만, Sketchpad의 디자인과 알고리즘은 GUI 연구의 전체 세대에 대해 중요한 영향을 주었다고 볼 수 있다.
Light Pen
Sketchpad에 사용된 lightpen은 1950년대와 1960년대의 대화형 컴퓨터 시스템에서 화면 영역을 선택하는 데 사용되었다.
Lightpen은 컴퓨터 화면에 빛으로 위치를 표시하면, 펜에 점을 감지했는지 여부를 묻는 방식으로 개체를 감지했다. 때문에 프로그램은 항상 표시되는 내용을 정확히 알 수 있었다. 반대로 화면에서 펜의 위치를 찾으려면 화면에 9개 지점의 십자 패턴을 표시한 다음, lightpen이 패턴의 중앙에 올 때까지 이동하는 것과 같이 더 정교한 기술이 필요했다.
1964년 SRI International의 연구 프로젝트 리더인 Douglas Engelbart는 여전히 인기 있는 lightpen부터 조이스틱, Graphicon(전위차계 팔에 장착된 펜을 사용하는 곡선 추적 장치)에 이르기까지 상업적으로 판매되는 모든 포인팅 장치를 테스트했다.
그는 포인팅 장치에 불만을 느끼고 개선점을 찾고자 했으며, 이 때 면적을 계산하기 위해 평면계를 사용하는 방법을 다룬 대학 수업을 떠올렸다고 한다. (평면계는 두 개의 팔이 있고, 각 팔에는 바퀴가 있다. 바퀴는 축을 따라서만 굴러갈 수 있다. 바퀴 중 하나가 굴러가면 다른 하나는 미끄러져야 한다. 위 그림에서 Pole은 고정되고, tracer가 움직일 때 wheel이 움직이는 방식이다.)
그는 바퀴에 전위차계를 부착하여 회전을 모니터링 한다면, 평면계를 포인팅 장치로 사용할 수 있을 것이라고 생각했다. Engelbart는 자신의 대략적인 스케치 아이디어를 엔지니어 William English에게 설명했고, SRI 기계 공장의 도움으로 만들어진 것이 최초의 "마우스"이다.
GUI 등장 (1970 ~ 1980년대)
Alto 컴퓨터의 GUI
1970년대 후반, PARC 연구소에서 처음 개발한 Alto 컴퓨터는 최초로 마우스와 창을 사용하는 GUI 시스템을 구현하였다.
1972년, 연구자 Alan Kay가 이끄는 Xerox PARC의 Smalltalk 프로그래밍 언어 그룹은 그들 버전의 창을 구현했다. 그들은 Sutherland나 Engelbart와 달리 이미지를 화면에 점으로 표시해야 한다고 결정함으로써 벡터에서 raster display로 전환하여 각 지점의 할당된 메모리 위치를 매핑하기 쉽게 만들었다. 이것이 PARC에서 발명한 비트맵으로, 프로세서 로직과 메모리 속도의 지속적인 성능 개선을 통해 1980년대에 실현 가능해졌다.
비트맵 조작을 실험하면서 Smalltalk 연구원 Dan Ingalls는 BitBlt로 알려진 bit-block 전송 절차를 개발했다. BitBlt 소프트웨어를 사용하면 애플리케이션 프로그램에서 화면(on-screen), 또는 화면 밖 메모리(off-screen memory), 또는 두 메모리 사이에서 픽셀 값의 직사각형 배열을 혼합하고 조작하여 픽셀 값을 결합하고 결과를 적절한 비트맵 위치에 저장할 수 있었다. 스크롤(이미지를 이동), 크기 조정(확대 또는 축소), 창을 드래그(화면에서 한 위치에서 다른 위치로 이동)하는 프로그램을 훨씬 더 쉽게 작성할 수 있었으며, 이를 통해 Kay는 겹치는 창을 만들었다. 이는 곧 Smalltalk 그룹에서 구현되었지만 clipping을 더 어렵게 만들었다.
창을 겹치지 않는 타일링(tiling) 시스템은 테두리가 단순히 한 화면 테두리에서 다른 화면 테두리로 이어지는 수평 또는 수직선일 뿐이며, 소프트웨어는 그 선의 위치만 추적한다. 하지만 겹치는 창은 화면 어디에나 나타나 다른 창의 일부를 무작위로 가릴 수 있으므로, 불규칙한 영역을 잘라내야 한다. 따라서 애플리케이션 소프트웨어는 창의 어느 부분이 보이는지 지속적으로 추적해야 한다. 이 때문에 몇몇 연구자는 겹치기(overlapping)보다 타일링을 선호했다고 한다. 그러나 현실을 보면 겹치기가 승리했다.
메뉴와 아이콘에 대한 여담도 있으나, 이는 IEEE Spectrum: HOW THE GRAPHICAL USER INTERFACE WAS INVENTED를 참고.
후발 주자
이후, 1980년대 애플(Lisa, Macintosh)과 마이크로소프트(Windows 1.0)가 이를 따라 GUI를 개발했다.
1983년 1월과 1984년 1월에 각각 출시된 Lisa와 Macintosh를 통해 그래픽 사용자 인터페이스가 저가 대량 생산 컴퓨터 시장에 진출했다. 거의 10,000달러에 달하는 Lisa는 너무 비싼 가격이었지만, 수상 경력에 빛나는 광고와 저렴한 가격 덕분에 Macintosh는 세상을 강타했다.
초기 Mac은 RAM이 128K바이트에 불과해서 그래픽 조작을 많이 하기에는 메모리가 너무 작아서 응답이 느렸다. 또한 프로그래머가 그래픽 루틴 도구 상자를 배우는 데 필요한 시간 때문에 애플리케이션 패키지는 1985년까지 지연되었다. 하지만 Mac의 사용 편의성은 의심할 여지가 없었고, IBM PC와 복제품의 MS-DOS 세계와 Unix 기반 워크스테이션으로 관심을 끌었다. 그 후 5년 동안 RAM 칩의 가격은 비트맵 그래픽의 메모리 수요를 감당할 수 있을 정도로 떨어졌고, Mac에 이어 모든 종류의 PC와 워크스테이션을 위한 수십 개의 유사한 인터페이스가 출시되었다.
1980년대 Mac의 성공은 애플이 GUI 관련 법적 소유권을 보호하기 위해서 법적 조취를 취하게 만들었다. 당시 진행됐던 소송은 혁신의 주체인 디자이너, 회사가 아닌 법적 보호를 먼저 신청한 사람이나 기업에 권리가 귀속될 가능성을 시사했다.
참고 자료
여담으로,,
코드 짤 때는 ChatGPT를 믿지 않아서 거의 안 쓰고 살았는데, 글 쓰거나 번역에는 정말 좋네요.
검색하고 흐름 파악하는 수고를 배로 줄였습니다. 아주 편해요
그리고 이번에 조사하면서 IEEE Spectrum에 대해서 처음 알게 되었는데 양질의 자료가 많아서 좋네요.
쓰다 보니 코드에 대한 것도 알아보고 있었는데 하나도 적지 못했네요.
다음에 이어가겠습니다.
제가 구현한 코드는 기본적으로 CLI 환경에서만 동작하면 돼서... GUI 구현이 궁금해졌습니다.
대충 python tkinter 혹은 cv2 라이브러리 써서 화면에 띄우거나, WebGL로 웹에 구성하는 건 해봤지만,
제대로 웹·앱 창을 어떻게 띄우나 생각해보니 원리를 전혀 모르고 살고 있더라고요.
그래서! 발전 과정부터 상세하게 알아보겠습니다.
컴퓨터에 창을 띄우는 방법은 컴퓨터 그래픽스와 사용자 인터페이스 기술(GUI: Graphic User Interface) 발전에 따라 여러 단계를 거쳐 발전했다.
초기 텍스트 기반 시스템 (1950 ~ 1970년대)
초기 컴퓨터 시스템은 텍스트 기반 시스템 (CLI: Command-Line Interface 혹은 Chracter User Interface)을 사용했다. 키보드를 통해 명령어를 입력하고, 텍스트로 결과를 출력 받는 텍스트 중심의 시스템이었다.
이 시기에는 그래픽 디스플레이가 존재하지 않았으며,
창개념이 없었다. 모든 작업은 단일 명령줄에서 수행되었다. 대표적인 시스템으로는 초기 유닉스 시스템, MS-DOS 시스템이 있다.Sketchpad (1962)
GUI는 1962년 매사추세츠 공과대한 렉싱턴에 있는 MIT Lincoln 연구실에서 Ivan E. Sutherland가 만든 박사 학위 논문으로
sketchpad로 시작되었다.스케치패드 사용자는 광펜(light pen)으로 음극선관(CRT: Cathode Ray Tube)에 점, 선분, 원호를 그릴 수 있었을 뿐만 아니라, 그린 것에 제약 조건과 관계를 지정할 수도 있었다.
호는 지정된 지름을 가질 수 있고, 선은 수평 또는 수직일 수 있으며, 도형은 요소와 모양의 조합으로 구성될 수 있다. 도형은 이동, 복사, 축소, 확장 및 회전할 수 있으며, 제약 조건(화면 아이콘으로 표시됨)은 동적으로 유지될 수 있었다. CRT 모니터 자체가 참신했던 당시, 사용자가 컴퓨터에 그림을 그려서 대화형으로 객체를 만들 수 있다는 아이디어는 혁신적이었다.
그려진 객체의 확대를 위해서, 최초의 window-drawing 프로그램을 고안했는데, 이를 위해 최초의
clipping알고리즘을 만들어냈다. 여기서clipping은 그래픽 객체의 어느 부분을 표시할지 계산하고 해당 부분만 화면에 표시하는 기술을 의미한다. 선을 그릴 위치를 계산하고, 해당 위치를 사용 중인 창의 좌표와 비교하고, 좌표가 창의 밖에 있는 선분이 표시되지 않도록 해야 했다.Sketchpad는 MIT의 TX-2 메인프레임에서 실행이 가능했으나, 개인이 사용하기엔 너무 많은 컴퓨팅 파워가 필요했다. 이에 따라 상용화는 힘들었지만, Sketchpad의 디자인과 알고리즘은 GUI 연구의 전체 세대에 대해 중요한 영향을 주었다고 볼 수 있다.
Light Pen
Sketchpad에 사용된 lightpen은 1950년대와 1960년대의 대화형 컴퓨터 시스템에서 화면 영역을 선택하는 데 사용되었다.
Lightpen은 컴퓨터 화면에 빛으로 위치를 표시하면, 펜에 점을 감지했는지 여부를 묻는 방식으로 개체를 감지했다. 때문에 프로그램은 항상 표시되는 내용을 정확히 알 수 있었다. 반대로 화면에서 펜의 위치를 찾으려면 화면에 9개 지점의 십자 패턴을 표시한 다음, lightpen이 패턴의 중앙에 올 때까지 이동하는 것과 같이 더 정교한 기술이 필요했다.
1964년 SRI International의 연구 프로젝트 리더인 Douglas Engelbart는 여전히 인기 있는 lightpen부터 조이스틱, Graphicon(전위차계 팔에 장착된 펜을 사용하는 곡선 추적 장치)에 이르기까지 상업적으로 판매되는 모든 포인팅 장치를 테스트했다.
그는 포인팅 장치에 불만을 느끼고 개선점을 찾고자 했으며, 이 때 면적을 계산하기 위해 평면계를 사용하는 방법을 다룬 대학 수업을 떠올렸다고 한다. (평면계는 두 개의 팔이 있고, 각 팔에는 바퀴가 있다. 바퀴는 축을 따라서만 굴러갈 수 있다. 바퀴 중 하나가 굴러가면 다른 하나는 미끄러져야 한다. 위 그림에서 Pole은 고정되고, tracer가 움직일 때 wheel이 움직이는 방식이다.)
그는 바퀴에 전위차계를 부착하여 회전을 모니터링 한다면, 평면계를 포인팅 장치로 사용할 수 있을 것이라고 생각했다. Engelbart는 자신의 대략적인 스케치 아이디어를 엔지니어 William English에게 설명했고, SRI 기계 공장의 도움으로 만들어진 것이 최초의 "마우스"이다.
GUI 등장 (1970 ~ 1980년대)
Alto 컴퓨터의 GUI
1970년대 후반, PARC 연구소에서 처음 개발한
Alto컴퓨터는 최초로 마우스와 창을 사용하는 GUI 시스템을 구현하였다.1972년, 연구자 Alan Kay가 이끄는 Xerox PARC의 Smalltalk 프로그래밍 언어 그룹은 그들 버전의 창을 구현했다. 그들은 Sutherland나 Engelbart와 달리 이미지를 화면에 점으로 표시해야 한다고 결정함으로써 벡터에서
raster display로 전환하여 각 지점의 할당된 메모리 위치를 매핑하기 쉽게 만들었다. 이것이 PARC에서 발명한 비트맵으로, 프로세서 로직과 메모리 속도의 지속적인 성능 개선을 통해 1980년대에 실현 가능해졌다.비트맵 조작을 실험하면서 Smalltalk 연구원 Dan Ingalls는
BitBlt로 알려진 bit-block 전송 절차를 개발했다. BitBlt 소프트웨어를 사용하면 애플리케이션 프로그램에서 화면(on-screen), 또는 화면 밖 메모리(off-screen memory), 또는 두 메모리 사이에서 픽셀 값의 직사각형 배열을 혼합하고 조작하여 픽셀 값을 결합하고 결과를 적절한 비트맵 위치에 저장할 수 있었다. 스크롤(이미지를 이동), 크기 조정(확대 또는 축소), 창을 드래그(화면에서 한 위치에서 다른 위치로 이동)하는 프로그램을 훨씬 더 쉽게 작성할 수 있었으며, 이를 통해 Kay는 겹치는 창을 만들었다. 이는 곧 Smalltalk 그룹에서 구현되었지만 clipping을 더 어렵게 만들었다.창을 겹치지 않는 타일링(tiling) 시스템은 테두리가 단순히 한 화면 테두리에서 다른 화면 테두리로 이어지는 수평 또는 수직선일 뿐이며, 소프트웨어는 그 선의 위치만 추적한다. 하지만 겹치는 창은 화면 어디에나 나타나 다른 창의 일부를 무작위로 가릴 수 있으므로, 불규칙한 영역을 잘라내야 한다. 따라서 애플리케이션 소프트웨어는 창의 어느 부분이 보이는지 지속적으로 추적해야 한다. 이 때문에 몇몇 연구자는 겹치기(overlapping)보다 타일링을 선호했다고 한다. 그러나 현실을 보면 겹치기가 승리했다.
메뉴와 아이콘에 대한 여담도 있으나, 이는 IEEE Spectrum: HOW THE GRAPHICAL USER INTERFACE WAS INVENTED를 참고.
후발 주자
이후, 1980년대 애플(Lisa, Macintosh)과 마이크로소프트(Windows 1.0)가 이를 따라 GUI를 개발했다.
1983년 1월과 1984년 1월에 각각 출시된 Lisa와 Macintosh를 통해 그래픽 사용자 인터페이스가 저가 대량 생산 컴퓨터 시장에 진출했다. 거의 10,000달러에 달하는 Lisa는 너무 비싼 가격이었지만, 수상 경력에 빛나는 광고와 저렴한 가격 덕분에 Macintosh는 세상을 강타했다.
초기 Mac은 RAM이 128K바이트에 불과해서 그래픽 조작을 많이 하기에는 메모리가 너무 작아서 응답이 느렸다. 또한 프로그래머가 그래픽 루틴 도구 상자를 배우는 데 필요한 시간 때문에 애플리케이션 패키지는 1985년까지 지연되었다. 하지만 Mac의 사용 편의성은 의심할 여지가 없었고, IBM PC와 복제품의 MS-DOS 세계와 Unix 기반 워크스테이션으로 관심을 끌었다. 그 후 5년 동안 RAM 칩의 가격은 비트맵 그래픽의 메모리 수요를 감당할 수 있을 정도로 떨어졌고, Mac에 이어 모든 종류의 PC와 워크스테이션을 위한 수십 개의 유사한 인터페이스가 출시되었다.
1980년대 Mac의 성공은 애플이 GUI 관련 법적 소유권을 보호하기 위해서 법적 조취를 취하게 만들었다. 당시 진행됐던 소송은 혁신의 주체인 디자이너, 회사가 아닌 법적 보호를 먼저 신청한 사람이나 기업에 권리가 귀속될 가능성을 시사했다.
참고 자료
여담으로,,
코드 짤 때는 ChatGPT를 믿지 않아서 거의 안 쓰고 살았는데, 글 쓰거나 번역에는 정말 좋네요.
검색하고 흐름 파악하는 수고를 배로 줄였습니다. 아주 편해요
그리고 이번에 조사하면서 IEEE Spectrum에 대해서 처음 알게 되었는데 양질의 자료가 많아서 좋네요.
쓰다 보니 코드에 대한 것도 알아보고 있었는데 하나도 적지 못했네요.
다음에 이어가겠습니다.