#1 기획단계 및 UI 작업

드디어 1인 토이 프로젝트를 시작하게 되었다

이번 토이 프로젝트의 큰 주제는 바로 ‘이름표 자동 생성기’다. 이름표라니, 사실 듣기엔 좀 사소해 보일 수 있지만, 의외로 업무에선 엄청난 시간과 노력이 들어가는 작업이다.

내가 다니는 회사에서는 신입사원이 입사할 때마다 이름표를 한 명씩 수동으로 만든다. 각자 이름을 입력하고, 직급도 넣고, 출력 버튼을 눌러 프린트하는 과정이 꽤 번거롭다. 특히 신입이 많거나 직급 변동이 잦은 시기엔 이 작업이 정말 귀찮고 비효율적이다.

“이걸 자동화할 수는 없을까?” 하는 생각이 들어서, 이번 프로젝트를 시작하게 됐다.

프로젝트의 핵심 목표

• 시간 절약: 수십 명씩 수동으로 작업하는 대신, 엑셀 파일 한 번 업로드로 이름표를 자동 생성
• 편의성 향상: 이름, 사진, 직급 등 필요한 데이터를 한 번에 처리
• 유연한 데이터 처리: 엑셀의 컬럼 구조를 최대한 자유롭게 활용하고, 원하는 변수만 추출 가능
• 인쇄 최적화: 인쇄용 출력물까지 한번에 생성될 수 있도록
• 디자인 커스터마이징: 앞면과 뒷면 배경 PNG 불러오기 기능 지원

왜 직접 만들까?

사실 이름표 제작을 도와주는 소프트웨어는 이미 많다. 대표적으로 망고보드나 미리캔버스 같은 툴들이 있다. 그런데 문제는, 이런 툴들은 대량의 명단을 한꺼번에 자동 처리하는 배치 기능이 없다는 점이다.

결국 직원 명단이 조금만 많아져도 수작업이 불가피해지고, 내가 직접 만든 시스템이 있다면 이런 비효율을 확실히 줄일 수 있으리라 기대하고 있다.

1차 UI 작업 이야기

나는 솔직히 디자인 감각이 전혀 없다. 그래도 포기하지 않고 피그마(Figma)라는 툴을 통해 UI를 정성스럽게 만들었다. 프로토타입을 만들면서 어떤 흐름으로 사용자가 편리하게 작업할 수 있을지 계속 고민했다. (엣헴)

디자인은 단순하면서도 직관적이어야 한다는 생각에 최대한 깔끔하게 구성하려 노력했다.

 

(엣헴)

 

사용할 개발 환경 및 도구

• VS Code: 가벼우면서도 강력한 코드 에디터
• React.js: 컴포넌트 단위로 UI를 효율적으로 관리하기 위해
• styled-components: CSS-in-JS 방식으로 스타일 관리를 깔끔하게 하려고

앞으로 계획과 기대

이번 프로젝트를 통해 단순 반복 작업을 자동화하는 과정에서 많은 걸 배우고 싶다. 또한, 내가 직접 만든 툴이 실제 업무에서 시간을 아끼고, 신입사원 이름표 제작 업무를 담당하는 분들께도 도움이 된다면 정말 보람찰 것 같다.

계속해서 개발 과정과 결과를 공유할 예정이니, 관심 있는 분들은 지켜봐 주시길!