내가 생각하는 프론트엔드의 가치

제목을 읽었다면 보통 웹을 생각하고 게시글을 보러 들어온 사람이 많을 것으로 예상한다. 하지만 프론트엔드와 백엔드는 딱히 웹에서만 다뤄지는 개념이 아니며, 생각보다 여러 관점에서 해당 관계를 찾아볼 수 있다. 개인용 컴퓨터가 흔해지기 전에 주로 사용되던 메인프레임¹과 터미널²도 일종의 백엔드와 프론트엔드 관계로 볼 수 있다. 사용자는 터미널을 통해 메인프레임에 데이터를 입력하고, 메인프레임은 입력받은 데이터를 이용해 막대한 양의 작업을 처리하여 그 결과를 다시 터미널에 출력한다. 넓은 의미로 생각했을 때, 실질적인 작업이 이루어지는 무언가를 백엔드라고 한다면 그 작업을 처리하기 위한 명령을 받아들이거나 처리된 결과를 표현하는 무언가를 프론트엔드라고 할 수 있는 셈이다. 이 때 프론트엔드는 꼭 그래픽 사용자 인터페이스의 형태로 나타날 필요는 없다. 일례로 LLVM와 Clang을 들 수 있다. 하지만 이번 글에서는 이런 특수한 경우가 아니라, 좀 더 일반적인 이야기를 하려고 한다.

컴퓨터의 역사를 흝어보자면, 초창기의 용도는 원어가 가지고 있는 뜻인 ‘계산’에 치중되어있음을 알 수 있다. 일반적으로 세계 최초의 컴퓨터라고 알려져 있는 에니악(ENIAC)은 탄도 계산을 위해 개발되었고, 이후 수소폭탄 관련 계산이나 몬테 카를로 방법³ 시뮬레이션 계산 등에 이용되어 계산에 걸리는 시간을 획기적으로 줄여주었다. 자잘한 역사가 중요한 건 아니고, 우리가 주목해야 할 사실은 당시 컴퓨터를 사용하던 사람들이 컴퓨터 그 자체와 자신들이 하는 작업에 관해 필요한 만큼의 수준의 지식을 이미 가지고 있었다는 점이다.

시간은 흐르고 기술은 발전하여, 컴퓨터의 크기나 가격은 발명 초기와 비교하자면 미안할 수준으로 줄어들었고, 성능은 당시 세대의 사람들이 상상도 하지 못 할 정도로 늘어났다. 하지만 개인적으로 이런 정량적인 차이보다 더 놀라운 것이 바로 ‘컴퓨터를 사용하는 사람의 변화’라고 생각한다. 과거에는 처리하고자 하는 작업 분야에 대한 선행 지식이 있는 사람만이 컴퓨터를 사용하였지만, 요즘에는 작업의 자세한 처리 과정을 모르는 사람이라도 키보드 타자 몇 번, 마우스 클릭 몇 번만으로 원하는 결과를 얻어낼 수 있다. 추상화(Abstraction)가 제공하는 세상의 아름다움이다.

인간-컴퓨터 상호작용

1963년 아이번 서덜랜드⁴의 스케치패드⁵와 1968년 더글라스 엥겔바트⁶의 마우스 발명은 그래픽 사용자 인터페이스 연구의 시작을 알리는 출발점으로 볼 수 있다. 이후 1979년 발생한 스리마일 섬 원자력 발전 사고가 인간/기계 인터페이스의 약점으로 인한 사용자의 실수라는 사실이 재발견되며⁷ 인간-컴퓨터 상호작용(Human-Computer Interaction, HCI)이 하나의 학문 분야로 자리잡게 되었다. ACM SIGCHI⁸의 인정을 받은 HCI 교과과정 권고안⁹에 따르면, HCI는 ‘인간이 사용하기 위한 대화형 컴퓨팅 시스템의 설계, 평가 및 구현과 관련된 학문이며, 이를 둘러싼 주요 현상에 대한 연구’로 정의된다. 이전까지는 그저 정해진 기능을 정확히 수행하기만 하면 되었던 컴퓨터는 이제 사용자가 정보를 더욱 알아보기 쉽게 출력하고, 사용자의 의도를 보다 고차원(전산학에서의 high-level)적으로 해석하여 입력으로 받아들이는 것에도 신경을 써야만 하게 된 것이다.

이러한 접근 방식의 상품성을 누구보다도 빠르게 알아채고 자사의 제품에 적용한 곳 중 한 곳이 바로 애플이다. 1987년 발간된 ‘Apple Human Interface Guidelines: The Apple Desktop Interface’¹⁰의 첫 장인 ‘철학(Philosophy)’에서 애플은 사용자 친화적, 그리고 사용자 중심이라는 개념을 제시하며, 컴퓨터를 대하는 사용자의 입장을 다음과 같이 묘사하고 있다:

