크리에이티브 코딩 밋업 인사이트 - 6. 물리 버튼 👇

8월에 진행된 밋업을 이제야 정리한다. 이 날 주제는 '물리 버튼'으로 물리적으로 무언가를 눌러서 작동시키는 것의 여러 사례와 아두이노를 활용해 물리 버튼의 신호를 웹으로 가져가 활용하는 과정을 함께 보았다. 오프라인에서 아날로그적인 활동을 웹에 적용시키는 방법에 대한 인사이트를 얻을 수 있었다.

 

1. 초기 키보드 악기와 그 발전

오르간(Organ), 하프시코드(Harpsichord), 피아노(Piano)와 같은 악기를 예로, 눌러서 작동 시키는 사례에 대한 설명이 시작됐다. 건반을 눌러 소리가 나는 방식으로, 뭘 눌러서 여러 소리를 내게끔 하는 악기를 어떻게 만들게 됐는지 궁금해졌다. 검색해보니 하프시코드가 15세기 경에 개발된 건반 악기로 키를 누르면 현을 튕기는 구조로 만들어져있고, 클라비코드라는 악기는 현을 건드려 소리를 내는 악기라고 한다. 소리 세기의 조절이나 크기에 대한 한계를 보완하면서 피아노가 만들어졌다고.

 

+ 오토마타

오토마타는 16-18세기 사이에 발전된 기계장치로, '악기를 연주하는, 글을 쓰는 인형'등이 여기에 해당하는데, 귀족층의 오락과 예술 향유를 위해 만들어지기도 했지만 이후 기계 공학의 발전을 이끈 역할을 했다고 한다. 종종 버튼이나 레버를 사용하여 작동되었다고 한다.

위키백과: 스위스 기계 박물관에 있는 자동 인형

여기서 얻은 나의 해석과 인사이트가 있다면, 오토메타나 피아노는 그 복잡한 상호작용을 하는 기계를 매번 만들어야해서 특정 귀족들만 그 인터렉션을 경험할 수 있었다는 것. 지금은 하나의 설계로 (이 역시 컴퓨터가 있어야 하지만)수많은 사람이 인터렉션을 경험할 수 있으니 경험에 대한 평등이 이전보단 이뤄지고 있다고 봤다. 한편으로는 오토메타가 기계 공학의 발전에 기여했으니 상위층의 문화 향유에 대한 욕구가 전반적인 인류 발전에 도움이 된다는 점도 다시 느끼게 됐다.

 

2. 전신과 타자기

버튼에 대한 개념이 문득 궁금해져 검색을 해본다. 어학사전에서 '버튼'을 검색해보면 '전기 장치에 전류를 끊거나 이어 주거나 하며 기기를 조작하는 장치.'라 한다. 그렇다면 본격적인 버튼은 1900년대에 개발된 '전신기'에서 시작한 것이라 볼 수 있지 않을까? 이 시기에 기계식 타자기도 발명되었는데, 둘 다 눌러서 작동하며, 소통을 위한다는 목적이 동일하면서도 그 방식이 다르게 발전했다는 점이 재밌었다. '전신기'는 신호로 통신하면서 빠르지만 휘발되는 소통이라면, '타자기'는 기록을 위함이라는 점이 다르다고 봤다.

 

3. 증기기관과 버튼 장치의 발전

증기기관에서는 전기적인 장치가 아닌 기계적 버튼과 레버가 널리 사용됐다.

 

4. 전기와 전자 기술의 발전

증기기관, 산업혁명 이후, 전기와 전자 기술이 발전했다. '전기 벨, (엘리베이터 등에 사용된)푸시 버튼'과 같이 단순한 전기 회로 제어를 활용한 버튼에서부터 현대의 터치 센서와 압력 센서를 활용한 다양한 활용도의 장치로서의 버튼으로 발전해왔다. 전기 회로의 흐름을 제어하는 장치로 '스위치'도 있다. 스위치는 둘 이상의 회로를 동시에 활성화하는데 사용할 수 있어 on/off 개념의 버튼과 다른 활용도를 가진다.

아케이드 버튼과 나이프 스위치

5. 아두이노와 Push Button 구현

아두이노의 회로에 물리 버튼을 연결해 전기 신호를 받고, 이 신호를 가지고 웹에서 버튼이 눌리는 인터렉션을 구현해주셨다.

밋업을 통해 처음 접한 거라 아두이노가 뭔지 Chat GPT에 물어봤다.

