백엔드 4명으로 구성되었기 때문에 프론트엔드에 대한 기초적인 지식이 부족할 수 도 있고, 컨벤션을 맞추는것 또한 많이 다뤄보지 않았기 때문에 우선 내가 전체적인 구조를 잡아주고 팀원들이 쉽게 작업 할 수 있는 방향으로 진행하기로 했다. 내가 프론트 기초 와이어프레임과 세부 페이지 html파일 작성, JavaScript기초 연결 작업까지 하는동안 팀원들은 서비스 디벨롭에 필요한 기초 지식들을 미리 사전 스터디하는 시간을 가져왔다. 이후 내가 전체적으로 프론트엔드 템플릿을 뿌리면서 개인 부분들을 작업 하는 시간에 추가적인 시간을 투자해서 나는 아키텍쳐 기반 배포과정과 JMeter등 팀원들의 스터디 내용들을 참고하여 서로 부족한 부분을 매꿔보고자 한다.

주말까지 빠르게 프론트엔드 부분을 정리해줘야 다음 주 시작부터 팀원들도 본인의 프론트엔드와의 연결을 이해 할 수 있고, 나 또한 분배했었던 팀원들의 기능들을 배워가며 서로 동일한 문제를 함께 풀어 나갈 수 있기 때문에 단순히 프론트엔드 페이지를 구성하는 것이 아니라 모듈화, 주석을 통해서 팀원들의 이해를 돕는 파일 구성을 진행하려 노력했다.

현재까지 진행 과정

초기 화면 스케치로부터 세부 페이지 디자인, 세부 페이지의 플로우 계획까지 아래와 같은 변화가 있었다.

Figma를 활용해보았다.

이번에 Figma라는 툴을 처음 사용해보면서 편리함도 느꼈지만, 아직 정확한 사용법을 몰라서 아차 싶었던 부분도 있었다.

바로 HTML로 바로 변환 할 수 있도록 속성값을 잘 지정했었다면 추가적인 작업 없이도 바로 Figma에서 거의 프론트 페이지를 완성 할 수 있었던 점이다. 실제로 프론트엔드 개발자들은 그렇게 개발하겠구나 라고 처음 느끼게 되었다. 다음에는 Figma 자체에서부터 버튼, division 등 태그를 실제로 HTML 코드처럼 속성을 변경하고 잘 복사하면서 사용하면 크게 손볼일 없이 쉽게 프론트를 구성 할 수 있을 것 같다는 생각이 되었다.

생각보다 많은 수작업이 필요했다.

우선 위에서 말한대로 Figma 에서 HTML을 바로 추출 할 수 있었던 것을 몰랐고, 그리고 올바르게 추출하기 위해선 속성을 잘 지정했어야 했다. 하지만 이미 그림판처럼 이용해버린 상황, 따라서 일단 형태라도 프로젝트로 옮기고 내가 직접 HTML태그를 변경하자는 방식으로 진행했다.

우선 부분적인 레이어에서만 페이지가 변했으면 했다.

HTML 표준 레이아웃처럼 구성하고 싶었고, 그 중에 Contents 레이어에서만 실제 콘텐츠들이 변경되는 형태로 페이지를 구성하고 싶었다. 하지만 만만치 않았다.

처음엔 옛날방식처럼 top, bottom형태로 body를 나눌 생각을 했지만 잘못된 접근이었다.

Thymeleaf라는 view 엔진을 사용하기 때문에 그에대한 문법에 익숙하지 않았다. 하지만 이것 저것 시도하면서 그 개념을 파악했다.

결론적으로는 layer.html이란 파일을 만들었다. 해당 소스 파일에서 <head>, <body>의 내부 큰 구분 레이어인 <nav>, <header>, <content>, <footer> 태그마다 <head th:fragment="head"> 처럼 대명사를 지정해준다.

그리고 실제 사용되는 index.html에서는 head라는 대명사를 불러오는 것으로 생각하면 된다.(예전에 jsp에서 <%include top.jsp.. ~ %>) 하던것 처럼 불러오기만 하면 된다. 결과적으로 정리된 index.html은 아래와 같이 간결하다.

<!-- resources/templates/index.html -->
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!-- 헤드 레이아웃 적용 -->
<head th:replace="~{layout :: head}"></head>
<body>
    <!-- 네비게이션 메뉴 레이아웃 적용 -->
    <div th:replace="~{layout :: nav}"></div>
    <!-- 헤더 레이아웃 적용 -->
    <div th:replace="~{layout :: header}"></div>

    <!-- 컨텐츠(이 부분이 변경 됩니다.) 레이아웃 적용 -->
    <div th:replace="~{layout :: content}"></div>

    <!-- 푸터 레이아웃 적용 -->
    <div th:replace="~{layout :: footer}"></div>
</body>
</html>
HTML
복사

이 부분에서 또 <div th:replace="~{layout :: content}"></div> 이 부분이 실제로 콘텐츠가 변경되는 레이어로 여기에만 소스코드가 계속 변경되면 된다. 그 외 부분들은 모두 동일하게 사용하면 해당 레이어에서만 변경되는 것 처럼 보여진다는 것.

이제 특정 레이어에서만 페이지를 불러오는 것을 익혔으니, 각 세부 페이지들을 구성하면 된다.

세부 페이지를 구성하자.

Figma로부터 받아온 태그의 형태가 실제로 요청문을 사용하기 어려운 상태였고, 예를들어 button은 button태그였어야 했지만 모두 겉보기만 버튼이었고, 실제론 그냥 단순 div의 테두리가 쳐진것이었다.

따라서, 우선 각 페이지들을 모듈화 시키고, 동일한 헤더, 푸터 부분을 삽입시켜주는 방식으로 작성했다.

각 페이지들의 형태 또한 통일시키고 팀원들이 알아보기 쉬운 <input>등의 태그로 변경했다.

반응형 메뉴 네비게이션을 적용해보고 싶어서 @Media 태그를 활용해서 메뉴를 구성했다.

각 기능을 수행할 버튼에 onclick 이벤트를 추가해두고 alert로 JavaScript 동작 확인 부분 템플릿을 만들어 두었다. 이제 팀원들이 각자 담당한 페이지의 JavaScript부분만 작성 하면 기본적인 프론트 엔드와 본인의 기능과 연결이 가능하다.

전체적인 작업이 마무리되었으며 팀원들에게 배포하여 어느정도 규칙있는 프론트엔드 페이지를 구성 할 수 있게 되었다.