HTML, CSS, JS 모바일 반응형 웹 퍼블리싱

안녕하세요.

프론트엔드 9년차 개발자 'Devforest443'입니다.

판교 게임 회사 출신으로 다양한 모션 애니메이션과 인터페이스와 인터랙션 구현을 통한 사용자의 호기심과 흥미를 유발하기 위해 항상 고민합니다.

반응이 빠르고 깨끗하고 아름다운 웹 페이지를 제공하기 위해 지속적으로 기술을 기술 발전을 위한 노력을 계속합니다.

전문성

- 순간 접속률이 높은 사이트 웹 성능 최적화 경험이 있습니다.

- IE7~, Chrome, Firefox, Opera, Safari 등 다양한 브라우저에서의 크로스브라우징 경 험이 있습니다.

- 모바일 및 웹뷰 브라우저에서의 트러블 슈팅 경험이 있습니다.

- 국내, 유럽, 북미, 아시아 국가 서비스의 트러블 슈팅 경험이 있습니다.

- GitHub Actions, GitLab Runnuer를 연결하고 CI/CD를 구성할 수 있습니다.

- 반복적인 업무(테스트, 정적분석, 문법오류, 빌드 등)를 Gulp Task를 구성하고,

Webpack 모듈 번들링을 구성할 수 있습니다.

Node.js CLI 도구를 만들 수 있습니다.

- Docker 컨테이너에서 Azure cli를 실행하여 Azure Blob storage에 배포하는 환경을 구성할 수 있습니다.

- NPM, NVM 사용 경험이 있으며 명령어 기반 개발환경을 구성할 수 있습니다.

- 오픈소스 설치형 인터넷 게시판 프로그램(CMS)을 기반한 웹사이트 제작 경험이 있습니다.

퍼블리싱

- html/css/css3/sass/javascript, 다양한 프레임워크(tailwind, bootstrap, material, wordpress)등의 퍼블리싱 진행합니다.

- 그누보드를 기반으로 하는 퍼블리싱 진행 가능합니다.

- PSD, Figma, Zeplin 디자인툴 산출물을 기준으로 퍼블리싱 진행합니다.

- 레거시 코드 or 유지보수 or 추가 페이지 개발을 위한 퍼블리싱 진행합니다.

프론트엔드

정적인 웹페이지부터 동적/반응형 웹, API 통신, 웹뷰 환경에서의 UI로직 설계까지 개발이 가능합니다.

레거시

- 기존 프로젝트 레거시 오류 수정, 개선 가능합니다.

- 분석, 재설계 가능합니다.

유지 보수, 무결성, 성능 최적화

- 유지·보수·확장하기 용이한 코드를 작성하며, 유지 보수 사이트의 경우 기존 코드 패턴에 따 라 기존 사이트 유지에 영향이 가지 않도록 코드를 작성합니다.

- 테스트, 정적 분석, 문법 오류 검증을 진행합니다.

- 빠른 로딩을 위한 css/js/image 파일의 minify 버전을 제공합니다.

[상품 설명]

* 모든 상품에는 무결성 테스트와 성능 최적화를 진행한 소스 파일을 제공합니다.

* STANDARD

단일 1page

- 적응형/반응형에 따라 금액이 상이합니다.

- 전체 콘텐츠 높이 5000px이하

(모바일의 경우 하단이 길어질 수 있어 높이 5000px이 넘어도 진행 가능하나 컨텐츠 양이 많을 경우 협의 필요합니다.)

- css를 이용한 간단한 모션 or 클릭 이벤트를 지원합니다.

- css를 이용한 최초 화면 진입 애니메이션 이벤트를 지원합니다.

* DELUXE

메인 1page, 서브 1page

- 메인 5000px, 서브 3000px 이하

(모바일의 경우 하단이 길어질 수 있어 높이 5000px이 넘어도 진행 가능하나 컨텐츠 양이 많을 경우 협의 필요합니다.)

- 적응형/반응 모두 진행 가능합니다.

- 스크롤, 슬라이더, 애니메이션, 인터랙션 기능을 포함합니다.

* PREMIUM

풀 패키지 30페이지 내외의 작업

- 원 페이지 스크롤, 반응형, 적응형, 모바일 전용 화면을 포함하고 있습니다.

- 스크롤, 슬라이더, 애니메이션, 인터랙션 기능을 포함합니다.

- 비디오 배경, 오디오 재생, 유튜브 영상 연결등의 기능을 포함합니다.

- 레이어 팝업 별도의 페이지로 간주하지 않으며 해당 페이지 기능으로 포함합니다.

- 최초 화면 진입 애니메이션 이벤트를 지원합니다.

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

* 풀 패키지의 경우 최초 기본 스팩으로 금액을 산정하며, 추가 작업이 발생할 경우 협의하여 진행합니다.

* canvas, 3d 애니메이션의 경우 추가 금액이 발생할 수 있습니다.

* 필요한 기능과 디자인이 복잡할 경우 금액을 재 산정합니다.

* 제작한 작업물은 개인 포트폴리오로 사용될 수 있음을 사전에 양해드립니다.

상담 및 일정 협의

- 의뢰 내용과 필요한 페이지 및 기획서와 디자인을 확인하고 분석합니다.

- 개발 가능 여부와 작업 기간, 견적을 전달해 드립니다.

작업 진행

사전에 조율한 내용과 기획서와 디자인 산출물에 따라 작업을 진행합니다.

작업 전달 및 피드백 수정

- 퍼블리싱 산출물을 전달 합니다.

- 수정 사항이 있을 경우 업데이트를 진행합니다.

결과물 공유

최종 결과물을 파일 또는 repository를 통해 공유합니다.

* 메일 or 공유 드라이브를 통한 산출물 공유 등 다양한 방법을 지향합니다.

커뮤니케이션

커뮤니케이션을 위한 notion, Jira, redmind, slack.. 등의 협업 도구를

사용하는 경우 공유해 주시면 해당 도구를 통해 커뮤니케이션을 진행합니다.

기획서 및 디자인

- 상세 기획서와 디자인과 원본

- 상세 기획서가 없을 경우 디자인 원본에 기능이 포함된 항목들에 한하여 상세 서술을 포함합 니다.

폰트 및 아이콘

- 사용하고자 하는 언어 및 폰트(없을 경우 무료 배포 폰트를 사용)

- 사용하고자 하는 아이콘 항목

모션, 애니메이션, 인터랙션

- 원하는 모션, 애니메이션, 인터랙션이 있다면 상세히 설명 or 참고할 만한 사이트 링크를 공유해 주세요.

- 데모가 있을 경우 전달해 주시면 참고하여 작업 진행합니다.

오디오 및 영상

- 오디오 및 영상 삽입이 필요한 경우 원본 또는 원본과 동일한 해상도의 파일을 공유해 주세요.

(파일 확장자: 영상 mp4/오디오 ogg/mp3)

- 유튜브 영상의 경우 경로를 공유해 주세요.

유지보수, 레거시

기존 소스코드를 제공해 주세요.