brunch

You can make anything
by writing

C.S.Lewis

by Younggi Seo Feb 14. 2020

해커에게 필요한 웹 구조 해부하기 5

일의 사명감


이번 섹션은 자바스크립트를 사용한 이벤트 처리까지의 웹페이지 제작과정을 개인적으로 환기해보았다. 결과 화면은 참조한 책을 보고 그대로 실습하면 출력할 수 있고, 해당 소스 코드는 본인의 github repository에서 다운로드할 수 있다. 이벤트란 동사형으로 해석하면 '사건이 발생하다' 정도이다. 어떠한 입력이 이루어지면, 웹 페이지상에서 반응(출력)이 보인다. 이것을 쉽게 얘기해서 이벤트라고 부르며, 자바 스크립트는 애초에 일반인을 대상으로 만들어졌기 때문에 페이지의 DOM(Document Object Model) 구성요소와 CSS 스타일을 처리하여 웹사이트에서 바로 상호작용(Interaction)을 추가하는 프로그래밍 언어이다. 대중적으로 발전하여 이제는 많은 종류의 애플리케이션(웹상에서의 응용 프로그램) 개발에서 사용된다. 자바 스크립트에 대한 이해를 위한 다른 작가가 외서를 번역한 브런치를 씹어보면 이 언어에 대해서 더욱 자세히 알 수 있을 것이다.



근래에 와서 Python이 더욱 다양한 라이브러리의 지원과 해킹에도 용이하여 자바 스크립트와 PHP(Hypertext Preprocessor, 시작이 Preprocessor의 약자부터 시작하여 리눅스의 GNU("GNU's Not Unix!")처럼 재귀[내부순환]의 약자를 따른다.)라는 기존의 스크립트 언어가 현재 딸리는 추세이다. 하지만 자바스크립트는 그만큼 대중에게 널리 알려졌기에 광범위하게 사용되고 있고 자바스크립트나 PHP로 개발한 애플리케이션의 취약점도 더 많이 캐치할 수 있다. 그래서 취약점 분석을 하는 데에도 더 유용하다. 개인적으로 보안상 강력하다는 파이썬보다는 자바스크립트가 계속 널리 이용되기를 바란다. 왜냐하면 보안전문가들은 해킹 사건이 자꾸 터져야 더욱 잘 먹고살 수 있다고 생각하기 때문이다.





초등학교 3학년이 되기까지도(이미 CPU는 486, 586 등 많이 업그레이드되었고 그래픽카드도 VGA이상의 고해상도를 뿌려주는 시대였다.) 필자는 대우통신의 286 XT로 흑백(좋게 보면 시력 저하에 전혀 영향을 안 끼치는 모노 해상)의 컴퓨터로 열나게 게임을 하곤 했었다. 그때 어머니의 지인을 통해 안 어느 형으로부터 286 AT 계열의 뉴텍(Newtec) 컴퓨터를 물려받기 전까지(거기다 흑백 도트 스토리지 프린터까지) 말이다. 이 미국산 컴퓨터의 키보드 타자 소리는 얼마나 요란하던지 지금의 기계식 키보드의 원조격이 아닌가 싶었는데, 실제로 찾아보니 이 뉴텍의 키보드를 알프스 백축이라고 칭하고 지금의 청축과 타건감이 동급이라고 한다. 이번 섹션의 본질을 호도하는 방향으로 글이 나아가는데, 새삼 필자의 소싯적 얘기를 꺼낸 것처럼 들릴 수도 있겠다.



