vue.js 토이 프로젝트 - 코드 관리 서비스 제작기 (3) ui/ux

 

이전 글 보기

- 전체 코드 및 소개는 1편에서 확인할 수 있습니다.

2023.12.13 - [개발 일지] - vue.js 토이 프로젝트 - 코드 관리 서비스 제작기 (1) 프로젝트 소개

2023.12.14 - [개발 일지] - vue.js 토이 프로젝트 - 코드 관리 서비스 제작기 (2) localStorage

---

 

이전 편에서 localStorage를 이용해 코드 조각들을 관리했다.

오늘은 코드 수정, 삭제 기능을 추가하기에 앞서 전체적인 ui/ux를 변경해보는 과정을 진행했다.

 

기능을 추가하는데 왜 ui/ux를 변경하냐 한다면... 😅

기존 페이지의 디자인을 너무 제멋대로 정했더니 기능을 추가하기가 너무 까다로웠다.

 

처음 만들 때 "동적으로 파일 조회!!!"에만 꽂혀서 만들었기 때문에 추후 구현될 기능에 대해서 아무 생각도 없었다.

뭐 이런 말도 안되는 이유로ㅠㅠ 전체적인 디자인을 싹 갈아 엎었다.

 

다음은 변경 전 후 사진.

 

디자인 변경 전 토이프로젝트의 메인 화면

 

디자인은 최대한 많이 고민해봤는데, 고민한 시간이 무색하게 결론은 쉽게 났다.

코드가 어디에 있겠어...? 코드 에디터지.... 😎

그렇게 vscode 에디터를 참고해서 확 바꿨다. 너무 바꿔서... 아쉬워...

나중에 테마 기능을 꼭 넣어서, 원래 느낌을 살려야겠다. ..

 

아무튼 바꾸고 나니 전처럼 화사하고 발랄한 느낌은 없지만 확실히 깔끔하고 세련된 느낌이다.

클립보드에 있는 내용으로 저장하는 충격적인 방식도 나름 일반적인 방식으로 변경했다.

 

우측 하단에 보면 copy 버튼이랑 add 버튼을 이용하면 된다.

 

변경된 코드 추가하는 부분

 

수정 기능도 비슷한 느낌으로 가져가면 될 것 같다.

복사 기능은 그냥 버튼을 누르면, 클립보드에 복사 되므로 따로 이미지는 없다.

 

작업 중간에 프로젝트의 제일 큰 틀인 메인 화면을 바꾼다는 것은 굉장히 번거로운 작업이었다.

다음에 토이프로젝트를 만들 때는 꼭 고려해서 기획해야겠다.

 

이제 남은 기능 넣고 코드 하이라이팅 기능만 다듬으면 될 것 같다.

사실 제일 어려운 부분일 것 같아서 걱정은 많이 되지만... 못하기야 하겠어... 😇