찐망고'S 퍼블리싱그리고디자인

8편에 걸쳐 AI 서비스를 기획하고, 설계하고, 만들고, 배포하는 과정을 다뤄보았다 이번 기수 학생들은기획부터 시작해서 디자인싱킹으로 서비스를 정의하고, 피그마로 설계하고, 직접 퍼블리싱해서 GitHub Pages에 배포했다. 수업에서는 ChatGPT, Claude, Gemini를 골고루 썼고도구는 각자 알아서, 여기까지 2달 반이 걸렸다. 아래는 학생들이 만든 실제 결과물이다. 온새미로 — 가족 농장 소개 사이트학생의 부모님이 운영하는 실제 농장 사이트를 만든 케이스다. 가상 브랜드가 아니라 진짜 운영할 사이트라서 학생의 태도가 다른 프로젝트와 달랐다. 진짜 쓸 상황이 되면 디테일에 대한 기준이 올라간다. Step 07에서 실배포가 기준을 바꾼다고 했는데, 이 학생은 기획 단계부터 그 기준이 적용된 ..

이전 글에서 실배포를 하면 기준이 올라가고, 기준이 올라가면 결과물이 달라진다고 했다. 마지막 단계는 그 결과물을 어떻게 정리하고 보여줄 것인가다.서비스를 만들고 운영하고 개선한 경험은 그 자체로 포트폴리오다. 하지만 경험이 있다는 것과 그걸 설득력 있게 보여주는 건 다른 문제다. 취업용 포트폴리오를 보면 대부분 완성된 화면을 나열한다. 예쁜 목업에 화면을 넣고 "이런 걸 만들었습니다"로 끝난다. 보는 사람 입장에서는 이게 본인이 한 건지, 어디까지 한 건지, 왜 이렇게 만든 건지를 알 수 없다. 이 시리즈에서 8편에 걸쳐 한 이야기가 전부 포트폴리오의 재료다. 왜 AI한테 판단을 맡기면 안 되는지 정의한 것, 정책서 없이 만들었더니 뭐가 부족했는지 발견한 것, 피그마를 안 쓴 이유와 써야 하는 시점의 ..

이전 글에서 코드만 올리는 게 퍼블리싱이 아니라, 서비스로 나가기 위한 조건을 갖추는 것까지가 퍼블리싱이라고 했다. 배포가 끝나면 서비스가 시작이 되는데 서비스가 시작되면 고칠 게 쏟아진다.정석적인 애자일은 이렇다. 1주 단위로 스프린트를 돌린다. 백로그에 할 일을 쌓고, 이번 주에 할 것을 정하고, 일주일 뒤에 회고하고, 다음 스프린트를 계획한다. 팀이 있으면 스탠드업 미팅을 하고, 진행 상황을 공유하고, 블로커*를 해소한다.더보기블로커(blocker)는 작업을 진행 못 하게 막는 장애물이다예를 들면 "카카오 로그인을 연동해야 하는데 개발자 콘솔 권한이 없어서 못 하고 있다" 같은 내가 아무리 코드를 짜도 권한이 없으면 진행이 안 되는걸 블로커라 함찐망고 사주는 혼자 만든 서비스다. 스프린트를 돌리지 ..

이전 글에서 Artifacts의 역할은 최종 산출물이 아니라 검증 도구라고 했다. 검증이 끝나면 실제 서비스로 옮기는 단계가 온다. 퍼블리싱이다. AI와 퍼블리싱을 협업하는 방법은 크게 두 가지다. Claude.ai 대화창에서 코드를 주고받는 방식과, Claude Code처럼 터미널에서 에이전트가 직접 코드를 쓰고 파일을 수정하는 방식.찐망고 사주는 전자로 만들었다. 코드를 받아서, 직접 확인하고, 수정하고, 붙여넣는 방식으로 작업했다. 한달이 채 안걸리고 런칭한 서비스가 이 방식으로 나왔다. 퍼블리싱과 JavaScript 수준에서는 대화로 충분했다. 코드를 받으면 읽을 수 있고, 어디가 틀렸는지 판단할 수 있고, CSS 한 줄 바꿔야 할 때 직접 바꿀 수 있다. AI가 준 코드를 통째로 쓰는 게 아니라..

포토샵으로 작업해 보는 인물 보정 총정리 1. 포토샵 머리축소 Filter > Distort > Spherize - 이미지나 텍스트를 둥근 구 형태나 볼록/오목한 형태로 왜곡해 주는 필터 기능 - 양 (Amount): 슬라이더를 오른쪽(+)으로 높이면 밖으로 튀어나오는 볼록한 구 모양이 되고, 왼쪽(-)으로 내리면 안으로 파인 오목한 형태가 됨- 모드(Mode): '보통(Normal)', '수평 전용(Horizontal Only)', '수직 전용(Vertical Only)' 중 선택하여 왜곡의 방향을 지정할 수 있음 2. 눈썹합성 - 배경지우개 도구 - 전경색: 눈썹색상 / 배경색: 피부색상 - 옵션바: Sampling-once / Limit-Discontiguous / Toler..

