[IT 좌충우돌기] HTML5로 할 수 있는 일이 제법 많네? (객체? API? 전부 내 손안에~)

 

반갑습니다. 안녕하십니까!

오늘도 IT의 망망대해를 헤매는 50대 컴맹 부산 아재 입니다! 
바다에 파도가 일렁이듯 IT 세계도 계속 변하는데, 

오늘은 HTML관련 책을 읽다가 의문이 들어 이렇게 글을 만들어 봅니다. 

 HTML5, It's our precious!

- 요즘 웹 세상을 책을 읽으면서 탐험하다 보니,

'HTML5'라는 섬이 예사롭지 않네요.

 

"HTML5는 단순한 웹페이지 제작 도구를 넘어, 

강력한 웹 애플리케이션 플랫폼으로 발전했다"

 

"플랫폼? 그게 뭐꼬?" 하면서 눈을 반짝이며 읽어 내려갔죠.
그런데... 역시나! 

기사 중간중간에 '애드온(Add-on)'이니,

API니, '프로퍼티(Property)', '메서드(Method)', '오브젝트(Object)' 같은

신기한 이름의 해적들이 마구 튀어나오는데,

이게 도통 무슨 말인지 감이 잡히질 않았습니다.

영어단어 뜻은 아는데 이게 뭘 뜻하는 건지 ...

 

마치 영어 단어 모르는 채로 영어 소설 읽는 기분이랄까요? 

아니면 지도 없이 바다에 던져진 느낌?
"안 되겠다! 지도부터 만들자!"

그래서 오늘도 "IT 용어라는 이름의 괴물들부터 길들이자!는 생각으로,

이 용어들을 제 방식대로 정리해보는 시간을 가지려고 합니다.

저처럼 이런 용어들이 낯선 생초보 컴맹님들께는 조금이나마 도움이 되길,
자, 그럼 바다에 빠졌다 생각하고 한 번 펼쳐봅시다~!

 

HTML5가 '웹 앱 플랫폼'이라고? 그게 대체 뭐꼬? 

본격적인 용어 탐험에 앞서, 제가 읽은 기사의 핵심인 'HTML5가 웹 애플리케이션 플랫폼' 이라는 말부터 풀어봅니다. 

1. 만능 공작소, HTML5 '웹 애플리케이션 플랫폼'이란?

예전 HTML은 뭐 그냥 인터넷에 글자나 그림을 전시하는 정도였다면...
HTML5는 웹 브라우저 안에서 마치 스마트폰 앱처럼 돌아가는 프로그램을 만들 수 있는 강력한 '작업대' 또는 '만능 공작소' 같은 역할을 하게 되었다는 뜻입니다. 

쉽게 생각하면?
- 예전 HTML: 고래를 바다에서 구경만 할 수 있었음
- HTML5: 고래와 대화도 하고, 가끔 등을 타고 놀러갈 수도 있음!

예를 들어,
유튜브 같은 동영상 사이트
네이버 지도 같은 복잡한 웹 서비스
페이스북 같은 소셜 서비스

이런 것들이 다 예전에는 별도 프로그램이 필요했는데, 

이제 웹 브라우저 안에서 HTML5로 다 되는 세상이 되었다 이 말입니다.

2. 우리 아재들이 헷갈리는 IT 용어들, 한 방에 정리해드립니다!

2-1. 객체 (Object) - 세상 모든 '거시기'가 객체라예!
프로그래밍 세계에서 '객체(Object)'라는 말은 정말 자주 등장합니다. 근데 이게 뭐꼬?
쉽게 말해, 우리가 '이거시여', '저거시여' 하면서 가리킬 수 있는 모든 것이 객체입니다.

프로그램 안에서 '이거'라고 지목할 수 있는 모든 것!
생활 속 객체 예시:
 눈에 보이는 거: 자동차, 사람, 강아지, 책, 컴퓨터, 버튼...
 눈에 안 보이는 개념: 주문, 계좌, 일정, 사용자 정보...

제가 만약 컴퓨터 프로그램 속에 있다면:
'부산 아재' 객체
  - 나이: 50대
  - 주소: 부산
  - 특기: 맛있는 거 먹기, 블로그 글쓰기
이런 식으로 표현될 수 있겠죠! 

2-2. 프로퍼티 (Property) - 그 '거시기'의 특징은 뭐꼬?

'프로퍼티(Property)'는 방금 말한 객체가 가지고 있는 구체적인 '특징', '상태', '정보'를 말합니다. 쉽게 말하면 그 물건(객체)의 "ㅇㅇ이 이렇다"는 설명이지예.

 

프로퍼티 예시:
'자동차'라는 객체의 프로퍼티는?
색깔: "빨간색"
바퀴 수: 4개
현재 속도: "시속 60km"

'사람'이라는 객체의 프로퍼티는?
이름: "김철수"
나이: 30살
직업: "개발자"

웹페이지의 '버튼' 객체의 프로퍼티는?
글자: "클릭하세요"
배경색: "파란색"
너비: "100픽셀"

프로퍼티는 그 물건(객체)이 "어떻게 생겼는지", "어떤 상태인지"를 알려주는 거예요!

2-3. 메서드 (Method) - 그 '거시기'는 뭘 할 수 있노?

메서드(Method)는 객체가 할 수 있는 '행동'이나 '기능'을 말합니다.

