DEVOCEAN

<Gen.View | FE - #0> 비개발 직군의 Frontend 업무 적용 스토리

AI Data ML서비스개발팀

김우영 (ddsksw01@sktelecom.com)

[Gen.View | FE] 시리즈에서 다룰 (다룬) 기술 Stack

* Web
    * Svelte (w/ Sveltekit)
    * Tailwindcss (w/ DaisyUI)
* App
    * Flutter
* Etc
    * AWS, Netlify
    * Docker, Docker-compose
    * GitAction & Pulumi (IaC)

Frontend 개발자가 아닌데 굳이 해당 분야를 공부해야 할 필요가 있을까요?

Frontend 분야에 대한 인식 변화

편견

개인적으로는 불과 몇년전까지 Frontend 분야에 대하여 막연히 Web Site 를 만드는 직군으로서, Backend 나 AI 관련 직무와는 업무적으로 서로 크게 관여할 일이 많지 않을 것이라고 생각했었습니다.

또한 제대로 공부해보지는 않았었지만, 굉장히 지루해 보였던 HTML 과 CSS 를 다루며 다른 개발 직군과는 다소 거리가 있는 직군이라는 편견을 가지고 있었습니다.

이로 인해, ML/DL 모델링 직군으로 입사했던 상황에서 Frontend 분야는 커리어 관점에서나, 회사에서의 업무 관점에서 크게 접할 계기가 없을 것이라는 판단을 했었습니다.

인식 변화

SKT 입사 이후, 담당하고 있는 대부분의 프로젝트가 Frontend 분야와 직간접적으로 연결되어 있다는 것을 깨닫는 데는 긴 시간이 걸리지 않았습니다.

단순하게는 속해 있는 프로젝트의 성공이 Web/App 완성도에 따라 좌지우지될 수 있을 정도로 서비스 관점에서 큰 영향력을 가지고 있었고,

직접 개발한 ML/DL 기반 모델의 추천 정보가 최종적으로 고객에게 더 효과적으로 전달될 수 있도록 모델 API 및 화면 Spec 을

Frontend 개발자분들과 협의하는 과정을 수차례 경험하며 해당 분야에 자연스럽게 관심을 가지기 시작했습니다.

또한, 고객에게 직접적으로 노출되는 서비스 화면이 아니더라도,

사내 구성원들이 사용하는 크고 작은 Admin Web 은 서비스를 안정적으로 운영해야하는 백오피스 관점에서 빼놓고 생각할 수 없는 요소였습니다.

첫 개발 경험

Frontend 분야에 처음 관심이 생긴 이후, 초기에는 Python 기반의 간단한 Library 를 학습하며 업무에 조금씩 적용하기 시작했습니다.

전통적인 Web 개발 방식과는 다소 거리가 있었지만, 익숙한 개발 언어를 사용하며 단기간에 원하는 기능을 화면에 적용하는 경험을 하며 한동안 재밌게 이것저것 만들어 봤던 것 같습니다.

구체적으로는, Streamlit 이라는 Library 를 사용했고 Frontend 기초 지식 학습을 병행하며,

Hydralit 을 통해 GNB (Global Navigation Bar) 기반의 Multi-page 구조를 구현하며 그럴듯해 보이는 Admin Web 을 구축해보기도 했습니다.

해당 Admin Web 은 추후 기능이 고도화되며 A. 큐피드 서비스에 활용되는 주요 모델들의 버젼 및 배포 관리에 핵심적으로 활용되었습니다.

(추후, Python 기반의 Web Library 인 Streamlit 에 대한 게시글을 업로드할 예정입니다.)

그 이후

Streamlit 이나 Gradio 와 같은 Python 기반 Web Library 는 쉽고 빠르게 필요한 화면을 개발할 수 있다는 큰 장점을 가지고 있지만,

반대로 Web-application 개발 측면에서 여러가지 치명적인 단점을 가지고 있습니다.

UI 컴포넌트가 제한되어 있고 커스터마이징하기 어려울 뿐 아니라, 복잡한 Web-application 을 구현하거나 Js 기반 고도화된 기능을 구현하기에는 적합하지 않았습니다.

이로 인해, Svelte 라는 Js 기반 Web Framework 에 대한 학습을 본격적으로 시작하였습니다.

(Svelte 와 관련된 학습 과정은 해당 게시글 직후부터, 시리즈 형태로 게시글을 업로드할 예정입니다.)

많은 화면 개발 경험을 해본 상황은 아니었지만, Web 개발에 흥미가 생기다보니 자연스럽게 App 개발에도 관심을 가지게 되었습니다.

현재 시점에서 돌이켜 생각해보니 시기적으로도 App 개발을 학습하기 좋은 시점이었던 것 같습니다.