People aren’t trying to use computer-they’re trying to get their jobs done.
사람들은 컴퓨터를 사용하려고 하는 것이 아니라 일을 끝내려고 하는 것이다.

전문적인 지식을 가지고 있었던 소수의 교육된 사람들만이 사용할 수 있었던 컴퓨터가 일반인에게도 익숙한 개념을 이용하여 삶 곳곳에 스며들 수 있었던 것은 이러한 사용자 중심 설계의 필요성이 점차 대두되었기 때문이다. 이러한 움직임을 보인 것은 학계도 예외가 아니었는데, UX의 창시자로 여겨지는 도널드 노먼¹¹의 ‘User Centered System Design’¹²을 통해 사용자 중심 설계라는 개념이 널리 유명해지며 개발자/디자이너와 최종 사용자를 분리하여 생각하는 방식이 점차 널리 퍼지게 된다.

프론트엔드의 분화

사용자 중심 설계가 대두되며, 소프트웨어는 개발할 때 편하게 작업하는 것보다 최종 사용자가 편하게 사용하는 것에 중점을 두게 된다(적어도 이론상으로는 말이다). 물론 2022년 현재 개발자를 최종 사용자 층으로 생각하는 ‘개발자 경험(Developer eXperience)’이라는 용어가 주목받고 있지만, 근본적으로 사용자의 특성을 파악하고 그에 맞는 제품을 설계하는 것은 똑같다고 볼 수 있겠다.

컴퓨터가 발전하며, 진행하고자 하는 작업에 대한 선행 지식을 가지고 있지 않은 사람(이하 일반인)도 컴퓨터를 사용하게 되었다는 점이 놀라운 일이라 기술한 바 있다. 당연하게도 개발자들은 일반인을 목표 고객으로 인식하게 되었으며, 일반인들이 소프트웨어를 편하게 사용할 수 있도록 개발하는 방법에 대해 고심하게 되었다.

일반인들이 소프트웨어를 사용하여 작업을 처리하기 위해서는 크게 다음의 두 가지의 문제를 해결하여야 한다:

1. 구현 모델과 멘탈 모델의 간극¹³
2. 사용자가 해결하고자 하는 실세계의 문제

2번의 경우 컴퓨터가 발명된 이유 그 자체라고 생각해도 무방하다. 과거부터 시작하여, 물론 현재까지도 컴퓨터의 존재 목적이자 최대 관심사라고 할 수 있다. 성능이 비교적 미약하던 초창기에는 은혜로운 기계님이 대량의 문제를 인간보다 정확하고 빠르게 처리하실 수 있게 돕는 것이 컴퓨터 사용자들의 일이었다. 그런 일은 일정 수준 이상의 지식을 가진 사람에게만 가능했고, 이들의 멘탈 모델은 구현 모델과 별반 다르지 않았다.

하지만 컴퓨터의 성능이 비약적으로 높아지고 일반인이 사용자의 범주에 차차 속하게 되며, 주 사용자층의 멘탈 모델과 구현 모델의 간극이 점점 벌어지게 된다. 하나의 소프트웨어가 프론트엔드와 백엔드로 나누어지게 된 것은 이러한 문제가 대두되었기 때문이다. 컴퓨터가 전통적으로 해결하던 실세계의 문제를 해결하기 위해 수행하는 복잡한 작업들은 사용자에게 보이지 않는 뒷단으로 밀려났기 때문에 백엔드의 책임이 되었고, 서비스의 앞단에서 사용자와 직접 맞닥뜨리며 사용자의 멘탈 모델과 구현 모델 사이의 충돌에 대한 완충 구간을 제공하는 것은 프론트엔드가 담당하게 되었다.

프론트엔드의 존재 가치?

백엔드는 입력받은 정보를 이용하여 실세계의 문제를 해결한다는 근본적인 존재 가치가 있다. 이는 컴퓨터가 발명된 이유이며, 회사 입장에서 실제로 돈이 벌리는 파트라고 개인적으로는 생각한다. 그렇다고 해서 프론트엔드가 의미없다는 말이 아니다! 만약 그렇게 생각했으면 나는 프론트엔드 엔지니어를 지망하지도 않았을 것이고, 이런 글을 쓰고 있지도 않을 것이다. 예전에 선배분들께 이런 관점을 이야기해봤는데 그렇지는 않다고, 백엔드와 프론트엔드 둘 다 똑같이 회사에 돈을 벌어다준다고 말씀하셨던 기억이 난다. 당시에는 내가 틀린 말을 한건가 싶었지만, 생각을 거듭한 지금에 와서는 그냥 내 관점이 좀 특이한 것뿐, 틀리지는 않았다고 생각한다(물론 틀렸을 수도 있다. 학부생이 무슨 판단력이 있겠나).

