안녕하세요! 저는 누리미디어의 UI/UX를 책임지고자 최근 개발운영팀에 합류한 프론트엔드 개발자입니다.
입사 3개월 차, 저는 새로운 미션을 받았는데요,
바로 누리미디어의 서지 관리 프로그램인 싸이티지 서비스를 웹사이트로 신규 구축하는 것입니다! 두근💗 (두둥..⚡️)
그렇다면 프론트엔드는 무엇일까요? 개발자답게 ChatGPT에 물어보았습니다.
제 소울메이트 ChatGPT가 설명한 것처럼,
저는 누리미디어에서 서비스의 보여지는 앞 부분, 프론트를 더욱 편리하게 만들고 내부 시스템에 잘 호환시켜 원활한 서비스를 제공하는 업무를 맡고 있어요.
저희 서비스를 이용하시는 여러분들에게 첫 랜선 인사를 드리는 아주 중요한 역할을 담당하고 있답니다!
신규 구축은 서비스 확장성을 고려한 처음 설계가 핵심이죠. 프론트엔드에서도 고려할 사항이 정말 많습니다.
여러 고민 끝에, 저는 가장 먼저 Nuxt3와 Vue3를 프론트 스펙으로 선택했는데요,
처음 설계에 대한 고민과 싸이티지 웹 구축을 하면서 쌓은 개발 경험을 공유하고자 합니다.
그중에서도 가장 핵심인 컴포넌트 설계에 대해 중점적으로 이야기해 보겠습니다.
메인
1. 기술 스택 고민
싸이티지 웹사이트를 구축할 때, 저는 먼저 Nuxt3와 Vue3를 선택했습니다.
개인적으로 Vue 개발 경험은 있었지만, 누리미디어 내에는 Vue 프로젝트가 없었기 때문에 고민은 있었습니다.
하지만 두 기술의 장점이 매우 강력하기에 좋은 선택이라고 생각합니다!
Vue3는 가볍고 성능이 뛰어나며, 컴포넌트 기반 설계 덕분에 재사용 가능한 컴포넌트를 쉽게 작성할 수 있습니다.
특히, 3버전에서 업데이트 된 Composition API는 상태와 로직을 모듈화해 대규모 애플리케이션을 효율적으로 관리하는 데 매우 적합합니다.
앞으로 싸이티지의 확장을 기대해볼 수 있겠죠. 이러한 SPA 구조적 장점이 개발 효율성과 유지보수성을 크게 향상시킵니다.
Nuxt3는 Vue3를 기반으로 한 프레임워크로 SSR(서버사이드 렌더링) 지원합니다.
이는 SEO 최적화와 빠른 로딩 속도가 중요한 프로젝트에서 특히 유리합니다.
또한, 파일 기반 라우팅을 지원하여, 파일을 추가하는 것만으로 라우트를 자동 생성할 수 있어 라우팅 설정의 복잡성을 크게 줄일 수 있습니다.
싸이티지 웹 구축 프로젝트가 SPA도입의 시작이 되어, 향후 더 많은 서비스들이 개선되는 기반이 되기를 기대하고 있습니다.
base 폴더에는 필수적인 UI 컴포넌트가 설계되어 있습니다.
버튼, 카드, 텍스트 필드와 같은 기본 컴포넌트는 재사용성이 매우 높기 때문에, 다양한 페이지와 기능에서 사용할 수 있도록 설계했습니다.
이러한 기본 컴포넌트는 스타일과 기능을 통일하여 프로젝트 전반에 걸쳐 일관성을 유지할 수 있도록 했습니다.
Layout 컴포넌트
layout 폴더에는 프로젝트 전역에서 사용하는 Header, Footer와 같은 레이아웃 컴포넌트가 포함되어 있습니다. Nuxt에서 제공하는 layout 폴더 내에 타입별로 배치하여 페이지마다 반복되는 레이아웃을 효율적으로 관리할 수 있어 유지보수도 매우 용이합니다.
UI 컴포넌트
ui 폴더에는 특화된 UI 컴포넌트들이 설계되어 있습니다. 공통된 기능을 담당하는 UI 요소들을 모듈화했기에, 기능에 대한 변경 사항이 있을 때 구조적으로 관리하기 용이합니다.
메인
3.컴포넌트 기능 개발
“그래서 컴포넌트가 뭔데? 어떻게 쓰는데?“ 🤔
예시로 BaseSelect.vue 컴포넌트를 소개합니다.
이 컴포넌트는 사용자에게 드롭다운 메뉴를 제공하며, Vue의 Composition API와 Transition 기능을 사용해 동적 인터페이스와 애니메이션을 구현한 컴포넌트입니다.
emit: modelValue와 emit을 활용해 양방향 데이터 바인딩을 구현했습니다. 사용자가 선택한 값이 상위 컴포넌트로 실시간 전송되도록 emit 이벤트를 사용하여 값을 업데이트합니다.
v-for: v-for 디렉티브를 사용하여 옵션 리스트를 동적으로 렌더링합니다.
각 옵션은 버튼 요소로 표현되며, 현재 선택된 값과 비교하여 스타일을 동적으로 변경합니다.
v-if: 조건부 렌더링을 통해 옵션 리스트를 열고 닫도록 구현했습니다.
transition: 드롭다운이 열리고 닫힐 때 Vue의 transition 컴포넌트를 사용해 애니메이션 효과를 적용했습니다. slide-down 인터랙션은 드롭다운 메뉴가 부드럽게 열리고 닫히도록 정의했습니다.
ref, computed: ref와 computed를 상태를 관리합니다.
특히 isOpen 상태를 ref로 선언해 드롭다운의 열림/닫힘 상태를 관리하며, computed를 사용해 현재 선택된 옵션을 동적으로 계산하여 표시합니다.
그럼, 제가 개발을 맡고 있는 싸이티지는 무엇일까요?
논문 하나를 쓰려고 해도 인용되는 논문 수와 인용, 그리고 참고문헌을 수기로 작성하는 건 여러모로 복잡하고 어려운 일인데요,
그래서 누리미디어에서는 DBpia 내 논문들을 더 쉽고 빠르게 서지관리를 할 수 있는 프로그램, 싸이티지를 출시했습니다!
싸이티지는 말그대로 Cite와 Easy를 합친 말인데요, 아래에서 기능을 조금 더 자세히 설명드려볼게요 🙂
about 1
논문만 써, 서지는 싸이티지에 맡겨!
표절을 방지하기 위해 인용과 참고문헌 작성은 필수입니다.
만약이라도 표절이 밝혀질 경우에는 논문 철회, 학위 취소, 사회적 지위박탈 뿐 아니라 해당 연구로 얻은 모든 이익이 환수돼요.
그래서 인용과 참고문헌을 통해 명확한 출처를 밝혀야 하는데, 읽고 쓸 논문, 너무 많아서 때론 공수가 정말 많이 들어가곤 합니다.
그런 고통을 아는 저희가 올바른 연구윤리 준수와 더욱 편리한 서지관리가 가능한 싸이티지의 기능들을 소개해보고자 합니다!
싸이티지 Point 1, 한국인의 환경에 맞는 편리한 UI/UX
싸이티지는 별도의 연동과정 필요 없이 프로그램을 켜고 워드나 한글에 커서를 놓으면, 그 순간 바로 연동됩니다.체크박스 클릭 후 인용하기를 클릭하면 바로 논문 정보가 삽입돼요.
그리고 제가 개발을 담당하는 싸이티지 웹은 다양한 서지들을 관리하기 쉽도록 편리한 UI를 제공합니다.
RISS 부터 해외사까지 모든 논문의 서지 관리가 가능합니다! RIS 파일만 준비하면 돼요 😊
about 1
Point 2. 복잡한 한국 인용양식 최다 지원
한국은 정말 많은 인용양식을 가지고 있어요.
그래서 싸이티지는 각주, 겹낫쇠 등이 지원되지 않았던 이용자들을 위해 한국 인용양식 무려 250여개를 지원하고 있습니다.
이용자들의 열화와 같은 성원을 바탕으로 KCI 등재지 2000여개를 구축했는데요,
그 외 양식이 필요한 경우에도 이용자들의 신청을 바탕으로 지속적으로 양식을 만들고 있어요.
about 1
Point 3. 국/영문 정보 동시 저장
싸이티지는 서지의 국/영문 정보를 동시저장할 수 있도록 하여, 비영어권 국가의 참고문헌 관리에 탁월합니다.
영어로만 참고문헌을 표기해야 하는 학회에서, 한국어로 참고문헌을 표기하는 학회로 변경 시 매우 편리합니다
people
마치며,
이렇게 제가 하는 일과 개발을 하고 있는 서비스에 대해 소개해 드렸는데요,
누리미디어에서는 다양한 서비스들을 개발하며 더욱 풍부하고 긍정적인 사용경험을 제공하기 위해 노력하고 있어요.
특히 개인적으로도 대학시절 과제나 논문을 쓸 때 인용양식과 참고 문헌 등 하나하나 수기로 쓰면서 많이 애를 먹었던 기억이 나요.
(싸이티지가 일찍 나왔더라면 A+은 쉽게 받았을 거란 생각을 조심스레 해봅니다 😅)
이번 기회로 누리미디어 서비스들이 최신 기술 스택으로 전환되는 중요한 첫걸음이 되기를 기대하며 마무리하겠습니다! 🍀