기존 Native App 개발 방식에 비해 진입장벽이 확연히 낮은 React-native 와 Flutter 같은 Cross-platform App 개발 Framework 들이 유행하고 있었기 때문입니다.

개인적으로 조금더 매력적인 선택지로 보였던 Flutter 를 선택하였고, Mobile 환경에서의 Test 가 필요한 시점마다 PoC App 을 만들었습니다.

공식적으로 App Store 에 배포하고 출시해본 것은 아니지만, 동료들에게 Apk 를 전송하고 개발한 App 사용성과 아이디어에 대한 피드백을 듣는 경험은 굉장히 흥미로웠습니다.

새로운 기회

Frontend 개발 역랑이 어느정도 갖춰진 상태라면, Frontend 직무가 아닌 구성원도 아래와 같은 강점을 가질 수 있습니다.

1. 좋은 아이디어가 떠오르면, 곧바로 눈에 보이는 구현물 형태로 제작할 수 있다.

2. 다수의 구성원이 사용해 볼 수 있도록 개발한 Web 구현물 기반의 의견 피력은 기획서나 PPT 형태 제안서 기반의 의견 피력보다 확연히 설득력이 높다.

3. 이를 통해, 서비스를 개선할 수 있는 방법을 제시하거나, 더 나아가 새로운 서비스를 효과적으로 제안할 수 있다.

즉, 자신이 가진 아이디어를 보다 적극적이고 효과적인 방식으로 제안할 수 있습니다.

이를 통해 예상치 못한 시기에, 예상치 못한 계기로 새로운 기회를 얻을 수 있습니다.

개인적으로는 최근 참여했던 사내 해커톤 대회 (AI Challenge) 에서 새로운 형태의 LLM Agent 작동 방식을 Web 형태로 구현한 제출물을 기반으로 최우수상을 받을 수 있었고,

현재 진행하고 있는 프로젝트 (Gen.View) 를 구성원 누구나 활용할 수 있는 Demo 기능을 포함한 Web 형태로 제작하여 프로젝트 당위성을 피력하며 본격적으로 과제를 세팅할 수 있었습니다.

위의 강점을 제외하고도 비개발 직군으로서 Frontend 분야를 학습하며 여러가지 긍정적인 경험을 할 수 있었습니다.

개발을 처음 접하는 입장에서, 개인적으로는 작성한 코드의 작업물이 바로 눈에 보이는 Frontend 분야의 특성상, 시각적으로 흥미로운 부분이 많았기에

(Backend 분야를 포함한) 개발 전반에 대한 막연한 두려움이 사라졌습니다.

또한, Web 에 대한 이해도가 높아지니 보다 고도화된 형태의 크롤링 작업을 진행할 수 있었고,

기획/UI/UX 등 타 직군 구성원분들과의 커뮤니케이션을 진행함에 있어서 기존보다 훨씬 수월해진 점을 체감할 수 있었습니다.

그래서 무엇을 만들었는데요?

Gen.View (2024~)

Gen.View 란?

"생성형 모델 (LLM 등) 을 통해 Context 가 반영된 Contents 를 생성하고, 이를 A. 화면에 필요한 개인 맞춤형 View 로 가공하여 고객에게 제공한다" 라는 목표를 가진 프로젝트입니다.

금년도에 Gen.View 를 통해 생성된 이미지를 일부 상품의 오퍼링 이미지로 적용했으며, A. 홈 화면에 최초 제공되는 개인 맞춤형 메시지 (선톡) 를 생성하는 서비스를 제공하고 있습니다.

Gen.View Console

고객에게 개인화된 View 를 제공하기 위해 A. 기획자/마케터 구성원분들께서 생성형 모델 기반의 실험을 진행하시거나,

A. 서비스와 연결된 Prompt & Context 를 설정할 수 있도록 구성된 Admin Web 입니다.

Frontend 전문가가 아니기 때문에 Console 완성도 측면에서 부족한 부분이 많지만,

(열심히 학습하고 개발하여) 운영상 필수적인 기능이 구현된 상태이며 실제 서비스되고 있는 Gen.View Backend API 와 연동되어 있는 상태입니다.

보안상, 많은 화면 예시를 포함하지는 않았습니다.

Gen.View Console 홈 화면

텍스트 & 이미지 생성 실험 화면

이미지 생성 및 후편집 (Crop, Opacity, Blur) 기능, CDN 연동 화면

Prompt 관리 화면

Frontend 개발 직군이 아닌 비전문가가 Frontend 분야를 학습하는 과정에서 경험할 내용들을 이어질 [Gen.View | FE] 시리즈에서 공유해드릴 예정입니다.

잘못된 내용에 대한 지적 사항이나 문의 사항이 있다면 언제든지 편하게 연락해주세요!