미리보기

직군간 협업과 통역이 가능한 웹 퍼블리셔

학부생 시절 에딧 플러스를 통한 퍼블리싱 수업이 첫 계기였습니다. 웹이라는 공간에 시각적인 표현을 위한 기능적 언어를 통하여 내가 원하는 조형을 스크린에 연출하는것이 매우 큰 신선함을 주었습니다.  이미 디자인 전공을 한 상태라 마크업 언어와 스타일 시트를 통해 화면상에 디자인 시안이 구현되는것이 신비하였으며 웹이라는 공간에 발을 디디게 해주었습니다. 스스로 학업 비용을 마련하고 1:1 과외를 받았습니다.시안을 설계하는 사람과 시안을 구현하는 사람의 양쪽 상황을 치우침없이 판단하게 되었고 웹디자인과 퍼블리싱을 구현하게 되었습니다.

만드는것 자체가 적성에 맞아서 그런지 일을 매우 즐기는 편이라 생각합니다. 지금의 실력에 안주하지 않고 새로운 트렌드가 되는 레이아웃을 항상 찾아보며 조형적인 표현을 코딩으로 어떻게 표현할지 구상하는 생각을 자주 합니다.
멘토링을 통하여 경청하는 자세와 반영하는 자세를 배웠으며 프로젝트를 진행하는것은 나 한명만이 아니라는것을 알게되었습니다.

기계공학의 '설계'라는 개념을 인지하듯이 'HTML'은 기초와 동시에 제일 중요한 요소로써 인지하고 있습니다. 가급적 모듈화된 형태로 섹션을 나누고 얼마든지 수정과 보완을 할 수 있도록 코드를 작성하는 편이며 향 후 수정사안이나 새로운 추가될 요소들을 고려하여 '안에서 밖으로' 나갈수 없는 제약없는 마크업을 작성해야 생산성이 향상된다고 생각합니다. 설계를 어떻게 하느냐에 따라 활용도가 높고 오래사용하는 코드가 되듯이 꼼꼼하게 마크업 품질을 통한 웹의 구조적 튼튼함과 확장성을 유지해나가는 것이 퍼블리싱 직무라고 생각합니다.

코딩을 배워나가면서 이해가지 않고 막히는 문제들도 있었고, 몇시간을 붙들고 기능을 구현하고 난 뒤 지친 경우도 많았습니다. 하지만 고통없이 성장은 없기에 되려 더 깊게 무연중에도 생각하며 고민하고 해결하는 '문제를 해결하는 능력'인 추론과 지혜를 깨우쳐 가는 과정이라 생각합니다.

공식적인 업무경험은 아직 없습니다. 하지만 경청과 열린자세를 통해 '기능과 형태' 둘의 입장을 바라보게 된 디자인을 전공한 퍼블리셔 라면 충분히 성장가능성이 높은 잠재력과 생산성이 내재되어 있다고 생각합니다.



'직무능력'

하드코딩, 철저한 기초 그리고 '통달을 향하여'

지난 세월간 퍼블리싱 과외를 통하여 들었던 이야기가 충실한 기본기였습니다. 마크업과 스타일시트를 등한시 하고 다른 개발언어를 우위에 두며 등한시 하지 않도록 하며, 클래스 명, 주석처리와 들여쓰기준수. 웹 표준과 접근성 준수와 명확한 시맨틱태그 구분,  div태그 남발금지, 와 같은 나만 알아보는 코드가 아닌 가독성 좋고 깔끔한 코드설계를 하도록 교육받았습니다.

나 혼자만 코딩을 하고 제품을 개발하는 것이 아니기에 독선적인 행동은 배제하도록 하며 웹표준 준수를 통하여 호환성 고려와 크로스브라우징 체크를 상기하면서 마크업을 하였습니다.

UIUX 디자인의 와이어프레임 설계 과정처럼 시안을 보고 디자인 툴을 통해 HTML 와이어프레임을 우선 구상 및 설계하며 규칙과 정돈된 마크업 구조를 통해 일관된 관통을 통하여 어떤 변수가 발생해도 안정적인 상황을 유지하도록 준비합니다.

