아름답다, 인터페이스, 그리고 기술에 대하여
2022.10.21
dev
life
연차로 치면 아직 주니어 개발자 프론트엔드 개발자이지만, 정말 치열하게 경험하고, 고민하고, 성장하고자 했다. 대략 2년 전 쯤에 쓴 글도 다시 보면서 내가 이땐 이런 생각을 하면서 커가고자 했구나 재밌었다.
1년 근무한 지금, 내가 추구하는 개발자로써의 목표, 비전은 무엇일까?
또 한번 신중하게 고민하고 단어를 고르고 고른 끝에 아래 한 문장으로 정리해 보았다.
아름답고 자연스럽게 설계된 코드와 인터페이스를 통해 새로운 기술을 더 많은 사람들이 경험할 수 있도록 합니다.
이 문장 속에 내가 중요시 하는 가치와 비전이 어떻게 함축적으로 담겨있는지 나름대로 설명해보려 한다.
아름답고 자연스러운
아름답다
예쁜 것은 중요하다. ‘보기좋은 떡이 먹기도 좋다’고 아름답고 미려한 UI는 같은 서비스나 제품이더라도 더 나은 경험과 인상을 줄 수 있다. 나는 아름다운 UI를 구현하려하고 디테일에 집착한다. 좋은 UI 인사이트를 얻으면 나중에 레퍼런스로 참고할 수 있도록 기록하고 모아둔다. 다만 여기서 내가 말하는 ‘아름답다’는 것은 단순히 시각적인 아름다움만을 의미하는 것이 아니다. 사람을 보는 것과 같다. 외형적인 아름다움 뿐만 아니라 내면적인 아름다움(SW에 있어서는 코드가 될 것 같다) 또한 추구한다. 그래야 내가 만든 제품을 사랑할 수 있을테니.
아름다운 코드란 무엇일까? 여러가지 담론이 있겠지만 보편적으로 통용되는 이야기로는 단일 책임, 인터페이스 분리와 같은 SOLID 원칙을 지키고 유연성, 재사용성, 유지보수성이 높은 코드, 적절한 추상화를 통해 선언적으로 작성되어 로직을 이해하기 쉬운 코드 등등… 기준은 다양하고 정답은 없을 것이다. 다만 주니어 레벨의 내가 봐도 읽기 좋은, 잘 짜여진 것 같은 코드가 분명 있고 이를 보면 아름답게 설계되어있다고 느낀다. 좋은 코드들을 보면서 잘 설계된 코드란 무엇일지 늘 배우려 하는 중이다.
기능을 구현하는 것은 어렵지 않은 경우가 많다. 어떻게든 돌아가게 만들 수는 있다. 다만 그 코드가 관심사가 잘 분리되어있는지, 예외처리는 잘 되어있는지 등을 따져본다면 아름답고 우아한 코드를 만들기 위해서는 정말 많은 노력과 경험이 필요하다고 생각하고 개발할 때 늘 이런 생각을 염두에 두고 노력하고 있다.
1년 전에 내가 짠 코드를 지금 다시 보면 전혀 아름답지 않다고 느낀다. 구현에 급급하고 새로운 기술을 성급히 쓰느라 전체적인 큰 그림을 보지 못했던 그 때의 모습이 코드에서 보이는 것 같기도 하다. 어떻게 보면 1년 사이에 그만큼 코드를 분별할 수 있는 실력을 쌓았다는 증거인 것 같아 기분이 썩 나쁘지는 않다. 오늘 짠 코드를 나중에 다시 봤을 때에는 분명 최고의 방법이라고 생각하지 않을 것이다. 끊임없이 더 좋은 아름다운 구조의 코드를 짜기 위한 노력을 할 테니. 아름다운 UI를 아름다운 코드를 통해 구현하는 프론트엔드 개발자가 될 것이다.
+ 자연스러운
아름다운 것에 대한 이야기가 길어져서 ‘자연스럽다’는 단어를 제대로 설명하지 못한 것 같다. UI/UX 혹은 HCI를 공부했다면 디자인에서 인간 중심 사고와 심리학이 중요하게 여겨진다는 것을 알 것이다.
자연스러운 사용자 경험은 좋은 사용자 경험이다. 사용자가 의도한대로 작동하며 만족스러운 피드백을 준다. 물 흐르듯이 자연스러운 인터페이스를 경험한 사례가 있는데 정말 감탄이 절로 나왔다. 나도 그런 경험을 주는 개발자가 될 수 있었으면.
+ 디자인은 디자이너만의 점유물이 아니라고 생각한다. 프론트엔드 개발자는 어떻게 보면 초알파 테스터다. 개발하면서 누구보다도 가장 먼저 제품을 사용해보면서 사용자의 시각으로 끊임없이 피드백을 스스로 생각하고 즉각적으로 제품에 반영할 수 있는 능력이 있기 때문에 이를 능력을 가감없이 발휘할 수록 좋다고 생각한다. 그런 점에서 프론트엔드 개발은 참 매력적이라 느낀다.
인터페이스
인터페이스는 프론트엔드 개발을 한다면 익숙한 단어일 것이다. 인터페이스의 사전적 정의를 보면 아래와 같다.
interface is a shared boundary across which two or more separate components of a computer system exchange information. The exchange can be between software
, computer hardware, peripheral devices, humans, and combinations of these.
(위키백과 - Interface)
서로 다른 두 컴포넌트가 맞닿아있는 접점과 경계면. 사용자 인터페이스(UI)부터 시작해서 API(Application Programming Interface), 타입스크립트의 Interface와 같이 두 요소는 소프트웨어, 하드웨어 혹은 사람이 될 수도 있다. 즉 좁게는 컴포넌트 끼리 정보를 주고받는 규약이고 개념의 범위를 넓힌다면 사람과 사람 사이의 소통도 인터페이스로 볼 수 있을 것 같다. 인터페이스를 통해 우리는 서로 소통한다. 인터페이스를 통해 코드도 서로 소통한다.
나는 서로 다른 두 가지를 아름답게(=잘) 이어주는 것에 큰 흥미와 재미를 느낀다.
유저 인터페이스(UI)
사용자(User)와 서비스가 맞닿아있는 부분을 개발하는 것은 얼굴을 개발하는 것과 다름 없다. 때문에 프론트엔 개발자라면 사용자에 대한 진지한 고민이 필요하다. 제품과 서비스의 사용성을 개선하기 위해 사용자들의 목소리를 듣고, 소통하고, 좋은 경험과 가치를 어떻게 전달 할 수 있을지 고민해야한다.
상당수의 내 동기들은 논리적인 사고가 요구되는 BE나 요즘 핫한 ML/AI를 선택하는 것 같다. FE를 고르는 경우는 흔한 사례는 아닌 것으로 보인다. 나도 ML과 BE를 했보았으나 하면서 FE 개발을 할 때 만큼의 짜릿한 재미와 열정을 느끼지 못한 것 같다. 내가 정말 열정을 가지고 있고 나의 장점을 살리면서 뛰어난 성과를 낼 수 있는 분야는 사용자와 맞닿아있는 유저 인터페이스를 설계하고 기술적으로 구현하는 Front End라고 생각한다.
컴포넌트의 인터페이스
리액트에서 컴포넌트를 역할과 책임을 고려해 잘 분리하는 것이 중요한데, 분리할 때 인터페이스를 고려해야한다고 느낀다.
객체지향적인 언어에서는 인터페이스를 통해 독립된 모듈로 소프트웨어를 개발할 수 있도록 도와준다. 컴포넌트 역시 마찬가지이다. TypeScript의 interface로 컴포넌트의 Props를 잘 작성하면 이 컴포넌트가 어떤 것에 종속되어있는지, 결합도가 너무 높지는 않은지 체크를 하면서 컴포넌트를 잘 분리하는 것을 도와주고 재사용성을 높여준다. 컴포넌트 내부를 보지 않고도 사용하는 쪽에선 인터페이스를 보고 어떻게 동작할지 예상 가능해야 한다. 인터페이스를 통해 도메인 요소를 분리하고 복잡한 비즈니스 로직을 감출 수 있게 한다. 잘 만든 인터페이스를 통해 변경에 유연한 컴포넌트를 만들 수 있는 이유이다.
개발자와 디자이너 사이의 인터페이스
나는 나 스스로를 개발자와 디자이너의 피가 동시에 흐르는 사람이라 부르고 싶다. 어린 시절부터 가장 좋아하고 잘하던 두 가지가 컴퓨터 다루기와 그림 그리기였던 나는 대학에 와서도 전산학과 산업디자인을 전공했고, 프론트엔드 개발자로써의 꿈을 키워나가고 있으니.
인터넷에서 흔히 개발자와 디자이너(혹은 기획자)가 싸우는 밈을 볼 수 있는데, 이는 이해와 관점의 차이 때문에 발생하는 커뮤니케이션 문제라고 본다. 사용자 경험에 대한 지식을 바탕으로 나의 주장에 대한 명확한 이론적 근거를 제시할 수 있는 개발자라면 이런 문제를 해결하고, 오히려 팀이 더 큰 시너지를 내도록 만들 수 있을 것이다. 나는 디자이너분들과 적극적으로 커뮤니케이션하고 기술적인 지식을 바탕으로 디자인에도 일정 부분 제안을 한다. 해커톤에 나갈 때에는 필요에 따라서 디자이너 포지션을 겸하는 프론트엔드 개발자로 출전하기도 한다. 개발자 뿐 아니라 디자이너, 기획자 등 다양한 직종의 사람들과 소통하는 것을 즐거워하고 개발자-디자이너 사이를 이어주는 ‘인터페이스’가 될 수 있는 것은 나의 큰 강점이 아닐까.
김주호 교수님 KIXLAB에서 연구 인턴으로 수행했던 연구주제도 Designer Developer Communication을 도와줄 수 있는 AI intelligence level framework을 설계하는 것이었다. 마이크로소프트와 구글, 애플의 논문, 디자인시스템을 보면서 어떻게 하면 더 디자이너와 개발자가 통일된 언어(레벨)로 AI infused product를 설계할 수 있을지 고민했다. 디자이너와 개발자라는 두가지 관점을 가진 내게 정말 즐거웠던 연구 주제였던 기억이 난다. 디자인적 사고방식(Design Thinking)을 가지면서 기술에 대한 이해를 하는 개발자가 되고자 한다.
새로운 기술을 더 많은 사람들에게
현재 근무하는 회사에서 나는 블록체인과 AI의 융합을 통해 어떤 임팩트를 사람들에게 줄 수 있을 지 많은 상상을 했고, 이를 사용자들에게 전달할 수 있는 웹 프로덕트들을 맡아 개발했다. 팬과 크리에이터를 위한 토큰 보상 SNS 서비스, 오픈소스를 원클릭으로 배포할 수 있는 서버리스 클라우드 플랫폼, NFT 민팅 페이지, React를 이용한 색다른 프로젝트(NFT 이미지 생성 툴, 인터랙리브 갤러리 키오스크)에 오너십을 가지고 다양한 시도를 하고 실패도 겪어보면서 지금껏 없던 많은 프로덕트들을 세상에 선보였다. NFT, Web3와 같은 아직 익숙하지 않고 이해하기 어려운 기술들을 더 쉽고 재밌게 전달할 수 있도록 하는 것은 현회사가 집중하고 있는 시장(Crypto Scene)에서 프론트엔드 엔지니어링으로 해결해야하는 과업이라고 생각한다. 때문에 아직 사용하기 너무나 불편한 암호화폐 지갑이라던지 (흔히 Dapp이라고 부르는)블록체인 기술을 이용한 프로덕트들을 더 편리하고 사용자 친화적인 인터페이스를 가진 제품으로 만드는 것에 집중했다. 새로운 기술을 통해 ‘0 to 1’의 가치를 만드는, 기술의 임팩트를 더 많은 사람들이 편리하게 이용할 수 있도록 하는 사람이 되고 싶다.
임팩트를 주기 위한 방법으로 내가 Web을 선택한 이유는 Web에 무궁무진한 가능성이 있다고 생각했기 때문이다. 단순히 정적인 페이지를 보여주던 (Web 1.0) 시절부터 JavaScript, jQuery, React와 같은 기술로 점점 인터랙티브한 동적인 기능들이 추가되고 Electron, PWA 등을 통해 네이티브 영역까지 확장 가능한 수 많은 가능성을 품은 웹 포텐셜을 가지고 있어 보였다. 하루가 멀다하고 새로 등장하는 프론트엔드 웹 프레임워크가 웹이 계속 발전하고 있다는 증거 아닐까. 그렇기 때문에 스스로도 계속 공부해야하고 발전해야한다. 깊은 고민없이 급변하는 트렌드를 따라가는 형태는 지양해야겠지만, 새로운 기술은 이전보다 사용자(혹은 개발자)에게 더 좋은 경험을 제공하기 위한 목적으로 탄생하고 변화하기 때문에 프론트엔드 개발 트렌드를 지켜보고 follow up하는 것이 힘들지 않고 재밌을 따름이다. 많은 실력을 쌓은 후 트렌드를 따라가는 사람이 아닌, 이런 기술 트렌드를 이끄는 사람이 될 수 있는 것도 하나의 나의 목표이다.
짧은 한 문장으로 나를 소개하려니 어려웠다. 내가 가지고 있는 수많은 요소들, 그 중에서도 내가 성장하고 싶은 이상향, 나의 꿈과 비전을 중심으로 정리할 수 있는 시간이 되어 좋았다.
나중에 이 글을 다시 보면서 빠르게 성장하면서도 방향을 잘 잡고 있는지 확인할 수 있기를.