008Vstro2023.10 – 2023.11

Eurasia Consulting 홈페이지

워드프레스에서 Next.js로, 디자인까지 혼자

기간: 2023.10 – 2023.11
분류: 웹사이트
역할: 기획·디자인·개발 단독
구성: 단독 진행

당시 제작한 배포본입니다. 회사의 현재 공식 사이트 여부는 확인되지 않았습니다.

01개요

회사 사정상 디자인부터 개발까지 혼자 맡게 된 프로젝트였습니다. 워드프레스로 만들어진 컨설팅 회사 홈페이지를 Next.js로 옮기는 일이었는데, 개발보다 디자인을 어떻게 할지가 더 걱정이었습니다.

시안 없이 개발자가 디자인까지 하면 보통 둘 중 하나입니다. 디자인에 시간을 다 써서 개발을 못 끝내거나, 대충 만들어서 결과물이 부끄러워집니다. 그래서 처음부터 디자인에서 정할 것을 최대한 줄이기로 하고 컴포넌트 키트를 가져다 썼습니다.

기능은 뉴스 RSS 연동과 파일 첨부가 되는 문의 폼이 중심이었습니다. 특히 파일 첨부는 클라이언트가 보낸 데이터를 서버에서 얼마나 믿어도 되는지를 처음으로 고민하게 만든 부분이었습니다.

02기술 결정

문제, 선택, 결과 순서로 적었습니다.

결정 01
혼자 디자인해야 한다면 결정의 수를 줄인다
문제
디자이너 없이 시안부터 만들면 색·간격·타이포를 매번 새로 정하게 됩니다. 결정마다 시간이 들고, 일관성도 유지되지 않습니다.
선택
Daisy UI를 도입해서 컴포넌트 기본값은 그대로 받아들이고, 제가 정하는 부분은 레이아웃과 콘텐츠 구조로 좁혔습니다.
결과
디자인에 쓰는 시간이 크게 줄었고 화면끼리 일관성도 유지됐습니다. 일정 안에 끝낼 수 있었던 가장 직접적인 이유였습니다.
결정 02
첨부 파일은 클라이언트 검증을 믿지 않는다
문제
문의 폼에 파일 첨부를 붙였는데, 파일 크기와 확장자를 브라우저에서만 확인하면 요청을 직접 조작해 우회할 수 있습니다. 메일 서버가 그대로 노출되는 셈입니다.
선택
클라이언트에서 바이너리로 변환해 보내고, 서버에서 Buffer의 byteLength로 실제 크기를, 파일 시그니처로 실제 타입을 다시 확인했습니다. 확장자 문자열은 참고만 합니다.
결과
확장자를 바꿔 올린 파일이 서버에서 걸러집니다. 클라이언트 검증은 사용자 편의를 위한 것이고, 보안은 서버 검증이 맡는다는 구분이 확실히 잡혔습니다.
결정 03
외부 RSS를 쓰기 전에 저작권부터 확인한다
문제
최신 뉴스 섹션을 위해 언론사 RSS를 가져다 쓰려 했는데, 기술적으로 가능한 것과 써도 되는 것은 다른 문제였습니다.
선택
제공 언론사의 RSS 이용 조건을 먼저 확인하고, 전문 대신 제목·요약·원문 링크만 노출하는 방식으로 구현했습니다.
결과
기능은 유지하면서 저작권 문제를 피했습니다. 외부 데이터를 쓸 때는 라이선스 확인도 개발 순서에 넣어야 합니다.