[개발 일지 01] 프로젝트 오즈, 첫 개발을 시작하다

2026년 10월 20일, 프로젝트 오즈의 실제 개발을 시작했다. 구상했던 개인 작업실을 이제 화면과 코드로 하나씩 옮겨보기로 했다. 이 글은 오늘 주고받은 대화와 실제 반영한 변경을 바탕으로 정리한 첫날 일지이며, 게시판 확인을 위한 임시 데이터다.

첫 작업은 개발 환경 정리였다. 저장할 때 코드가 자동으로 정렬되도록 Prettier를 연결했다. VS Code의 저장 시 포맷과 프로젝트 공통 규칙을 맞추고, 생성 코드와 빌드 결과는 포맷 대상에서 제외했다.

문구를 어디에 둘지도 정했다. 화면마다 한국어를 직접 쓰기보다 한국어·영어 TS 파일로 분리하고 페이지에서 가져다 쓰는 구조로 옮겼다. 처음에는 다국어를 위한 준비였지만, 이어서 헤더의 지구본 아이콘에서 실제 언어를 바꿀 수 있도록 연결했다. 메뉴와 안내 문구, 화면 제목은 선택한 언어로 바뀌고 선택값은 쿠키에 남긴다. 다만 사용자가 작성한 게시글 제목과 본문은 번역 사전에서 분리하고, 추후 DB에 저장한 원문 그대로 보여주기로 정리했다. 언어별 URL과 검색 색인은 아직 다음 과제다.

메뉴는 소개·프로젝트·기록·연락으로 정리했다. 프로젝트와 실험실을 나누려니 같은 작업이 두 곳에 걸쳐 보였다. 당장은 실험실을 프로젝트에 합치고, 개발 중인 작업도 상태를 표시해 함께 소개하기로 했다. 직접 눌러볼 작은 도구나 데모가 쌓이면 그때 실험실을 다시 생각해보면 될 것 같다.

프로젝트 분류도 결과물의 유형과 작업 배경을 나눴다. 웹사이트 같은 유형, 개인·교육·회사 같은 구분, 개발 중 같은 진행 상태는 서로 다른 정보다. 유형 필터는 실제 공개 데이터에서 쓰는 것만 보여주고, 하나뿐일 때는 생략하도록 했다. 관리자 등록 화면과 DB 연동까지 완성한 것은 아니며 지금은 TS 파일에서 관리한다.

프로젝트 목록은 큰 썸네일 아래에 제목이 놓이는 카드 형태로 잡았다. ddoza, AK아이에스, 제주항공, 서플러스글로벌, NH오늘농사, 농협몰, 모임, 조공 순서로 임시 데이터를 넣었다. 메인은 앞의 두 개만, 전체 목록은 여덟 개를 보여준다. 데스크톱에서는 두 열, 모바일에서는 한 열이다. 아직 없는 이미지와 참여 기간·담당 역할을 지어내지 않고, 자료가 필요한 작업에는 임시 데이터라고 표시했다.

공통 UI에 대해서도 다시 생각했다. 처음에는 React·Next.js에 직접 작성한 CSS와 CSS Modules만 사용했다. 그런데 언어 선택이 브라우저 기본 목록으로 뜨는 모습은 사이트와 어울리지 않았다. Radix UI를 공통 드롭다운 기반으로 추가하고, 모양은 기존 테마와 CSS로 맞췄다. 키보드 이동과 Escape 닫기, 바깥 클릭 처리도 함께 확인했다.

색상은 여러 번 바뀌었다. 코랄을 잠시 보류하고 라임 #C7F36B를 메인 색상으로 선택했다. 해·달 버튼으로 다크와 라이트를 전환하고 선택값을 저장하도록 했다. 이후 다크는 순수 블랙, 라이트는 순수 화이트로 배경을 정리했다. 메뉴와 카드에는 중립 회색을 쓰고, 라이트에서 작은 강조 글자는 읽기 쉬운 짙은 녹색을 함께 사용한다.

메인 제목의 ‘새로운’에는 배경 강조를 넣었다. 드래그했을 때 보였던 강조 효과가 마음에 들어 공통 textHighlight 클래스로 만들었다. 제목 끝에 붙이는 accentDot도 글자 크기에 맞춰 재사용하도록 했다. 처음의 동그란 점보다 네모점이 더 어울려 마지막에는 라임 네모점으로 바꿨다.

메인 모션은 본문과 구분되도록 별도 패널 배경을 주었다. 가늘고 잘 보이지 않던 선과 작은 라벨은 키웠다. 스니커즈 모양은 높은 굽과 투명한 면이 보이는 유리구두로 다시 그렸다. 다크에서는 차콜 패널, 라이트에서는 아주 옅은 회색 #FAFAFA와 테두리로 구분한다. 일시정지와 재생, 움직임 줄이기 설정도 유지했다.

에러 화면은 큰 Oops! 글자와 짧은 안내, 홈 버튼으로 구성했다. 실제 없는 주소와 실행 오류에 연결하고 다시 시도하기도 넣었다. 이후 지구본 장식과 안내 문구의 중복 감탄사를 빼고 첫 O만 라임으로 남겼다. 라이트에서 어색했던 O의 외곽선도 제거했다.

기록 화면의 필터는 라임을 빼고 명암으로 선택 상태를 구분했다. 글자를 조금 굵게 하고, 검색 입력은 둥글게, 검색 버튼은 원형 돋보기로 바꿨다. 색상을 강조하는 것보다 무엇이 선택됐는지 명확하게 보이는 편이 이 부분에는 더 잘 맞았다.

작업 중 테스트와 타입 검사, 린트, 빌드 및 공개 경로 검사를 진행했다. 브라우저에서는 언어·테마 유지, 검색 조건 유지, 오류 재시도와 반응형 배치를 확인했다. 다만 모든 작은 스타일 수정마다 전체 빌드를 다시 돌린 것은 아니고, 실제 모바일 기기에서의 검증도 남아 있다.

오늘은 기능을 많이 늘리기보다 이 작업실이 어떤 모습이어야 할지 정한 날에 가깝다. 다음에는 프로젝트별 공개 가능한 이미지와 실제 역할·과정을 채우고, 지금의 임시 데이터를 진짜 기록으로 바꿔가려고 한다. 로그인과 권한, 게시글 관리, 비공개 문의, DB 연결도 아직 이어갈 작업이다. 프로젝트 오즈의 첫 개발일은 여기까지.