이후 스타일시트와 스크립트 작성에 있어서는 '하드코딩'을 우선으로 자바스크립트 통달을 목표로 하고있으며 라이브러리 사용과 의존도를 최소화 하여 기능적인 제약없는 코딩을 하도록 노력하고 있습니다. if(){},elseif(){}.else{} 문을 사용한 버튼 콘텐츠와 캐러샐구현같은 경우도 swiper 를 배제하고 바닐라 스크립트 + CSS3 트랜지션 조합을 주력으로 사용합니다. window.requestAnimationframe 함수와 스크립트 공식을 바탕에 두고 이벤트 핸들링에 주력하고 있습니다.

반응형 스크립트 에 있어서도 외부 스크립트를 작성하여 적용하는 편이며 가급적 호환성을 고려하여 CSS3 에 있어서는 inline-block 과 float, absolute를 사용하여 레이아웃배치를 하는 편입니다. 테일윈드,부트스트랩 사용도 배제하는 편이며 철저한 기초에 기초를 위한 기초에 의한, 다른 변수에도 변치 않는 하드코딩 작성을 원칙으로 코딩에 임하고 있습니다.

'직무스킬'

'직무스킬'

'HTML5'

디자인 툴로 위계질서와 클래스 설계 를 한다음 퍼블리싱 작업을 진행합니다. div태그 남발을 하지 않고 시맨틱 태그와 섹션구분을 기반으로 설계하여 퍼블리싱을 합니다. 부모요소로써 감싸는 부분은 섹션 단위를 사용하고 이후 콘텐츠를 차지하는 구간에는 그뒤에 'Contents'를 붙여서 부모 자식요소를 구분지어 코딩합니다.

'CSS3'

웹 표준 준수 스타일시트를 적용하며 크로스 브라우징과 안정성을 위하여 마크업 요소 배치 이후 사용합니다. 호환성,안정성을 위하여 float,position 을 주로 사용하며 flex,Grid 사용은 상황에 따라 판단하여 사용합니다. 주로 트랜지션을 넣어 스크립트와 조합하여 애니메이션 삽입에 사용합니다.

주로 미디어 쿼리와 반응형 웹 구축을 위하여 따로 외부CSS 파일을 구축하여 사용하는편입니다. PC,Tablet,Mobile, 이렇게 세가지 외부스타일 시트를 만들고 @mediaquery screen-only and maxwidth768px인 모바일 환경과 768px ~ 1280px 인 태블릿, @media only screen and "(min-width:1280px) and (max-width:1920px)으로 PC 환경을 설정하여 다른 디스플레이의 하드웨어적 차이에도 레이아웃이 깨지지 않도록 작업을 합니다.

'JavaScript'

가급적 하드코딩을 지향하며 ()=> 보다는 '매서드',function(addEventListner){} 을 사용하는 편입니다. 화살표 함수와 같은 단축키 사용은 (e) 같은 이벤트 리스너도 addEventListner 를 일일이 작성하는 경우가 많습니다. 스와이퍼 같은 플러그인은 변수로 1 지정을 해주고

거기서 += 1값을 더하여 조건이 충족되면 작동되는 if(){},elseif(){},else{} 조건문을 사용하여 바닐라 스크립트로 캐러샐을 제작합니다. 라이브러리 의존은 가급적 하지 않으려는 편입니다.

코드 참고시 제이쿼리의 경우 번역을해서 바닐라 스크립트로 작성도 하는 편이며 입문 자체를 UI제어 애니메이션과 이벤트핸들링, 인터렉션 목적으로 입문하였습니다. 이후 프론트엔드 엔지니어 성장을 위하여 리액트 같은 프레임 워크에도 관심을 갖는 편입니다.

뎁스메뉴 구현시 addEventListner 이후 'mouseover','mouseout' 을 사용하여 구현하며 함수 호출을 위해 function''(){}기능으로 함수 선언 이후 셀렉터로 (document.getElementByid,querySeletor) 를통해 지정해둔 값으로 이벤트를 걸어주어 이벤트 핸들링을 하는 편입니다.