쉽게 말해서 그 물건(객체)한테 "이거 해봐라~"하고 시킬 수 있는 것들 입니다.

 

메서드 예시:
'자동차' 객체의 메서드는?
시동걸기()
엑셀밟기()
멈추기()
경적울리기()

'사람' 객체의 메서드는?
말하기()
걷기()
밥먹기()
잠자기()

웹페이지의 '버튼' 객체의 메서드는?
클릭되기()
색깔바꾸기()


보통 뒤에 () 괄호가 붙어서 "이건 행동이야!"라는 느낌을 줍니다.

객체가 이 메서드로 뭔가를 핸들(조종할) 수 있는 겁니다.

프로퍼티와 메서드의 차이!

설렁탕으로 비유해볼게예~

설렁탕 객체로 생각해보면:
프로퍼티(특징):
색깔: 하얀색
온도: 뜨거움
맛: 담백함
가격: 10,000원

메서드(행동/기능):
배고픔해결하기()
속풀어주기()
해장하기()

암만! 설렁탕의 '온도'나 '맛'은 그 설렁탕의 상태를 설명하는 프로퍼티고, 

설렁탕이 우리에게 해줄 수 있는 '해장하기'는 메서드라는 거지예! 이해 되십니꺼~? 

2-4. API (Application Programming Interface) - "이 기계는 요렇게 쓰이소!"

'API'... 이놈도 참 자주 나오는데 볼 때마다 아리송합니다.

API는 '애플리케이션 프로그래밍 인터페이스'의 줄임말인데요. 너무 어렵죠? 😂
제가 알기로는, 어떤 프로그램의 특정 기능을 외부에서도 쉽게 쓸 수 있도록 만들어둔 '주문 창구'예요!

 

API 이해를 위한 생활 속 비유:
🍽️ 식당 메뉴판:
손님(다른 프로그램)은 메뉴판(API)을 보고
"불고기 주세요~"(기능 요청)하면
주방(해당 프로그램)에서는 그에 맞춰 요리(처리)를 해서 내어줍니다
손님은 불고기가 어떻게 만들어지는지 몰라도 됩니다.

📺 TV 리모컨:
리모컨(API)의 버튼(미리 약속된 기능)을 누르면
TV(애플리케이션)의 채널이 바뀌거나 소리가 조절됨
우리는 TV 내부가 어떻게 돌아가는지 몰라도 사용 가능!

🌤️ 부산 날씨 API 예시:
기상청에서 제공하는 날씨 API를 이용하면
제 블로그에서도 복잡한 기상 관측 없이
"오늘 부산 날씨는 맑음!" 같은 정보를 쉽게 보여줄 수 있음


쉽게 말해 API는 개발자들이 남이 만든 훌륭한 기능을 

"요렇게 쓰세요~" 하고 길을 터놓은 것입니더!

2-5. 애드온 (Add-on) - 기본 장비에 추가하는 '특수 장비'

'애드온(Add-on)'은 단어 뜻 그대로 '덧붙이는 것'입니다.

기존 프로그램에 기능을 추가해서 더 강력하게 만드는 거죠!

 

애드온 이해를 위한 생활 속 비유:
📱 스마트폰 앱:
스마트폰에 카메라 앱, 지도 앱, 게임 앱 등을 추가로 설치해서 다양한 기능을 사용

🌐 웹 브라우저 확장 프로그램:
크롬이나 엣지 같은 웹 브라우저에 광고 차단기, 번역 프로그램 등을 추가로 설치

🎮 게임 아이템:
게임 캐릭터에 특수 능력을 부여하는 장비 같은 것도 애드온과 비슷한 개념

부산 사투리로 쉽게 말하면, 

"이거 하나 더 붙이면 억수로 편하다!"는 걸 덧붙이는 겁니더!

"아하! 이제야 좀 알겠수다!" 다시 관련 책 읽어보기

오늘도 머리에서 뽀송뽀송한 김이 날 정도로 용어를 정리해봤는데요.

이렇게 하나하나 뜯어보니 그동안 뜬구름 잡는 듯했던

기사 내용이 조금 더 명확해지는 것 같습니다.

특히 '객체', '프로퍼티', '메서드'가 서로 어떤 관계인지,

그리고 API가 이들을 어떻게 외부와 연결해주는 '다리' 역할을 하는지

어렴풋이나마 감을 잡은 것 같아 뿌듯하네요!
자, 이제 다시 그 기사를 읽으러 가봐야겠습니다. 

내 머릿속 바다에 조금이나마 지도가 생긴 것 같은 기분이 드네요.

오늘의 용어정리 마무리.

다들 힘내세요, 컴맹 여러분!

IT라는 망망대해에서 50대 아재인 저도 이렇게 한 걸음씩 배우고 있으니까요.

나이는 숫자에 불과하다는 말 장난이 싫어지고 있어요.

배우는게 느려지는게 느껴져서 말이죠. 
혹시 제가 잘못 이해한 부분이 있거나, 

아니면 "아재요, 그건 요래요래 하는 기야!" 하고 

더 쉽고 명쾌한 설명이 있다면 언제든지 댓글로 가르침 부탁드립니다!
컴맹 아재의 IT 탐험은 계속됩니다! 다음 공부일지에서 만나요!