<디지털 트윈 사이니지 앱 제작> 주 업무 - 시설에서 생산하는 데이터를 받아 와 차트로 표현했습니다. (Chart.js 사용) - 앱 성능을 개선했습니다. - GitLab에서 레포지토리를 생성/설정하고, 멤버 역할을 지정하는 등 형상 관리에 필요한 환경 설정을 담당했습니다. 앱 성능 개선 포인트 - 앱 로딩 시 2분 이상 걸리던 초기 데이터 가공 시간을 10초 이내로 단축시켰습니다. - 시설에서 수 년치 데이터를 한꺼번에 보내고 있었기 때문에 백엔드 측과 협의하여 서버에서 데이터를 시간 단위로 나눈 뒤, 앱에서 각 시간별 데이터를 1초당 한 번씩 받는 방식으로 변경했습니다. 사용 기술 - React.js, TypeScript, Recoil, Chart.js <jQuery로 개발한 솔루션을 React.js로 전환> 당시 소속 업체(인포인)에서 jQuery로 개발해두었던 디지털 트윈 솔루션을 React.js로 전환하였습니다. - React.js + TypeScript 개발 환경을 구축했습니다. - jQuery 코드를 TypeScript 코드로 전환했습니다. <프론트엔드 개발팀 리딩> 사천 파견 프론트엔드 프로젝트 및 팀원 관리, 신입 개발자 온보딩을 담당했습니다. - 5명으로 구성된 팀의 업무를 분배했습니다. - 코드 리뷰를 통해 개선이 필요한 사항을 공유하였습니다. - 신입 개발자에게 업무 진행 시 알아야 할 사항을 설명하였습니다.

更多

<사이트 성능 개선> 서비스 사이트의 검색 결과 상위 노출을 목적으로 성능 개선을 진행했습니다. 성능 개선 포인트 - 개발자 도구 > 네트워크 탭에서 병목 발생 구간을 찾아 문제점을 파악하였습니다. - 네트워크에서 호출하는 파일의 개수와 용량을 줄였습니다. First Contentful Paint 시간 단축 - 모바일: 11초대에서 4초대로 개선했습니다. - 데스크톱: 2초대에서 1초대로 개선했습니다. - 성능 개선 결과는 Lighthouse와 Think with Google를 이용해 확인하였습니다. 최적화 과정에서 진행한 작업 - Webpack bundle analyzer를 사용하여 최적화가 필요한 파일을 탐색했습니다. - UI 라이브러리와 유틸리티 라이브러리 용량을 최적화 했습니다. - 웹 폰트, 이미지, SVG 등 리소스 용량을 최적화 했습니다. - CSS, JS 코드 리팩토링 및 최적화를 진행했습니다. <SEO 최적화> 마케팅팀과 협업하여 핵심 키워드 검색 시 검색 결과 첫 페이지에 서비스 사이트와 블로그가 상위에 노출되도록 하였습니다. - Adobe의 SEO 책임자로부터 자문을 받으며 진행했습니다. - 메타 데이터 추가, 검색엔진에 사이트맵 제공, 웹 접근성 준수, 사이트 성능 개선 등을 진행했습니다. <Nuxt.js를 사용한 SSG 방식 사이트 개발> 기존에 Vue.js로 운영되던 서비스 사이트를 Nuxt.js로 전환하였습니다. 대체로 정적 페이지 운영이 많았고, 변경이 되더라도 변경사항을 자주 반영해야 하는 페이지가 없었기 때문에 SSG 방식을 선택했습니다. 사용 기술 - Nuxt.js, Vuex <정기적인 사이트 업데이트> 디자인 또는 콘텐츠 변경사항을 매주 1회 업데이트하였습니다. - UI/UX 변경사항에 대해 적극적으로 의견을 제시하였습니다. - 변경사항 중에 클릭이 이루어지는 곳 또는 동작을 파악해야 하는 곳 등에 Google Analytics UTM 태그를 추가했습니다. <장애 대응> 사이트에서 장애가 발생했을 때 핫픽스를 진행하였습니다. - 대응을 마친 후 관련 내용을 정리하여 개발팀 구성원과 공유했습니다. 어떤 문제가 있었고, 왜 문제가 발생했으며, 어떤 방식으로 수정했는지 전달했습니다. - 같은 문제가 발생하지 않도록 하기 위해 무엇이 필요하고 어떻게 준비해야 하는지를 논의했습니다. <브랜드 사이트 관리> 브랜드 사이트를 컨버팅하고, 컨텐츠를 업데이트했습니다. - Jekyll로 운영되던 사이트를 관리하다가, 이후 Nuxt로 변경했습니다. - 마케팅 팀에서 운영하는 블로그를 주 1회 업데이트하였습니다. <디자인 시스템 개발> 서비스 사이트에서 사용할 디자인 시스템 개발에 참여했습니다. - 디자이너와 함께 컴포넌트와 그리드 시스템의 세부 사항을 정의했습니다. - Storybook으로 컴포넌트를 관리했습니다. - UI 라이브러리에서 그리드 시스템과 연관된 css 속성값을 수정하였습니다. <백오피스 제작> 서비스 운영에 참여하는 외부 인력의 신상 정보, 지급 비용 등을 관리하는 사이트를 제작했습니다.

更多

기업 브랜드 사이트, 커머스 사이트, 이벤트 페이지 제작 업무를 진행했습니다. - 서울시직장맘지원센터 사이트의 웹 접근성 대응 프로젝트 참여 경험이 있습니다. - 워드프레스로 브랜드 사이트를 제작하거나 우커머스를 함께 사용하여 온라인 쇼핑몰, 크로스 보더 커머스를 구축한 경험이 있습니다. - 시멘틱 마크업, 대체 텍스트 제공 등 웹 표준을 준수하여 작업하였습니다. - 부트스트랩, SCSS 등 빠른 작업을 도와주는 도구를 적극적으로 활용했습니다. - 자주 사용하는 코드를 스니펫으로 만들거나 reset css, normalize css 등을 작성하여 작업 효율을 높였습니다.

更多

웹 퍼블리싱, 온라인 콘텐츠 제작 및 검수를 진행했습니다.

워드프레스로 제작하는 웹사이트의 퍼블리싱을 진행하였습니다.