**아두이노(Arduino)**는 소형 컴퓨터로서 마이크로컨트롤러 보드와 소프트웨어로 구성된 오픈소스 전자 플랫폼입니다. 아두이노는 다양한 센서와 액추에이터(모터, LED, 스피커 등)를 연결하여 프로그래밍으로 제어할 수 있어 로봇, 스마트 홈, IoT 프로젝트에 자주 사용됩니다.

초보자도 쉽게 시작할 수 있도록 설계되어, 간단한 코드 작성과 업로드로 하드웨어를 제어할 수 있고, DIY(Do-It-Yourself) 전자 프로젝트에 많이 활용됩니다.

물리, 오프라인에서의 신호를 통해 웹 인터렉션을 구현하는 과정이 매우 흥미로웠다. 재밌는 시도를 많이 해볼 수 있지 않을까.

 

6. GUI 버튼

GUI의 개념이 생기면서 물리 버튼의 개념이 그대로 가져와졌다. 밋업에서 공유받은 GUI의 흐름을 같이 정리한다.

1968년 - "The Mother of All Demos"

다그 엥겔바트(Douglas Engelbart)는 1968년 시연에서 NLS(On-Line System)를 통해 GUI 개념의 초기 형태를 선보였다. 이 시연에서는 마우스, 하이퍼텍스트, 창(window) 등의 개념이 처음으로 소개되었다. 이는 GUI의 발전에 중요한 기초가 되었다.

1970년대 - Xerox PARC의 연구

Xerox PARC(파로 알토 연구소)에서는 GUI의 많은 요소(아이콘, 메뉴, 창 등)를 포함한 "Alto" 컴퓨터를 개발하였다. 이 컴퓨터는 GUI 발전의 중요한 이정표였으며, 그래픽 사용자 인터페이스의 개념이 본격적으로 연구된 시기였다.

1981년 - Xerox Star

Xerox Star는 1981년에 출시된 최초의 상업용 GUI 컴퓨터였다. 이 시스템은 그래픽 인터페이스와 마우스, 아이콘, 메뉴, 창을 포함하여 사용자 친화적인 환경을 제공했다. 그러나 비싼 가격과 제한된 시장성 때문에 널리 보급되지는 않았다.

1983년 - Apple Lisa

애플 Lisa는 1983년에 출시된 GUI를 갖춘 최초의 개인용 컴퓨터 중 하나였다. Lisa는 그래픽 인터페이스와 마우스를 사용한 상호작용을 도입했지만, 높은 가격과 제한된 소프트웨어 호환성으로 인해 상업적으로 큰 성공을 거두지 못했다.

1984년 - Apple Macintosh

매킨토시는 1984년에 출시되었으며, GUI를 갖춘 개인용 컴퓨터로서 대중화에 중요한 역할을 했다. 직관적인 인터페이스를 제공하였고, 이는 개인용 컴퓨터 시장에 큰 변화를 가져왔다. 매킨토시는 GUI의 대중화를 촉진하며 컴퓨팅 환경의 변화를 이끌었다.

1985년 - Microsoft Windows 1.0

Microsoft Windows 1.0은 1985년에 출시된 최초의 Windows 운영체제였지만, 완전한 GUI 운영체제라기보다는 MS-DOS 위에서 동작하는 그래픽 셸에 가까웠다. Windows 1.0은 제한적인 아이콘과 버튼을 제공했으며, Windows 3.0(1990년) 이후에야 본격적인 GUI 기능을 갖추게 되었다.

 

7. 디자인 시스템

이 후 UI/UX에 대한 중요성이 대두되면서 구글의 Material Design 등 여러 디자인 시스템들이 생겨났다. 나의 경우에는 존재는 알고 있었지만, 디자인에 이 시스템을 모두 이해하고 적용하는 경우는 보지 못했었다. 점차 시장에서 이 시스템에 맞춰 디자인 해달라는 요구가 많아지고 있다고 하니 공부를 해야될 것 같다. 주변의 한 에이전시 대표님은 시스템에 대한 요구가 늘면서 화면 기획과 디자인의 경계가 점점 더 흐려질 것으로 본다고 하셨다.

Material Design

 

Fluent 2 Design System

 

Human Interface Guidelines | Apple Developer Documentation

 

Carbon Design System

 

Overview - Get started - Atlassian Design System

 

이번 밋업에선 이과적인 인사이트를 제법 얻을 수 있었다. 그만큼 어떻게 활용해볼지 잘 그려지지 않기도 하지만 표현 방식의 폭이 넓어졌다는 것으로 만족한다. 온라인과 오프라인에서 경험을 교차하는데 관심이 큰 만큼 조만간 이번 밋업 인사이트를 활용한 프로젝트를 해봤으면 좋겠다.