[알·쓸·상·회: 알아두면 쓸모있고 상관도 있는 회사와 업계 용어 알아보기]
오성 : 개발팀과 회의 마쳤어요. 분명 한국어인데… 말이 너무 어렵네요.
동료 : 우리도 코딩을 배워야 할까 봐요~
오성 : 앱에 간단한 기능이 추가되면 좋을 것 같은데, 시간이 좀 걸릴 것 같아요.
동료 : 개발자가 많이 하는 말이 “그러니까 그게 왜 안되냐면요…”래요! 공감되네요.
오성 : (울상지으며) 개발은 너무 어려워요!
우리 오성씨만이 아닐거예요. 개발 용어만 나오면 “내 이야긴 아니야"라며 백기를 드는 분 계시죠? 코딩이 뭔지 모르겠지만, 아무튼 생각하면 머리가 지끈해요. 그런데 조금만 살펴보면, 의외로 친숙한 단어가 많더라고요. 매일 쓰는 PC와 스마트폰, 우리 일상과 가까운 만큼, IT 용어 역시 알고 보면 가까이 있다는 말씀!
개발자가 어떤 일을 하는지, 매일 보는 웹 사이트가 어떻게 구성되는지만 알아도 개발자 동료와 대화하기 훨씬 쉬울 거예요.
오늘 <알·쓸·상·회>에서는 컴퓨터를 사용하며 한 번쯤은 들어봤을 법한 IT 기초 개념을 쉽게 풀어볼게요!
나는 오늘도 쿠키 조각을 떨어트렸다…
“로그인 정보를 저장하시겠습니까?”
기억력 좋은 브라우저 덕분에, 로그인을 1초 만에 해본 경험 있으시죠? 컴퓨터 속에는 로그인 정보처럼 '내가 한 행동을 저장하는 임시 저장소'가 있어요. 캐시와 쿠키가 대표적인 예인데요. 컴퓨터가 빠른 결과물을 출력하기 위해 데이터를 보관하는 장소예요.
캐시 ☞ 정보를 '빨리' 불러오기 위해, 웹 사이트 속 요소를 임시 저장하는 저장소
쿠키 ☞ 사용자의 '편의'를 위해, 하드디스크 속에 저장된 방문 기록
캐시는 웹 사이트 요소를 사용자 컴퓨터에 잠시 보관하는 곳이에요. 예를 들어 잡플래닛 사이트에 접속한다면, 잡플래닛 서버에서 로고나 광고 이미지 같은 요소를 불러와야 하는데요. 잡플래닛에 처음 방문했을 때 컴퓨터는 캐시에 똑같은 데이터를 임시 보관해요. 그럼 재방문을 해도 접속할 때마다 불러오지 않으니 빠르게 접속할 수 있어요. 컴퓨터가 일을 여러 번 하지 않아도 되죠.
반면, 쿠키는 내 컴퓨터에 저장되는 방문 내역을 말해요. 로그인할 때 아이디와 비밀번호를 저장하거나, ‘오늘 하루 팝업창 보지 않기’ 버튼을 눌러보신 적 있을 거예요. 그럼 쿠키는 이 '누른 기록'을 얼마간 갖고 있어요. 웹 사이트에 방문해 행동한 기록을 보관하는 거죠. 혹시 바삭한 쿠키를 생각하셨다면, 맞습니다! 동화 '헨젤과 그레텔' 속 주인공이 길을 잃지 않기 위해 쿠키 조각을 떨어트린 것처럼, 인터넷 속에서 정보를 저장해 경로를 찾는다는 의미에서 유래된 단어예요.
쿠키와 캐시를 삭제해본 경험이 있나요? 두 가지 모두 편리함을 위해 생겨났지만, 개인정보를 저장하고 있기 때문에 정보 유출에 주의를 기울여야 합니다. 브라우저 설정에서 쿠키와 캐시를 쉽게 삭제할 수 있어요.
프론트엔드는 외과의사, 백엔드는 내과의사?
개발자와 소통할 일이 생겼다면, 상대방의 역할을 제대로 파악하고 있어야겠죠. 개발자는 크게 '프론트엔드 개발자'와, '백엔드 개발자'로 나눌 수 있어요. 둘을 나누는 기준은 결과가 외부로 보이느냐, 보이지 않느냐의 차이인데요. 외과의사가 몸 외부의 기관을 다룬다면, 내과의사는 보이지 않는 몸속을 다루는 것처럼 말이죠. 개발자의 이름에서 각각의 역할을 짐작할 수 있어요.
프론트엔드 ☞ 보이는 화면의 기능을 구현
백엔드 ☞ 보이지 않는 데이터와 서버를 관리
프론트엔드(Front-end) 개발자는 웹 사이트의 얼굴을 만드는 역할이에요. 눈으로 볼 수 있는 영역을 만들고 기능을 구현합니다. 화가가 물감으로 도화지에 그림을 그리듯, 프론트엔드 개발자는 프로그래밍 언어를 입력해 화면을 만들어요. 사용자가 직접 눈으로 보는 곳을 다루는 만큼 디자이너와 협업하며, 디자인으로 구상한 결과물을 출력해내는 역할이죠.
<컴퍼니 타임스> 사이트를 예로 살펴봅시다. 프론트엔드 개발자가 명령을 시작합니다. 큰 배너는 왼쪽에 들어가고, 오른쪽엔 2개의 기사를 노출하라는 내용을 프로그래밍 언어로 입력하는 거죠. 그럼 컴퓨터는 위 화면과 같은 레이아웃을 출력해요.
반면, 백엔드(Back-end) 개발자는 화면 뒤 숨겨진 정보들을 관리합니다. 대표적으로 ‘서버’와 ‘데이터베이스’를 다루는데요.
서버란 정보를 저장해두고, 사용자가 특정 행동을 하면 그에 맞는 정보를 제공하는 곳이에요. 위 화면에서 기사 하나를 클릭하면 다른 기사 내용이 아닌, 내가 보고싶은 기사가 나타나야겠죠. 이때 불러올 기사가 서버에 저장돼 있어요.
한편, 웹 사이트에서 유저가 클릭, 검색, 구매 등 특정 행동을 하면 모두 기록으로 남는데요. 그 기록들이 쌓인 곳을 데이터베이스라고 불러요. 백엔드 개발자는 여기에 남겨진 무궁무진한 데이터를 관리하고 더 나은 사이트를 만들기 위해 분석하는 역할이에요.
지금 보고 있는 이 화면, 어떻게 만들었을까?
개발자의 모니터 화면을 본 적 있나요? 다른 세계와 교신하듯, 검은 화면에 어려운 문장을 입력하는 모습이 떠오를 텐데요. 프로그래밍 언어를 입력하고 있는 거예요.
드라마 '스타트업' 중 개발자의 노트북 화면 (자료=TVN)
인간은 한국어, 영어, 프랑스어, 중국어 등 다양한 언어로 대화하죠. 개발자가 컴퓨터와 소통하는 언어도 여러 가지가 있어요. 앞서 개발자의 종류를 알아봤는데요. 프론트엔드 개발자는 HTML, CSS, Javascript라는 언어 3개를 필수로 사용해요. 백엔드 개발자는 PHP, Node.js, C++, Java, Python, Javascript 등 여러 언어를 사용하고 있고요. 언어마다 만들 수 있는 프로그램은 조금씩 달라요.
인터넷 세상을 돌아다니다 보면 프론트엔드 개발자가 사용하는 HTML, CSS, Javascript를 본 적이 있을 거예요. 웹 사이트를 만드는 프로그래밍 언어인데요. 지금 읽고 있는 기사 화면도 세 가지 언어로 구성하고 있어요.
HTML ☞ 웹 사이트의 구조를 형성
CSS ☞ 색상, 글꼴 등의 스타일을 입힘
Javascript ☞ 움직이는 동작을 활성화
세 언어는 업무 분담이 철저합니다. HTML은 화면에서 텍스트나 이미지 파일을 쌓아서 페이지의 구조를 만드는 역할이에요. 여기에 옷을 입히는 것처럼 폰트, 여백, 크기 등 디자인을 설정하는 것이 CSS라는 언어고요. Javascript는 버튼을 클릭하거나, 로그인을 하는 등 동적인 기능을 활성화해주는 역할이라 할 수 있어요. CSS는 꾸며주는 역할이기 때문에, 없애면 아래처럼 서식이 없는 텍스트만 보이게 돼요.
CSS를 제거한 네이버 홈 화면. 삭막하다! (자료=네이버)
UI와 UX는 뭐가 달라?
“이 앱은 사용하기 정말 편리해”
모바일 앱을 사용하다 보면 이런 말을 종종 나눕니다. '앱이 편리하다'는 원하는 행동을 쉽게 할 수 있다는 걸 의미하죠. 아이콘이 잘 보여 클릭하기 좋거나, 검색을 쉽게 할 수 있거나, 물건을 편리하게 구매할 수 있는 것처럼요. 이런 느낌은 훌륭한 UI/UX 서비스를 만났을 때 생겨나는데요.
UI (User Interface) ☞ 제품과 서비스를 접할 때 마주하는 시각적인 요소
UX (User Experience) ☞ 사용자의 전체적인 경험을 개선하기 위한 설계 영역
UI는 사용자가 보는 레이아웃, 모양, 색상 등 시각적 요소를 고려한 모든 매개체를 말해요. 예를 들어 바로가기 버튼은 어디에 둘지, 로고 색깔은 무엇인지 결정하는 일이에요. 프론트엔드 개발자는 더 나은 UI를 위해 웹 사이트의 구조를 만들고, UI 디자이너는 색상이나 모양을 통해 사용자가 서비스를 편리하게 사용할 수 있도록 디자인해요.
반면, UX는 사용자가 기업 서비스를 경험하는 과정에서 어떤 것을 느끼고, 행동할지 설계하는 작업을 말해요. 예를 들어 금융 앱 ‘토스’는 기존 은행 앱과 달리 회원가입부터 로그인, 계좌 연결, 송금까지 과정을 편리하게 만들었다고 평가받아요. 또 복잡한 금융 용어 대신 친숙한 일상 용어를 사용해서 금융 앱 중 UX를 개선한 좋은 사례로 꼽히고 있죠.
오늘은 컴퓨터를 사용하며 한 번쯤은 들어봤을 법한 IT 기초 개념을 알아봤어요. 스쳐 지나갔지만 익숙한 용어도 보이죠? IT 업계에 대한 마음의 장벽을 깬 시간이 되었길 바랍니다. 다음 시간에도 직장 생활 속 알아두면 좋은 비즈니스 용어로 찾아올게요.