여하튼 이때 필자가 사는 동네의 시장통에 위치한 가게인, 간판 이름도 아직까지 선명히 기억하는데 '코쿤 소프트'에 들려서 5.25인치의 휴대용 플로피 디스켓이 한 장 들어있던 아케이드 게임을 샀었다. 5.25”가 뭔지 알 수 있는 요즘 Z세대 이후의 독자는 매우 드물 것이다. 5.25”는 쉽게 얘기해 테이프로 음악을 듣던 시대에나 가끔 볼 수 있었던 LP 디스크 재킷이라고 생각하면 되겠다. 금융권에서는 전력과 냉방비용 절감을 위해 아직 클라우드 데이터마저도 테이프(http://www.ciokorea.com/news/39970)에 보관하고 있기는 하다. 그런데 문제는 이 5.25” 플로피 디스켓의 종류에는 2D와 2HD라는 것으로 나뉜다. 이건 또 무슨 말인가...



한 형으로부터 286 AT 컴퓨터를 물려받기 전까지 필자의 XT 컴퓨터에서는 2HD의 디스켓이 구동되지 않았다. 왜냐하면 호환성 문제였기 때문이다. 쉽게 말해 필자의 대우통신 컴퓨터의 사양이 후달렸기 때문이었다. 그래서 그 게임을 샀었던 코쿤 소프트에 가서 환불해달라고 말하기엔 나이가 어렸고, 게임이 안 돌아간다고 얘기했었다. 당시에 그 3평 정도 남짓한 컴퓨터 소프트웨어 소매점에는 30대 중후반(지금의 내 나이)으로 보이는 아저씨 한 명과 그 사원으로 보이는 누나 한 명이 있었다. 결론은 그 사장으로 보이던 아저씨가 AT기종에서만 호환이 되는 2HD 디스켓의 정품 게임을 2D의 디스켓 두 장으로 나누어 저장하게끔 소스 코드를 다시 짜서, 필자의 XT 기종에서도 그 격투기 게임이 돌아가게끔 만들어줬다는 것이다. 물론 그 게임 박스에 들어있던 매뉴얼의 게임 시나리오와는 다른 엉뚱한 방향으로 게임이 진행되었고 2명이 동시에 플레이가 가능하다고 명시되어있었지만 어째 끝까지 혼자서 싸웠다.



눈물이 나게 고마운 조처를 세상 물정 모르던 한 꼬맹이에게 해준 것이었지만 지금 생각하면, 그분이 그것을 하기 위해 한 일련의 작업을 등 뒤에서 말똥말똥 쳐다보고 있던 나에게는 신선한 충격('뭐하시는 거야, 이 아저씨... (GW or 퀙) 베이직도, 포트란도, 코볼도, 터보-C도... 아닌... 뜨헉;')이었다. 나는 그때 그분을 지금으로 치면 이른바 멘토 삼아서 초등학생 저학년이었으니, 적어도 3년만 어셈블리나 디버깅 그리고 컴파일까지 하는 것을 배우고 중학생 때부터 개발을 시작했었더라면 적어도 지금 완숙의 게임 개발자는 되어 있지 않았을까 하고 되돌아본다. 그분이 지금은 연세 60이 넘겨서 IT 분야에 몸을 담그고 있을지 모르겠지만(외국에서나 가능하다), 당시 조그마한 구멍가게의 소프트웨어 판매직종의 사장이 일개 초등학생의 희망을 지켜줌으로써 자신의 역할에 충실한 것이 이제야 일에서 가장 중요한 사명감이라는 것을 알았다.



왜 나는 이 일을 하려고 하는가에 대해 피상적으로만 생각(가족을 먹여 살리기 위해서)하는 시대는 이제 지나도 한참 지났다. 물론 경기가 주기적으로 바닥을 치고 자본주의의 한계가 드러나는 시국이지만, 분명히 필자의 어린 시절(93년도)보다는 한국이 먹고살만한 나라가 되었고 일개 회사의 엔지니어라고 하더라도 한 번은 자신이 왜 이것을 수행함으로써 어떠한 가치를 발하려고 하는지에 대해서는 고민해보고도 놀 시간이 남아돌 시대이다. 본인은 어릴 적 취미가 완성품을 즐기는 데 더 큰 의미를 두었기에 비록 지금 게임 개발자(중학생 때까지만 해도 EA 스포츠사의 게임 개발자가 되는 게 꿈이었다)가 되지 못한 거 같지만 코쿤 소프트의 그 아저씨처럼, 나의 커리어에서 항상 고객의 희망을 지켜줄 수 있는 보안 아키텍트가 되도록 노력하고 싶다.





실습 진행 화면(참조 서적의 제1부 4/5/6장 구현까지 출력 화면 - 모바일 뷰포트 렌더링)

4장 플렉스 박스를 사용한 반응형 웹 구현 화면


5장 반응성 테스트를 위한 기기 모드(iPhone 6/7/8 모바일 시각적 레이아웃) 사용 구현 화면


6장 자바스크립트를 이용한 이벤트 처리 전의 개발자 도구 활성화(main.js 파일 연동이 안되어 HTTP 404 에러 메시지 뜸)


자바스크립트를 이용한 이벤트 처리 기능 실습 완료(마우스로 미리 보기 형태의 썸네일[작은 크기의 사진]을 클릭하면 해당 썸네일의 이미지와 제목으로 업데이트함)



 

참조

크리스 아키노. (2017).  FRONT-END WEB DEVELOPMENT: The big NERD ranch guide. (2016). 한국 번역판 역자 이지은(2017). 제대로 배우는 프런트엔드 웹 개발. 서울 : BJ(비제이 퍼블릭).










 






     

매거진의 이전글 해커에게 필요한 웹 구조 해부하기 4
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari