hsecode.github.io

* 해당 포트폴리오는 PC 환경에 최적화 되어있습니다.

About

이름허성은

직군 : Web Publisher | Markup Developer

mail :: 5647454@naver.com
tel :: 010-6375-0617
blog :: https://velog.io/@hsecode

생년월일: 1992. 6. 17
자격증: 정보처리기사 (2019년 취득)
웹디자인기능사 (2017년 취득)
성향: 성찰하는, 진취적인, 내향적인, 계획적인
특기: 계획 세우기, 정리정돈
(책상, 옷장, 필기, 사진 ..모든 것!)
취미: 만화책 보기, 고양이 감상, 닌텐도 게임
(동물의 숲, 스플래툰 ..)
좌우명: It's only crazy until you do it.
시도하지 않은 것만이 후회로 남는다. Just do it.
특이사항: Velog 트렌드 상위 랭크 경험 있음
ㄴ검색엔진최적화/웹성능 최적화
춘천-서울 통학, 통근(학원 5개월, 파견 4개월) 경험 있음
학원 멘토강의 경험 있음
ㄴ수강생에게 포트폴리오, 공부방향 등 멘토링
OGQ 스티커 제안 경험 있음

Skills

Web Publishing

웹표준과 웹접근성을 준수하여 작업하며, 특이성이 낮은 스타일을 선호합니다.

HTML5
CSS3
SCSS
JS
JQuery
웹표준
웹접근성
반응형

Cooperation

Git을 이용하여 협업하며, Wiki/JIRA를 사용하여 업무관리를 합니다.

Git/
GitLab/
Github
Wiki/
JIRA
SVN

Design Tools

기본적 툴을 활용하여 이미지 편집,적용 및 협업이 가능합니다.

Adobe
Photoshop
Adobe
Illustration
Zeplin

Career

회사명: 더존비즈온
부서명: 플랫폼사업부문 서비스개발2센터 개발5Unit 마크업Cell
직급: 주임연구원
근무기간: 2019. 7. 1 ~ 현재
주요업무: 비즈니스 플랫폼 서비스 마크업개발

* 업무 기간은 최초 구축 기간을 기준으로 기입하며, 상시 진행되는 운영 및 유지보수 건은 따로 표기하지 않습니다.

프로젝트명(서비스명) :UI/Layout 템플릿화: 연계/소속회사 : 더존비즈온

업무 기간 : 22.03 ~ 22.05

주요 업무 : 자주 사용되는 UI/Layout 및 콘텐츠를 템플릿화

상세 내용 및 기여한 점:

반복 요청되는 메인/로그인/서브페이지의 템플릿화를 제안 및 제작하여 업무 시간 단축에 기여

UI 템플릿화를 통한 콘텐츠 재사용성 확대

grid, flex 속성을 사용해 레이아웃 및 콘텐츠 마크업하여 디자인 수정 대응이 용이하도록 함

기술 스택 : HTML5, CSS3(grid / flex), SCSS, 동작 확인을 위한 jQuery, 웹표준, 웹접근성
프로젝트명(서비스명) :컴포넌트 (Sona Componenet): 연계/소속회사 : 더존비즈온

업무 기간 : 21.10.04 ~ 21.10.29 / 상시 업데이트

주요 업무 : 플랫폼에서 제공하는 서비스 전역에서 사용되는 공통 요소 컴포넌트 제작

상세 내용 및 기여한 점:

불필요한 구조를 제거하거나 타입 설정이 용이하도록 구조를 개선하여 신규 컴포넌트를 구축

전역에서 유일한 클래스명을 사용하고, 특이성을 낮게 유지하여 보다 쉽게 이식 및 커스텀 가능하도록 개발

SCSS를 사용해 컴포넌트를 구현함. mixin 과 변수 등을 구분하여 효율적으로 사용할 수 있도록 고민하며 개발함

웹접근성에 부합되도록 구성

마크업 개발 작업 시간 단축 및 효율성에 기여

