[CULTURE] NHN 커머스 서비스 웹 화면을 만드는 프론트엔드개발팀 이야기

 

NHN 커머스 공식 사이트, 쇼핑몰 디자인 스킨, 쇼핑몰 솔루션 관리자 화면까지. 사용자가 마주하는 모든 웹 화면은 기획과 디자인을 넘어 프론트엔드 개발이라는 작업을 통해 구현됩니다. 특히 데스크탑, 태블릿, 모바일 등 다양한 환경에서 쾌적한 사용자 경험을 제공하는 것 역시 프론트엔드 개발의 몫이죠. 오늘은 NHN 커머스의 모든 서비스 화면을 개발하는 프론트엔드개발팀 조정은 팀장님과 한승철 과장님을 만나 자세한 업무 이야기를 들려 드리겠습니다.

 

 

---

 

Q. 안녕하세요, 먼저 간단한 자기소개 부탁드립니다.

조정은 팀장 I 안녕하세요. NHN 커머스 프론트엔드개발팀을 맡고 있는 조정은입니다. 저는 샵바이 운영에 필요한 샵바이 어드민을 개발하고, 샵바이 shop API를 통한 스킨 제작 및 가이드 작성과 NHN 커머스 홈페이지를 비롯한 다양한 사이트를 구축하고 관리하고 있습니다.

한승철 과장 I 안녕하세요, 프론트엔드개발팀 홈페이지개발파트 한승철이라고 합니다.

 

 

Q. 프론트엔드개발팀의 업무에 대해 자세히 알고 싶어요.

조정은 팀장 I 제가 담당하는 프론트엔개발팀은 어드민개발파트, 스킨개발파트, 홈페이지개발파트로 나뉘어요.

 

먼저 어드민개발파트는 쇼핑몰 어드민 시스템의 UI, UX를 설계하고 구현하는 핵심 역할을 담당하고 있어요. 쇼핑몰 운영자들이 직관적이고 효율적으로 쇼핑몰을 관리할 수 있도록 최적의 환경을 제공하는 것을 목표로 하고요.

 

스킨개발파트는 리액트 또는 자바스크립트, HTML 형태의 디자인 스킨을 개발하는 파트예요. 샵바이 shop API로 쇼핑몰에 필요한 기능을 기본 스킨에 연동할 수 있도록 함으로써 사용자들이 오로지 쇼핑몰 디자인에 집중하고 자유롭게 수정할 수 있도록 하고 있죠.

 

마지막으로 홈페이지개발파트는 NHN 커머스 메인 사이트를 비롯한 마케팅, 해드림 등의 서비스 사이트를 구축하는 파트인데요. 빠르게 변하는 시장에 맞춰 홈페이지 콘텐츠를 업데이트하고 SEO(검색엔진최적화) 대응 및 반응형 사이트 개발에 집중하고 있어요.

 

이 외에는 백오피스를 위한 프론트엔드 개발과 고도몰, 샵바이에 공통으로 제공되는 애플리케이션(마이앱, 카카오싱크, CRM 등)의 화면 개발을 담당하고 있습니다.

 

프론트엔드개발팀의 구성

 

 

Q. 프론트엔드개발팀은 어떤 방식으로 일하나요?

조정은 팀장 I 일반적으로 기획, 디자인, 개발, 테스트, 배포 프로세스로 진행되는데요. 먼저 기획, 디자인 단계에서 기획서를 꼼꼼히 살펴보고 더 좋은 UI, UX를 만들기 위해 기획자, 디자이너와 함께 상의하고요. 이후 개발 단계에 들어가면 프론트엔드에서 사용할 API 구조를 확인하고 필요하면 백엔드 개발자와 조율해 코드 작업을 진행합니다. 완성된 코드에 대해선 팀원들과 코드 리뷰를 진행하죠.

 

한승철 과장 I 코드 리뷰에 대해 자세히 말씀드리면 최소 2명 이상이 참여해 작업한 코드에 대해 좋은 부분과 개선해야 할 부분에 대해 리뷰하는 과정인데요. 의견을 남길 땐 p1~p5 같은 규칙을 써서 의견 반영에 대한 중요도를 표시하고 있어요. 예를 들면 p1은 꼭 고쳐야 하는 것, p5는 참고만 해도 되는 것 같은 것이죠. 반드시 수정해야 하는 부분은 ‘리퀘스트 체인지’로 표시하고요.

그런 식으로 코드가 개선되면 알파 서버에서 테스트를 진행하고 문제가 없으면 정식 배포되어 사이트에 반영됩니다.

 

프론트엔드개발팀의 코드 리뷰 화면

 

 

