우당탕탕 개발 이야기를 적어보렸는데
기존 유지보수 사업 + 새로운 SI 프로젝트 + 전시회 참여 + 시험준비 등으로 인해
한달만에 완성하고... 블로그는 잊고 있던 내자신.... 의도치 않게 갓생(?)을 살았습니다.....
여차저차 클로드를 채찍질해서 만든 우리 회사의 사내 SM 사이트!

팀이 워낙 외근이 많은 특성을 가지고 있어서, PC 화면은 기본이고 밖에서도 핸드폰으로 편하게 이슈를 확인할 수 있도록 반응형으로 구현하는 데 신경을 많이 썼습니다!


그리고 생각만 하던 재미있는 기능들을 조금씩 넣어봤는데 외근직들의 가장 좋아하는 것은 "디지털 명함" 기능이었습니다(ㅋㅋㅋㅋㅋ)

어쩌다 보니 전부 모자이크 처리를 하게되었는데...
1️⃣ 세션 기반 자동 렌더링: 현재 로그인한 사용자의 세션을 기준으로 DB에서 정보를 싹 긁어와서 HTML 변수에 주입합니다. 이름, 부서, 이메일은 물론이고 이에 맞춘 나만의 QR코드가 즉시 셋팅됩니다!
2️⃣ QR 스캔 = 연락처 즉시 저장: 미팅 가셔서 상대방이 이 QR을 카메라로 찍기만 하면? 상대방 폰의 '연락처 추가' 화면으로 모든 정보가 기입되어서 바로 저장 가능합니다.
3️⃣ 원클릭 텍스트 복사: 가끔 "명함 문자로 남겨주세요~" 하시는 분들을 위해, 버튼 하나 누르면 아래처럼 예쁘게 정제된 텍스트가 클립보드에 복사됩니다.
기술팀 홍길동 주임
Email: honggd@ganada.co.kr
Tel: 070-0000-0000
회사: 02-1234-1234
08382 서울특별시 구로구 디지털로
https://www.ganada.co.kr
4️⃣ 🔒 프라이버시 보호 (선택사항): 팀원 중에는 개인 인터넷 전화나 폰 번호 노출을 부담스러워하시는 분들도 당연히 계시기 때문에 번호 노출 여부는 '마이페이지'에서 본인이 직접 ON/OFF 할 수 있도록 처리했습니다.
최근에도 꽤나 유용했었는데, 인수인계를 하려 다른 팀원과 방문했을때 동료가 명함을 깜빡해서 바로 문자로 보내드렸다는 썰...!
팀장님께서도 유독 좋아했던 기억이 납니다 ㅎㅎㅎ
이참에 정리해 보는 핵심 기술 스택!✨
이번 프로젝트는 클로드의 도움을 아주 많~이 받은 김에 최신 기술들로 구성했는데,
나중에 이력서나 포트폴리오 업데이트할 때 보려고(ㅋㅋ) 블로그에 박제해 둡니다. 혹시 비슷한 스택으로 플젝하시는 분들 참고하셔도 좋을 것 같아요!
Backend (sm-portal-api)
- Language & Framework: Java 21 🚀 + Spring Boot 4.0.0
- Build Tool: Gradle 8.14 (요즘 대세인 Kotlin DSL 적용!)
- Database: PostgreSQL 🐘
※ 특이사항: SM 메인 DB와 그룹웨어 연동 DB(읽기 전용)를 멀티 데이터소스로 분리해서 구축했습니다. - ORM: Spring Data JPA + QueryDSL 5.1.0 (복잡한 검색/페이징 처리 해결사)
- Security & Auth: Spring Security + JWT (Access 1시간 / Refresh 7일)
- Mapping: MapStruct 1.6.3 (Entity ↔ DTO 변환 노가다 해방)
- API Docs: Swagger UI (springdoc-openapi)
Frontend (sm-portal-web)
- Language & Framework: TypeScript 5.7 + React 19
- Build Tool: Vite 7.0.0 (빌드 속도 진짜 미쳤음👍)
- Styling: Tailwind CSS 4.3 + daisyUI 5.5 (반응형 다크/라이트/레트로 테마 구현 꿀조합)
- State Management:
- Server State: @tanstack/react-query 5.67 (API 캐싱)
- Client State: React Context API (Auth 및 전역 설정용) - Components: @toast-ui/editor, tui-grid, tui-calendar 등 Toast UI 적극 활용
Infra & DevOps
배포는 사내 리눅스 서버에 Docker Compose를 활용해서 컨테이너로 깔끔하게 올렸습니다.
API 서버는 jdk21 이미지로, Front는 nginx:alpine 이미지에 정적 파일 빌드해서 리버스 프록시(/api/ 경로 라우팅) 설정까지 완료!
이번 프로젝트를 마치며 느낀점!
새로운 기술들만으로 처음으로 back-front 과 분리된 프로젝트를 하면서, 어떤 구조로 해야하는지 어떠한 config 파일들을 만들어야하는지 등 정말 제로부터 시작했습니다....
바로 인프런에서 비슷한 느낌의 강의를 구매해서 초속으로 듣고 유뷰브에서 외국인 개발자들의 강의를 들으면서 기반을 다졌고
중간중간 클로드가 만들어둔 구조를 보면서 "이건 모듈화 하는게 좋겠다", "이런 기능들은 Util 에 묶어줘" 등 경험을 살려서 만들었습니다.
비록 새로운 기술스택이라 아직 코드를 전부 뜯어보지는 못하고 삽질도 좀 오래 했지만..
그래도 이렇게 다들 만족스럽게 사용하고 있는거 보니까 너무 뿌듯합니다 ㅎㅎㅎ
또 다양하고 재미있는 기능을 추가하고 싶은데 이런 부분들으 추후 천천히 올려보도록 하겠습니다~!
'What's going on' 카테고리의 다른 글
| [개발일상] 부트1도 모르는 개발자의 사내사이트 개발기(1) (0) | 2026.05.11 |
|---|---|
| 26년 1월, 새해 시작 : 일단 살아남았다 (1) | 2026.02.09 |
| 2025년 아듀 👉🏻 2026년 웰컴! (3) | 2026.01.05 |

















