코딩은 ai한테 시켜놓고
디자이너는 뭐해요? (1)
바이브 코딩으로 프리랜서를 위한 대시보드 만들기
코딩은 ai한테 시켜놓고
디자이너는 뭐해요?
유튜브 보나요?
아뇹. 코알못 디자이너는 ai한테 코딩시켜 놓고, 생각할 시간을 벌 수 있게 되었습니다. 그리고 그 시간에 이렇게 글을 쓸 수도 있게 되었죠!
예시 1
두 개의 장부를
한눈에 확인하기
프리랜서 부부의 장부 만들기
프리랜서 부부는 수입을 공유하기 위한 장부가 필요했다. 이들의 가장 큰 목적은 예상 수입과 실제 수입을 한눈에 확인하는 것이었다. 처음에 ai가 뱉은 화면에는 '예상 수입'과 '실제 수입'탭이 따로 있었다.
하지만 두 개의 장부를 관리하는 일은 번거롭다. 두 지표를 한눈에 보기도 어렵고. 그래서 ai가 코딩을 하는 동안 디자이너는 생각했다. '하나의 장부에서 토글로 상태를 변경하게 해야겠다.' ai가 코딩을 마치자, 디자이너는 좀 전에 떠올랐던 생각을 정리해서 지시했다. 아래는 그 결과물이다.
예시 2
반복 입력하는 내용은
프리셋으로 만들기
매번 발생하는 수입의 클라이언트가 다르지 않을 텐데, 클라이언트를 매번 입력하는 건 번거로웠다. 그래서 프리셋을 만들어 달라고 이야기했다. 그리고 클라이언트를 등록할 때, 계약금액도 같이 입력하면 클라이언트를 선택했을 때 수익도 자동으로 끌어와지도록 만들었다.
예시 3
결제 대금 분할 설정하기
남편이 아내에게 물었다. '잔금, 선금으로 들어오면 어떻게 해?'
아하, 결제를 한 번에 받는 게 아니라 분할해서 받는 유즈케이스가 있었구나. 지금은 입금 여부를 단건으로 입력하게 되어있어서, 분할 입금되는 건에 대응하기엔 디테일이 부족했다. 프로젝트 하나에 선금, 중도금, 잔금 티켓을 3번 생성하는 것도 번거롭잖아. 그래서 분할되어 입금되는 프로젝트의 경우, 프로젝트를 생성할 때 옵션을 설정할 수 있도록 하고, 수입을 추가하면 자동으로 선금, 잔금, 중도금 티켓이 생성되도록 했다. 요구한 내용은 아래와 같다.
1. 클라이언트 하위에 '프로젝트'라는 개념 만들기
2. '프로젝트'의 경우 선금, 중도금, 잔금을 설정할 수 있는 옵션 만들기
3. 수입 추가 할 때, 위 옵션에 따라 자동으로 티켓을 구분하여 생성하기
선금, 중도금, 잔금의 토글을 별도로 on/off 할 수 있다.예시 4
문제가 발생하는 구간은
일단 들어내고 생각하기
같은 구간에서 1시간째 도돌이표 같은 상황이 지속되다 보니 슬슬 지쳤다. 왜 멀쩡했던 건 지워버리고, 시키지도 않은 걸 추가하는지.
수입추가 모달에서 프로젝트를 입력해도 모달이 닫히면 안 되는데, 자꾸만 모달을 닫고 추가 Flow를 종료했다. 내용을 전부 입력하지 않았는데 모달이 닫혀버리는 건 문제였다. 그런데 가만 생각해 보니, 모달이 닫히는 시점에 입력하지 않았던 정보들은 꼭 필요한 내용들은 아니었다.
그래서 문제가 발생하는 구간의 입력필드를 제거해 달라고 요청했다. 일단 메인 기능부터 제대로 돌아가게 만들어 놓고 우회하는 방법을 생각하는 것도 나쁘지 않은 선택이라고 생각했기 때문이다.
대망의
디자인 워싱하기
아시다시피 ai가 뱉는 디자인이란 그렇게 썩 보기 좋지 않다. 텍스트 사이즈부터 컬러 시스템까지 일일이 지시하려니 어디서부터 손을 대야 할지 모르겠더라. 혹은 시안을 통째로 학습시키는 방법도 있긴 하다.
딱히 디자인 컨셉이 있는 것도 아니고, 어느 정도 보기 편한 UI 었으면 좋겠다고 생각했다. 그래서 오픈소스로 제공되고 있는 UI 디자인 시스템을 참고해서 디자인을 고쳐달라고 요청해 봤다.
이게 된다고..? 결과는 어떻게 되었을까. 하는 척만 열심히 하더니 기존 디자인에서 하나도 바뀐 게 없었다. 5분 넘게 돌아가길래 '오, 꽤 오래 걸리네. 제대로 적용하려나..?'싶었는데, 기존과 완전히 동일한 UI를 뱉다. 구라 치지 마 새끼야
이미 많은 사람들이 디자이너의 역할이 바뀌고 있다고 말한다. 나도 거기에 동의하면서도 한 편으론 변하는 세상이 두려웠다. 그런데 우리는 대게 잘 알지 못하는 것에서 두려움을 느끼는 것 같다. 이제까지 그래왔듯이 시작하고 나니 두려움이 좀 가시는 것 같다.
끝.
