노션 이력서를 작성할 때부터, 정적페이지 이력서 작성을 계획했다. 한번에 페이지를 띄우기에는 현재 사내프로젝트, 사이드프로젝트까지 여유가 조금 없어서 주차별로 조금씩 만들어 가려고 한다. 오늘은 HTML 문서까지만 작성해보았다.
내용
내용은 노션 이력서 내용을 그대로 작성했다. 다만 HTML의 본래 목적처럼 작성하고자 했다.
때문에 html태그를 최상위 태그로, head태그와 title태그, body태그와 heading(h1,h2,h3, ...)태그 - p태그 - hr과 br태그 - ul과 li태그 - span태그 - strong태그 - img 태그를 사용했다.
<html>
<head>
<title>mannMae|듣는 것을 좋아하는 개발자</title>
</head>
<body>
<h1>mannMae | 듣는 것을 좋아하는 개발자</h1>
<p>1년 차, 듣는 것을 좋아하는 개발자 김재만입니다.</p>
<img
src="https://velog.velcdn.com/images/mannmae/profile/e338cb0c-6f03-4634-a0f7-fa1a26ac72ea/image.jpeg"
/>
<h3>Contact</h3>
<ul>
<li>
<span><strong>Email.</strong> daga4242@gmail.com </span>
</li>
<li>
<span><strong>Phone.</strong> 010-7430-0220 </span>
</li>
</ul>
<ul>
<li>
<span>
<strong>Blog.</strong>
<a href="https://velog.io/@mannmae">https://velog.io/@mannmae</a>
</span>
</li>
<li>
<span>
<strong>GitHub.</strong>
<a href="https://github.com/mannMae">https://github.com/mannMae</a>
</span>
</li>
</ul>
<hr />
<h2>Introduce.</h2>
<p>
2개월 차 주니어 개발자로 웹 서비스 개발 업무를 담당하고 있습니다. 프로젝트
초기 단계에 합류하여, 웹 앱 프론트엔드 파트를 전담하여 개발했습니다. 팀
사정상, 기획과 디자인 파트의 업무를 일부 분담하여 프로젝트를 완성한 경험이
있습니다.
</p>
<br />
<p>
서비스가 추구하는 방향을 팀원들과 함께 고민합니다. 서비스 배포 일정에
맞추어 우선 개발 기능을 선정하고, 유저의 입장에서 필요한 기능을 제안,
개발했습니다.
</p>
<br />
<p>
업무 가시성을 높이고, 소통하는 개발을 중요시합니다. 프론트엔드 개발팀의
소통을 위해 스프린트 보드와 위키를 적극 활용하여, 협업 환경을 구축한
경험이 있습니다.
</p>
<hr />
<h2>Work Experience.</h2>
<h3>링커버스</h3>
<p>네일 스캔AI 기술을 활용한 건강정보 앱 인네일 서비스 스타트업</p>
<span>Frontend Developer</span>
<span>2022.05-</span>
<ul>
<li>
<p>협업 생산성 향상을 위한 컨벤션 및 아키텍쳐 세팅</p>
</li>
<li>
<p>웹 앱 유저스토리 및 와이어프레임 작성, 초기 페이지 디자인 작성</p>
</li>
<li>
<p>웹 페이지 개발 및 반응형 웹, PWA적용</p>
</li>
</ul>
<hr />
<h2>Other Experience.</h2>
<h3>Project</h3>
<ul>
<li>
<h5>
<팀 스파르타 - 로켓단 2기> 하이퍼 캐쥬얼 게임 프로젝트 - 2022.06
- 2022.07
</h5>
<p>2048 Black - 게임기획, 제작 및 배포</p>
</li>
</ul>
<hr />
<h2>Skill.</h2>
<p>Front-End: JavaScript, React.js, HTML, CSS</p>
<hr />
<h2>Education.</h2>
<p>2022.01 - 2022.04 팀 스파르타 부트캠프 항해99 5기 심화반 수료</p>
<p>2021.09 - 2021.12 바울랩 컴퓨터학원 웹 프론트엔드 개발반</p>
</body>
</html>느낀점
생각보다 의미론적인 표현방식을 내포하고 있는 태그가 많다. HTML은 정보를 CSS는 표현을 JS는 동작을 담당한다고 하기에 부자연스럽거나 겹치는 부분을 종종 느끼는데, hr이나 br같은 태그는 물론, reset.css를 적용하지 않은 단계에서는 heading이나 ul태그, strong태그, 심지어 a태그 역시 표현을 담고 있다.
아직까지는 쌓여있는 레거시가 많고, 태그의 원래 역할을 고수하는 편이지만 머지 않은 미래에 스타일 자체를 전부 제거한 문서용 언어가 사용되지 않을까 생각이 들었다.
또한, 문서를 문서로서 작성해보니 시멘틱 태그라는 것은, 마치 소나타 형식에서 기존 형식에서는 없던 1주제-경과부-2주제 등등의 분석을 하는 것처럼 특수한 문서 형식에 대한 해석보조용 정보라는 것을 이해했다. 그렇기에 더욱 중요하다는 것도 말이다.
마무리
나중에는 이력서 만들기로 배우는 웹개발 런칭도??