Q. 프론트엔드개발팀의 분위기는 어떤지 궁금합니다.

조정은 팀장 I 프론트엔드개발팀 내 3파트는 서로 맡은 업무가 다르더라도 네 일 내 일 없이 적극적으로 도와주는 분위기예요. 직급에 상관없이 누구나 자유롭게 의견을 내고 맡은 일은 물불 안 가리고 해낼 정도로 열정이 넘치죠. 또한 개인 역량 강화와 새로운 기술 도입을 위해 자발적으로 스터디 모임을 만들고 한 주에 한두 번 15명 정도가 모여 공부한 내용을 발표하거나 퀴즈를 내는 등 활발하게 지식을 공유하고 있어요.

 

프론트엔드개발팀의 스터디 화면

 

 

Q. 1월 고도몰 무료 디자인 스킨 20종도 오픈됐잖아요. 개발 비하인드를 빼놓을 수 없죠.

한승철 과장 I 고도몰 디자인 스킨 프로젝트는 디자인팀, 고도몰어드민파트, 서비스기획팀 모두가 동원된 첫 협업이었는데요. 초반엔 각 팀 담당자들의 용어에 대한 정의가 달라 우왕좌왕하는 부분도 있었어요. 그래서 데일리 스크럼이라는 걸 진행하면서 매일 모여 서로 간 이해의 차이를 줄여나가고 개선해야 할 부분에 대한 의견도 나누면서 함께 프로젝트를 완성해 나간 것 같아요. 개인적으론 이번 프로젝트를 통해 고도몰에 대해 자세히 알 수 있게 돼서 좋은 경험이었다고 생각해요.

 

 

Q. 지금까지 참여하신 프로젝트 중 가장 기억에 남는 프로젝트가 있다면 무엇인가요?

한승철 과장 I NHN 커머스 사이트에 공통으로 적용되는 UI 컴포넌트를 정의한 NCDS(NHN COMMERCE Design System) 개발 프로젝트가 가장 기억에 남아요. 디자인팀과의 첫 협업 작품이라 더 뜻깊었죠.

NCDS는 개발자와 비개발자가 모두 사용하는 공통 시스템이기 때문에 좀 더 쉽게 시스템을 활용할 수 있도록 하기 위해 팀원들과 많은 고민 끝에 만들어진 결과물이에요. 그렇게 개발한 시스템을 기반으로 여러 부서에서 사이트를 잘 구성해 주신 덕분에 지디웹에서 수상하는 성과도 얻을 수 있어 더욱 뿌듯했어요.

🔗 NCDS : NHN COMMERCE 디자인 시스템 살펴보기

 

조정은 팀장 I NCDS는 개발팀 안에서만 사용하는 것이 아니라 외부에서도 활용할 수 있도록 설치형 UI 키트로도 배포했어요. 이를 통해 카카오싱크, 친구톡 등의 애플리케이션 개발 기업이나 에이전시들이 각기 다른 UI가 아닌 NCDS를 기반으로 통일성 있는 어드민 화면을 만들고 일관된 경험을 제공할 수 있게 됐죠.

 

 

Q. NHN 커머스 프론트엔드 개발자로서 갖춰야 할 자질과 역량은 무엇이라고 생각하시나요?

조정은 팀장 I 먼저 본인이 맡은 업무에 대한 적극성이 중요하다고 생각해요. 잘 알면 잘 보인다고 생각하거든요. 맡겨진 업무가 간단한 기능 구현일지라도 전체적인 프로세스와 해당 기능에 대한 목적을 인지하고 개발해야 해요. 예를 들면 기획자가 특정 버튼을 붙여달라는 요청을 했을 때 그 버튼을 사용하는 타겟은 누구고 어느 단계에서 해당 버튼을 클릭하는지 전체적인 플로우에 대한 이해가 필요한 거죠.

 

그다음으로는 커뮤니케이션 스킬인데요. 저희 팀은 기획자, 디자이너, 백엔드 개발자, 프론트엔드 개발자 등 다양한 직군의 사람들과 소통을 해야 하므로 팀원들에게 항상 부끄러워하지 말라고 이야기하고 있어요. 모르면 모른다고 이야기할 줄 알아야 하고요.

 

새로운 기술에 대한 두려움이 없어야 하는 것 같아요. 프론트엔드 개발 방식은 빠르게 변화하기 때문에 한 가지 개발 방식만 고수하지 않고 다양한 개발 환경에 빠르게 적응하고 역량을 키울 수 있어야 해요. 또한 각 개발 환경에 따라 장, 단점은 무엇이고 나에게 맞는 개발 방식은 무엇인지, 프로젝트 성향에 적합한 프론트엔드 개발 스택도 선정할 수 있어야 해요.

 