이전 글에서 디자인 시스템은 팀이 같은 언어를 쓰게 만드는 구조라고 했고, 시스템이 잡히고 나면 프로토타입으로 넘어간다 프로토타입에는 두 가지가 있다.피그마에서 화면 간 흐름만 연결한 클릭 프로토타입과,실제로 코드가 돌아가는 실동작 프로토타입.클릭 프로토타입은 흐름을 검증하는 데 충분하지만,스크롤 애니메이션이 어떻게 느껴지는지,FAQ 아코디언이 자연스러운지,모바일에서 터치가 편한지는 코드가 돌아가야 알 수 있다.예전에는 이걸 확인하려면 개발자가 직접 만들거나 했지만지금은 Claude의 Artifacts로 기획 단계에서 바로 실동작 프로토타입을 뽑을 수 있다. Artifacts에 랜딩페이지 만들어라고 하면 뻔한 게 나온다.그럴듯해 보이지만 어디에도 쓸 수 없는 결과물이다.AI한테 좋은 결과를 받으려면 좋은..

이전 글에서 MVP는 빨리 만드는 게 핵심이고, 피그마를 쓸지 말지는 판단의 문제라고 했다.판단의 문제라고 하긴 했지만 만드는게 맞습니다. 😎당연히 서비스가 커지기 시작하면 판단의 여지가 없어진다. 디자인 시스템이 필요해진다. 찐망고 사주에는 디자인 시스템이 없다. 버튼 색을 바꾸고 싶으면 코드에서 직접 바꾸면 됐다. 코드로 이미 root에 컬러시스템을 박아둠. 하지만 화면이 열 개가 넘고, 버튼이 스무 개가 넘고, 같은 컬러를 서른 군데에서 쓰고 있으면 얘기가 완전히 달라진다. 한 곳을 바꾸면 나머지 스물아홉 곳을 찾아다녀야 한다. 이게 디자인 시스템 없이 커진 서비스의 현실이다. 수업에서는 이 문제를 Figma Variables로 가르친다.디자인 파일에서 가장 많이 발생하는 사고는 "이 색이 뭐였..

STEP 02. AI 데이터 UX 리서치 — 정책서 없이 만들었더니 생긴 일STEP 01. AI 서비스 기획 기초 — 문제 정의부터 CRUD 설계까지보통 사주보러가면 물어보는 것들이 있다. 올해 재물운이 어떻고 연애운이 어떻고재회운이 어떻고 하는 그런 것들사주명식에는 보통uiweb.tistory.com 이전 글에서 리서치는 안하면 결국 나중에 두번일하는 것이라고 정의했는데그 다음은 화면을 그리는 단계다정석대로라면 Figma에서 와이어프레임을 잡고, Hi-Fi로 올리고, 프로토타입으로 흐름을 검증한 다음에 개발로 들어간다.화면설계없이 코드를 치면 중간에 구조를 뜯어고치게 될 수 밖에 없다.하지만 찐망고 사주는 피그마를 안썼..입력폼하나, 결과화면하나, 마이페이지하나 홤녀이 세게인 서비스가 이미 머릿속에 있..

STEP 01. AI 서비스 기획 기초 — 문제 정의부터 CRUD 설계까지보통 사주보러가면 물어보는 것들이 있다. 올해 재물운이 어떻고 연애운이 어떻고재회운이 어떻고 하는 그런 것들사주명식에는 보통 그 사람이 타고난 행동 패턴이 들어있다.어떤 방식으로 판uiweb.tistory.com 이전 글에서 AI서비스 기획의 첫번째 질문은 AI한테 뭘 맡기고 뭘 맡기지 않을 것인가 라고 했는데그다음은 검증이다. AI서비스를 기획할 때 정석적인 순서가 있다.상위 계획을 세우고, 정책서를 쓰고, 요구 사항을 정의하고 사용자 리서치도 그 안에 들어간다.경쟁 서비스의 리뷰를 긁어 AI로 분류하고, 사용자가 뭘 원하고 뭘 싫어하는지 먼저 파악한 다음에 설계에 반영한다. 정석대로라면 이런 문서들이 먼저 나와야 한다.상위계획에..

보통 사주보러가면 물어보는 것들이 있다. 올해 재물운이 어떻고 연애운이 어떻고재회운이 어떻고 하는 그런 것들사주명식에는 보통 그 사람이 타고난 행동 패턴이 들어있다.어떤 방식으로 판단하고, 어디에서 에너지를 제일 많이 쓰고, 어떤 환경에서 힘을 발휘하고, 대운이 바뀌면 그 패턴이 강해지기도, 눌리기도 한다.사주를 보고 파악해야할 건 너는 원래 이런 사람이니 시기마다 전략적으로 움직여라를 알려주는 서비스다. 그런데 이걸 제대로 하려면 기존 AI사주 앱들의 방식으로는 안되는데그이유는 대부분의 AI사주앱은 생년월일을 받아서 AI한테 넘기고, AI가 알아서 판단하고 해석까지 한다. 문제는 사주에는 만세력이라는 계산 체계가 있고, 신강신약이라는 판단기준이 있고, 용신이라는 핵심 변수가 있다 이걸 AI가 혼자 처..