기술 스택 : HTML5, CSS3, SCSS, 동작 확인을 위한 jQuery, 웹표준, 웹접근성, 크로스브라우징
프로젝트명(서비스명) :공통아이콘: 연계/소속회사 : 더존비즈온

업무 기간 : 21.10.04 ~ 21.10.07 / 상시 업데이트

주요 업무 : 플랫폼에서 제공하는 서비스 전역에서 사용되는 공통 아이콘 제작

상세 내용 및 기여한 점:

공통 아이콘 스프라이트 제안 및 제작

레티나 디스플레이 대응

아이콘 리스트 업데이트 관리

쉽게 사용할 수 있도록 아이콘 모음 리스트를 제공

기술 스택 : HTML5, CSS3, 웹표준, 크로스브라우징

프로젝트명(서비스명) :홈페이지 구축: 연계/소속회사 : 스프링웍스

주요 업무 : 홈페이지 구축을 위한 마크업 개발

담당 역할 : 퍼블리싱

기술 스택 : HTML5, CSS3, jQuery, 반응형, 크로스브라우징(ie8까지 대응)

개발 인원 : 1

본인이 기여한 점: 관공서 홈페이지 구축을 위한 웹 접근성을 준수한 마크업 개발

상세 내용 :

춘천 봄의대화(춘천 시민청원 홈페이지) (수행일: 2019.04)

양평 콕콕청원(양평 군민청원 홈페이지) (수행일: 2019.03)

연천군청 모바일웹 (수행일: 2019.02)

한림대학교 나노융합스쿨 (수행일: 2018.12)

양평군 평생학습센터 (수행일: 2017.12)

양평군 사회적경제 (수행일: 2017.11)

강원진로교육원 관리자 (수행일: 2017.11)
프로젝트명(서비스명) :접근성 마크 취득 및 조치작업: 연계/소속회사 : 스프링웍스

주요 업무 : 접근성 마크 취득 및 표준,접근성 조치작업

기술 스택 : HTML5, CSS3, jQuery, 반응형, 크로스브라우징(ie8까지 대응)

개발 인원 : 1~2

본인이 기여한 점: 웹접근성 조치 작업 및 웹접근성 마크 취득

상세 내용:

춘천시청 웹접근성 마크 취득 (수행일: 2019.01)

AIA 홈페이지 구축 참여 : 접근성 조치 작업/ 춘천-서울 AIA본사 출퇴근 (수행일: 2018.06-2018.10)

양평 평생학습센터 웹접근성 검토 및 조치 (수행일: 2018.11)

양평군청 웹접근성 검토 및 조치 (수행일: 2018.11)

연천군청 웹접근성 검토 및 조치 (수행일: 2018 상반기 / 2017.10)

강원통합교육문화관 웹접근성 검토 및 조치 (수행일: 2018.12 / 2017.12)
프로젝트명(서비스명) :메인개편 및 기능개선: 연계/소속회사 : 스프링웍스

주요 업무 : 관공서 및 대학 홈페이지 메인 리뉴얼 및 기능 개선

기술 스택 : HTML5, CSS3, jQuery, 반응형, 크로스브라우징(ie8까지 대응)

개발 인원 : 1~2

본인이 기여한 점: 홈페이지 리뉴얼

상세 내용:

한림대학교 대표사이트 메인 개편 (수행일: 2019.06)

평창문화관광 메인 개편 (수행일: 2019.05)

춘천평생학습관 메인 리뉴얼 및 콘텐츠페이지 퍼블리싱 (수행일: 2018.11)

춘천시청 및 춘천시 예하사이트 반응형으로 전환 퍼블리싱 (수행일: 2018.11-2018.12)
프로젝트명(서비스명) :유지보수 담당 사이트: 연계/소속회사 : 스프링웍스

주요 업무 : 관공서 홈페이지를 위주로 유지보수 담당

기술 스택 : HTML5, CSS3, jQuery, 반응형, 크로스브라우징(ie8까지 대응)

개발 인원 : 1~2

본인이 기여한 점: 홈페이지 내 화면 추가 및 콘텐츠 수정 등 유지보수

상세 내용:

춘천시립도서관

한림대학교 대표사이트 및 학과사이트

한림국제대학원대학교

한림대학교 관리자 사이트

양평군청, 양평 열린군수실, 양평 뮤지엄허브

연천군청, 연천 열린군수실, 연천농업기술센터

평창군청

영월시설관리공단

강원귀농귀촌

강원통합교육도서관

그외 구축 홈페이지
프로젝트명(서비스명) :기타: 연계/소속회사 : 스프링웍스

주요 업무 : 마크업 개발

기술 스택 : HTML5, CSS3, 반응형, 크로스브라우징(ie8까지 고려)

개발 인원 : 1~2

상세 내용:

춘천관광 키오스크 콘텐츠 퍼블리싱

춘천시 농업기술센터, 양평군 뮤지엄허브, 양평군 수도사업소, 연천군 맑은물사업소 서버이전

사내 이벤트 및 메일 퍼블리싱

선거 홍보 사이트 구축

프로젝트명(서비스명) :초록우산어린이재단: 연계/소속회사 : 더존비즈온

업무 기간 : 22.03 ~ 22.04

주요 업무 : 초록우산 어린이재단에서 사용되는 관리자 화면 개발. 로그인, 메인, 검색화면 / 대시보드 내부 콘텐츠 / 팝업 마크업 개발

개발 인원 : 2

상세 내용 및 기여한 점:

UI/Layout 템플릿을 활용하여 제작하여 마크업 개발 기간 단축

mixin과 클래스 네이밍 기법을 조합하여 SCSS를 사용

flex와 grid 속성을 적극 활용하여 유연한 레이아웃 구현

flex와 grid 사용 시 발생 될 수 있는 min-width 관련 이슈 공유

로그인, 메인, 검색화면 / 대시보드 내부 콘텐츠 / 팝업 마크업 개발

기술 스택 : HTML5, CSS3(flex, grid), SCSS, 웹표준, 웹접근성, 크로스브라우징
프로젝트명(서비스명) :설치형 메신저 / 화상회의: 연계/소속회사 : 더존비즈온

업무 기간 : 메신저 - 21.08 / 화상회의 - 21.12

주요 업무 : 로그인 / 설정화면 / 검색결과 / 대화 및 메세지 목록 등 설치형 메신저와 해당 서비스 내에서 사용 될 화상회의 서비스 마크업 개발

개발 인원 : 2

상세 내용 및 기여한 점:

웹용 메신저의 불필요한 HTML 구조 생략 및 CSS의 상속을 줄여 특이성 낮게 개발될 수 있도록 함

레티나 디스플레이 대응

Wiki 문서를 통한 이슈 관리 및 대응

설치형 첫 프로젝트를 진행

기술 스택 : HTML5, CSS3, 동작 확인을 위한 jQuery, 웹표준, 웹접근성
프로젝트명(서비스명) :삼성의료플랫폼 / 운영 현황판: 연계/소속회사 : 더존비즈온

업무 기간 : 21.11

주요 업무 : CT, MRI, 수술 등의 현황 및 예약 상황을 확인할 수 있는 관제 플랫폼 및 현황판 마크업

개발 인원 : 3

상세 내용 및 기여한 점:

클래스 네이밍 기법 중 하나인 BEM 사용 제안 및 실무에 활용

태블릿 디바이스(갤럭시 탭 s7/아이패드12.9)에 맞추어 콘텐츠가 출력되도록 대응

TV모니터, 태블릿화면 대응 및 특수한 디자인의 차트를 구현

병원 건물을 형상화하여 각 병동의 병상 수를 나타내도록 기획된 차트를 디자인에 맞추어 구현함

정식 디자인 채택 전 마크업 개발을 진행함으로써 전체 기반이 되는 구조, 레이아웃, 공통요소 구현

기술 스택 : HTML5, CSS3, 웹표준, 웹접근성, 태블릿 디바이스 대응
프로젝트명(서비스명) :근태관리 (리뉴얼): 연계/소속회사 : 더존비즈온

업무 기간 : 21.10.04 ~ 21.10.15

주요 업무 : 기존 근태관리 서비스의 디자인 및 개발 전면 개편

개발 인원 : 3

상세 내용 및 기여한 점:

flex 등의 요소를 사용하여 캘린더 및 그래프(차트)를 제작

접근성에 의거한 차트 제작

특이성 낮은 구조/CSS 적용으로 다양한 서비스에서 재사용될 수 있도록 제작(캘린더,차트 등)

단일 구조로 다양한 스타일 대응할 수 있도록 제작 (캘린더, 차트)

기술 스택 : HTML5, CSS3, 웹표준, 웹접근성, 크로스브라우징
프로젝트명(서비스명) :강원도청 행정플랫폼 관리자: 연계/소속회사 : 더존비즈온

업무 기간 : 21.07.22 ~ 21.08.02

주요 업무 : 강원도청에서 사용되는 관리자 화면의 전반을 마크업 및 개발 이슈 대응

개발 인원 : 2

상세 내용 및 기여한 점:

스프라이트 이미지 자동화 Gulp 툴 사용을 통한 이미지 작업 속도 단축

개선 및 유지보수에 용이하도록 Element Index 페이지 제작

공통 요소와 UI 인덱스 화면을 제작해 작업속도 개선 및 유지보수에 용이하도록 마크업

SCSS 역량 강화를 위한 다양한 방법 적용 (변수 적용)

기술 스택 : HTML5, CSS3, SCSS, 스프라이트 이미지 자동화, 동작 확인을 위한 jQuery 및 슬라이드 라이브러리, 크로스브라우징, 웹표준, 웹접근성
프로젝트명(서비스명) :데이터 셀렉터: 연계/소속회사 : 더존비즈온

업무 기간 : 21.06.01 ~ 21.06.22

주요 업무 : SASS 환경 세팅 후 SCSS를 사용하여 작업함

개발 인원 : 2

상세 내용 및 기여한 점:

마크업 작업 및 커뮤니케이션 진행
① Element Draggable 요소가 포함되어 개발자와 협의를 통한 제작
② 다양한 데이터들이 이슈없이 나타날 수 있도록 고려하여 작업

SCSS 사용
① Mixin, 변수 지정 및 공통 요소 선 작업을 통한 작업 속도 기여
② 다양한 방법을 적용하여 SCSS 역량 강화

기술 스택 : HTML5, CSS3, SCSS, 동작 확인을 위한 jQuery, 슬라이드 등 라이브러리, 크로스브라우징, 웹표준, 웹접근성
프로젝트명(서비스명) :소셜채널관리: 연계/소속회사 : 더존비즈온

업무 기간 : 21.05.04 ~ 21.05.26

주요 업무 : 소셜채널 리스트, 키워드 모니터링 등 관리화면 개발

개발 인원 : 2

상세 내용 및 기여한 점:

레이아웃, 공통 엘리먼트를 선행하여 제작

flex 속성을 사용하여 수정 대응 및 커스텀이 용이한 UI 개발

댓글 영역 마크업을 통한 HTML 구조와 웹접근성에 대한 고찰

기술 스택 : HTML5, CSS3, 크로스브라우징(ie10까지 고려), 웹표준, 웹접근성
프로젝트명(서비스명) :전자계약: 연계/소속회사 : 더존비즈온

업무 기간 : 21.03.24~21.04.23

주요 업무 : 템플릿 만들기 스텝, 계약 리스트, 계약 상세페이지, 팝업 마크업

개발 인원 : 2

상세 내용 및 기여한 점:

서브 작업자로 마크업 참여
① 아이콘, 리스트, 테이블 등 UI 공통 요소 제작
② 재사용성 고려한 UI 구조 제작
③ 마크업 개발 기간 단축에 기여

서브 작업자로 참여하여 메인 작업자를 서포트하며 마크업 개발

아이콘, 리스트, 테이블 등 공통 요소를 미리 선행작업 후 본작업을 시작할 때의 장점과 단점을 명확하게 인지할 수 있었던 서비스
(장점: 본작업이 편하고, 속도가 빨라진다. 단점: 본작업을 시작하기까지 시간이 걸리고, 완전한 기획,디자인이 아닌이상 꾸준히 추가 및 수정이 되어야하고, 그 과정에서 구조를 변경하는 등 크게 수정해야할 가능성도 있음)

기술 스택 : HTML5, CSS3, 크로스브라우징(ie10까지 고려), 웹표준, 웹접근성
프로젝트명(서비스명) :선물하기: 연계/소속회사 : 더존비즈온

업무 기간 : 20.06.01 ~ 21.06.16

주요 업무 : 선물하기 서비스 메인, 상품 리스트 화면 개발

개발 인원 : 3

상세 내용 및 기여한 점:

다양한 형태의 리스트 마크업 개발

재사용성 확장을 고려한 마크업

상품의 썸네일과 상태별 표현의 구조를 공통화

비슷한 형태의 UI를 적절한 클래스 네이밍과 적절한 상속으로 새로운 화면 추가에 대한 빠른 대응

기술 스택 : HTML5, CSS3, 크로스브라우징(ie10까지 고려), 웹표준, 웹접근성
프로젝트명(서비스명) :전자연구노트: 연계/소속회사 : 더존비즈온

업무 기간 : 20.06.11 ~ 20.09.04

주요 업무 : 연구자가 연구의 수행 시작부터 성과물 보고 및 발표에 이르기까지 연구과정 및 결과를 기록하고 관리하도록하는 서비스. 리스트/트리구조 마크업

개발 인원 : 2

상세 내용 및 기여한 점:

메인 작업자가 난이도 높은 화면을 원활히 작업할 수 있도록 많은 화면을 서포트하여 마크업 개발

앨범형 리스트, Draggable 리스트 마크업

트리구조에 대한 마크업을 진행하며 구조 그룹화와 반복에 대해 학습

기술 스택 : HTML5, CSS3, 크로스브라우징(ie10까지 고려), 웹표준, 웹접근성
프로젝트명(서비스명) :챗봇 (WE봇): 연계/소속회사 : 더존비즈온

업무 기간 : 20.02.06

주요 업무 : 챗봇 플러그인, 상담 리스트 및 상담화면 마크업 개발

개발 인원 : 3

상세 내용 및 기여한 점:

사용자가 사용하는 챗봇 플러그인 마크업

관리자용 상담 리스트 및 상담 화면 마크업

채팅 화면 구성에 필요한 UI 기술 학습

기술 스택 : HTML5, CSS3, jQuery, 크로스브라우징(ie10까지 고려), 준 반응형(모바일 전용 화면) 대응, 웹표준, 웹접근성
프로젝트명(서비스명) :매출채권팩토링: 연계/소속회사 : 더존비즈온

업무 기간 : 19.09 ~ 19.11

주요 업무 : 외상매출채권을 현금으로 회수하는 서비스에서 제공하는 화면 전반 마크업

개발 인원 : 1

상세 내용 및 기여한 점:

기본 화면 마크업 개발 및 시연 전용 화면

서비스 구축 및 시연 등 기획 대응

약정서, 계약서 프린트 화면 대응

기술 스택 : HTML5, CSS3, 프린트 화면 대응, 크로스브라우징(ie10까지 고려)
프로젝트명(서비스명) :근태관리: 연계/소속회사 : 더존비즈온

업무 기간 : 19.07

주요 업무 : 출퇴근 체크, QR 태깅 기능을 포함한 연차, 반차, 외근 등 근태관리 서비스 마크업 개발

개발 인원 : 1

상세 내용 및 기여한 점:

QR 근태관리 화면, 사용자 화면, 관리자 화면 등 마크업

플로팅 레이아웃과 flex를 혼합하여 수직 사이즈 대응 레이아웃 구성