자, 나는 지금 백엔드가 회사 입장에서 실제로 돈이 벌리는 파트라고 주장하고 있다. 그렇다면 당장 돈이 벌리지도 않는데 왜 프론트엔드를 소비자에게 제공해야 하는가? 무엇을 위해 돈과 시간을 들여가며 프론트엔드 인력을 따로 뽑아야 하는가? 내가 생각하는 프론트엔드의 존재 가치란 과연 무엇인가?

유용성 = 효율성 + 사용성

제이콥 닐슨¹⁴은 제품이 유용하려면 효율성(Utility)과 사용성(Usability) 둘 다를 갖춰야 한다고 말한다¹⁵(선배분들이 돈 버는 코드에 구분은 없다고 말씀하셨던 게 이 때문이 아닐까한다). 해당 문맥에서 효율성이란 제품이 실제로 ‘무엇’을 하는지를 의미한다. 사용자가 원하는 작업을 처리하는 기능이 있는지, 사용자에게 닥친 실세계의 문제를 해결할 수 있는지를 중점적으로 확인한다. 바로 위에서도 이야기했듯, 이러한 요소는 백엔드가 책임지고 처리하게 된다.

사용성이란 제품의 인터페이스를 사용자가 쉽게 배우고 이해할 수 있는지, 또 효율적으로 사용할 수 있는지를 의미한다. 낮은 사용성은 곧 사용자가 제품을 사용하는 법을 쉽게 배우거나 이해할 수 없게 만든다. 아무리 좋은 기능이 존재한다고 해도 사용할 수 없다면 이는 사실상 존재하지 않는 것으로 취급할 수밖에 없다. 반면에 높은 사용성은 탁월한 기능의 효율성을 더욱 상승시켜, 유용하고 성공적인 제품이 탄생하게 만들 수 있다는 것이다. 이러한 요소를 바로 프론트엔드가 책임지고 처리하게 된다. 그렇다면 사용성 높은 프론트엔드란 어떤 요소들로 이루어져 있을까?

사용성 높은 프론트엔드의 요소

닐슨은 1994년 249개의 사용성 문제에 대한 요인 분석을 통해 개선된 ‘사용자 인터페이스 디자인을 위한 사용성 휴리스틱 10가지(10 Usability Heuristics for User Interface Design, 이하 “사용성 기준 10가지”)’¹⁶을 제시한 바 있다. 해당 기준들은 2020년에 업데이트되었으며, 정의에 사용된 언어가 약간 개선되었고 더 많은 설명과 예시 및 관련 링크들이 추가된 바 있다. 그러나 기준 자체는 변치 않았으며, 현재까지도 그 의미를 잃지 않고 작용하고 있다.

예를 들어, ‘프론트엔드의 분화’ 파트에서도 이야기했듯 프론트엔드는 사용자의 멘탈 모델과 서비스의 구현 모델 사이에 존재할 수밖에 없는 충돌에 대한 완충 구간을 제공하는 역할도 수행한다. 이 과정에서 사용자는 필요한 정보나 상호작용 요소에만 노출되어, (이론적으로는)본인이 처리하고자 하는 작업에만 신경쓸 수 있게 된다. 이는 곧 닐슨의 “사용성 기준 10가지” 중 8번째인 ‘아름답고 깔끔한 디자인(Aesthetic and Minimalist Design)’과도 연결된다.

마지막으로, 프론트엔드는 서비스의 얼굴로써 긍정적인 첫인상을 새기는 데에 큰 영향을 미친다. 디터 람스¹⁷는 그의 디자인 10계명¹⁸에서 미적인 부분은 유용성에 반영되어야 한다고 설명하며, 이러한 시선이 더욱 발전하여 심미적-사용성 효과¹⁹를 이끌어내었다. 프론트엔드의 미려함은 사용자가 서비스를 더 유용하다고 지각하게 하여, 더 자주 사용하도록 유도할 수 있다.

결론

결국 회사 입장에서 프론트엔드는 실제로 매출이 발생하는 부분은 아니더라도, 서비스 사용을 매력적으로 유도하여 매출이 발생할 수 있는 기회를 늘리고 기업 이미지에 긍정적인 효과를 불러일으킬 수 있는 효과적인 수단이라고 볼 수 있다. 나는 이것이 프론트엔드가 회사에게 제공할 수 있는, 자신의 존재 가치라고 생각한다.

결국 프론트엔드 엔지니어를 지망하는 사람은 사용성 높은 사용자 인터페이스를 설계하고 개발하기 위해 고심하여야 할 테고, 이러한 고심을 통해 이루어진 자신의 의사결정 및 결과물(포트폴리오란 결국 이러한 것들의 집합체가 아닐까?)을 갈무리하여 기업에게 제시할 수 있다면 취업에 조금이나마 도움이 되지 않을까하는 예상을 해본다.