마지막으로 문제 발생 시 근본적인 원인을 찾는 딥다이브 근성이 중요하다고 생각해요. 문제가 발생했을 때 주먹구구식으로 하거나 이때만을 모면하기 위한 대응을 하게 되면 추후 사이드 이펙트가 야기되고 담당자가 바뀌었을 때 디버깅에 어려움을 겪을 수 있어요.

 

프론트엔드개발팀에 필요한 역량

 

 

Q. 이를 갖추기 위한 본인만의 업무 팁은 무엇인가요?

조정은 팀장 I 자바스크립트 기본서를 옆에 두고 정독하는 것을 추천해요. 자바스크립트는 프론트엔드개발의 핵심이자 기본이거든요. 그 외에 사용하는 기술은 대부분 자바스크립트를 바탕으로 만들어진 도구이기 때문에 기본이 탄탄해야 어떤 기술이 나오더라도 빠르게 적응할 수 있어요.

요즘 프론트엔드 개발 트렌드는 정말 빠르게 변화하다 보니 조급해져서 얼마나 많은 기술을 알고 있는지에만 집중하기 쉬워요. 하지만 저는 '얼마만큼 정확하게 아는지'가 더 중요하다고 생각해요. 새로운 기술을 배울 때도 그 기술이 왜 만들어졌고 어떤 원리로 동작하는지를 이해하면서 공식 가이드를 꼼꼼히 살펴본다면 실력이 훨씬 단단해질 거예요.

 

한승철 과장 I 무엇보다 중요한 건 자신이 모르는 것을 솔직하게 인정하고 계속 배우려는 자세예요. 경력이 쌓이면 익숙한 방식에만 의존해서 더 이상 발전하지 못하는 경우가 많거든요. 그래서 저희 팀은 서로 직급이나 경력에 상관없이 솔직하게 이야기하며 성장하는 분위기를 만들어 가고 있어요.(웃음)

또 개인적으로는 기술 서적 외에 교양서적도 큰 도움이 되는 것 같아요. 개발이라는 일이 결국 사람들과 소통하며 함께 만드는 일이라서 다양한 분야의 책을 읽으며 대화하는 능력이나 상황에 대한 이해력을 키우면 협업할 때 더 좋은 결과를 만들 수 있더라고요.

 

 

Q. 프론트엔드 개발 직무의 매력이 있다면 뭐라고 생각하시나요?

한승철 과장 I 눈에 보이는 동적인 화면 콘텐츠를 개발하는 과정에서 즉각적인 만족감과 성취감을 얻을 수 있고요. 늘 새로운 기술 트렌드를 접하면서 그 기술을 내 업무에 바로 적용할 수 있고 웹을 넘어 다양한 분야에서 내가 학습한 기술을 펼칠 수 있는 점을 매력으로 꼽고 싶어요.

 

조정은 팀장 I 저희 팀은 홈페이지, 샵바이 스킨, 어드민, 앱 제작, 게시판 등 프로젝트가 다양하다 보니 여러 개발 방식을 시도를 해볼 수 있는 점이 매력인 것 같아요. 특별히 개발 도구에 대한 정해진 틀이 없어서 새로운 개발 방식이 나왔을 때 먼저 공부해 보고 팀원들을 설득해서 같이 적용해 보기도 해요.

실제 통합 관리 화면을 만들었을 땐 최신 기술인 리액트를 도입해 바꾸기도 했고, 쇼핑몰 스킨 개발 상황에선 리액트 버전과 일반 HTML, 자바스크립트 버전 두 가지를 함께 제공하기도 했으니까요.

 

 

Q. 마지막으로 프론트엔드개발팀의 최종 목표는 무엇인지 궁금합니다!

조정은 팀장 I 저희 팀은 NHN 커머스에서 진행되는 모든 프로젝트의 프론트엔드 기술을 리딩하고 가이드하는 역할을 맡고 있기 때문에 무엇보다 사용자가 더욱 편리하게 이용할 수 있는 UI, UX를 우선순위로 하고 있어요. 그래서 사이트 및 애플리케이션의 성능을 항시 최적화하고 테스트 자동화를 통해 오류나 예기치 못한 문제를 최소화함으로써 안정적이고 견고한 서비스를 제공하는 것을 가장 중요한 목표로 삼고 있습니다.

 

 

---

 

NHN 커머스와 도전으로 찾는 나의 길

쾌적한 웹 사이트 사용자 경험을 이끌 프론트엔드개발팀의 도전은 계속됩니다.