코드리뷰를 통한 구조 개선

기획자와 협업하며 맞춰가는 과정에서 상대방에게 맞는 커뮤니케이션 역량 배양

기술 스택 : HTML5, CSS3, 슬라이드 라이브러리 커스텀 , 크로스브라우징(ie10까지 고려), 웹표준, 웹접근성
프로젝트명(서비스명) :데이터유통포털, 해커톤(경진대회): 연계/소속회사 : 더존비즈온

업무 기간 : 19.12 / 20.11

주요 업무 : 데이터 유통포털, 해커톤(경진대회) 마크업 개발

개발 인원 : 5

상세 내용 및 기여한 점:

데이터 유통포털의 마켓 리스트, 별점평가 영역 등 마크업

내 대회 공간(마이페이지) 마크업

기술 스택 : HTML5, CSS3, 크로스브라우징(ie10까지 고려)
프로젝트명(서비스명) :WEHAGO 모바일 랜딩: 연계/소속회사 : 더존비즈온

업무 기간 : 20.11.30 ~ 20.12.08

주요 업무 : WEHAGO 랜딩_모바일(메인) 마크업 개발

개발 인원 : 3

상세 내용 및 기여한 점:

SCSS를 사용하여 메인화면을 반응형으로 마크업

디자인 방향성을 유지하기 위한 슬라이드 라이브러리 커스텀

기술 스택 : HTML5, CSS3, SCSS, 반응형, 크로스브라우징(ie10까지 고려), 웹표준, 웹접근성
프로젝트명(서비스명) :홈피스 올인원팩, 랜딩: 연계/소속회사 : 더존비즈온

업무 기간 : 20.07 ~ 20.08

주요 업무 : 비대면팩 검색화면 및 랜딩 마크업 개발

개발 인원 : 5

상세 내용 및 기여한 점:

WEHAGO 비대면 패키지 마크업 개발 참여

메인에서 검색 시 출력되는 검색 리스트 화면 담당

Jquery를 사용하여 스크롤 시 검색바가 상단에 고정되는 형태의 UI 구현

반응형 디자인 테이블 제작

기술 스택 : HTML5, CSS3, Jquery, 반응형, 크로스브라우징(ie10까지 고려), 웹표준, 웹접근성
프로젝트명(서비스명) :메일 템플릿: 연계/소속회사 : 더존비즈온

업무 기간 : 상시

주요 업무 : WEHAGO에서 발송되는 메일 템플릿 마크업

개발 인원 : 5

상세 내용 및 기여한 점:

이미지가 다량 포함된 메일 템플릿 담당

모바일 기기 대응을 위해 table 태그를 활용하여 반응형으로 제작

각 플랫폼 이슈에 적합한 대응

기술 스택 : HTML5, CSS3, 메일 템플릿, 크로스브라우징, 웹표준, 웹접근성
프로젝트명(서비스명) :WEHAGO 서비스 수정, 이슈대응 및 유지보수: 연계/소속회사 : 더존비즈온

업무 기간 : 상시

주요 업무 : 마크업 개발 및 유지보수, 문의사항 대응

개발 인원 : 5

상세 내용 및 기여한 점:

WEHAGO에서 서비스 중이거나 개발중인 서비스 전반에 대한 마크업 관련 요청 및 문의사항에 대응

기술 스택 : HTML5, CSS3, 크로스브라우징, 반응형, 웹표준, 웹접근성

더존비즈온: 2019. 7. 1 ~ 재직중
스프링웍스: 2017. 4. 1 ~ 2019. 6. 21
종로 이젠아카데미컴퓨터학원: (NCS)모바일 웹&앱 UI/UX 디자인 개발; Adobe Photoshop, Adobe Illustration, HTML5/CSS3, Javascript, JQuery, 포트폴리오 제작; 2016. 8. 23 ~ 2017. 1. 26
한림대학교: 언론정보학부 디지털콘텐츠학과; 2011. 3 ~ 2016. 2
춘천여자고등학교: 2008. 3 ~ 2011. 2