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

안녕하세요 찐망고입니다. part1) 웹사이트는 왜 이렇게 만들었을까? 디자인을 위한 사이트 분석안녕하세요 찐망고 입니다. 이번 글은 AI 활용 웹콘텐츠 실무양성과정에서 진행한 수업 중 일부를 정리한 내용입니다. 이번 학생들은 고3아이들이고 특성화고 친구들이 전국에서 모였는데웹사uiweb.tistory.com 이포스팅은 리뉴얼 사이트 프로젝트를 하기위한 수업과정을 파트별로 진행하는 수업노트입니다. 지난 수업에서는 기존 웹사이트의 문제점을 찾고, 경쟁사와 다른 업종의 레퍼런스를 조사한 뒤 우리 사이트에 무엇을 어떻게 적용할 것인지 리뉴얼 방향까지 정리했다.이제 화면을 그리면 될 것 같지만 아직 아니다. ㅋㅋ지금까지 생각한 내용을 실제 웹사이트의 구조로 만드는 IA(Information Architectur..

안녕하세요 찐망고입니다 아래는 강의중 내용을 정리한 포스팅입니다 Figma강의를 하다가 오랜만에 취업 포트폴리오반을 수업하다보니 문득 이런 생각이 들었다.Figma를 잘 다루는 것만으로 취업이 될까? 요즘 AI로 대체되는 업무도 늘어나고 있고, 물론 어느부분은 대체하지 못하는것도 안다. 신입보다는 경력자들을 우대하는 마당에..그럼에도 불구하고 이친구들을 조금이라도 더 나은 곳으로 보내고자 하는 마음에 해본 생각물론 툴은 잘 다뤄야 한다오토레이아웃, 컴포넌트, 화면도 완성도있게 디자인해야하고 그런데 채용공고를 보다보면 디자이너 앞에 붙는 이름이 다양하다웹디자이너, UI/UX디자이너, BX디자이너, 브랜드 디자이너, 콘텐츠 디자이너..디자이너 앞에 붙는 이름은 왜 계속 달라지는 걸까?수업중에 학생들에게 이..

안녕하세요 찐망고입니다. part1) 웹사이트는 왜 이렇게 만들었을까? 디자인을 위한 사이트 분석안녕하세요 찐망고 입니다. 이번 글은 AI 활용 웹콘텐츠 실무양성과정에서 진행한 수업 중 일부를 정리한 내용입니다. 이번 학생들은 고3아이들이고 특성화고 친구들이 전국에서 모였는데웹사uiweb.tistory.com 이포스팅은 리뉴얼 사이트 프로젝트를 하기위한 수업과정을 파트별로 진행하는 수업노트입니다. 이전 글에서는 리뉴얼할 웹사이트를 선정하고 기존 사이트를 분석해서 어떤 문제가 있는지 찾아봤었다. 이번에는 그다음 단계인 레퍼런스 찾기를 진행했는데웹디자인을 할 때 레퍼런스를 많이 찾아본다이번에도 당연히디자인이 예뻐서레이아웃이 마음에 들어서인터랙션이 재미있어서요즘 많이 사용하는 스타일이라서 레퍼런스를 고르지 않..

안녕하세요 찐망고입니다.이글은 웹사이트는 왜 이렇게 만들었을까에서 부터 시작하는 연재글입니다. part1) 웹사이트는 왜 이렇게 만들었을까? 디자인을 위한 사이트 분석안녕하세요 찐망고 입니다. 이번 글은 AI 활용 웹콘텐츠 실무양성과정에서 진행한 수업 중 일부를 정리한 내용입니다. 이번 학생들은 고3아이들이고 특성화고 친구들이 전국에서 모였는데웹사uiweb.tistory.com앞에서는 웹사이트를 디자인만 보는 것이 아니라회사와 브랜드는 어떤 곳인지, 무엇을 판매하는지, 타깃은 누구인지,웹사이트의 목적과 콘텐츠 순서, 마케팅, CTA, 브랜딩과 디자인까지 연결해서 분석해봤다.그리고 학생이 먼저 직접 분석한 뒤 AI와 비교하면서내가 생각한 것이 맞는지, 근거가 충분한지, 놓친 것은 없는지도 다시 확인했다.여..

안녕하세요 찐망고입니다 일단 이전글 공유 part1) 웹사이트는 왜 이렇게 만들었을까? 디자인을 위한 사이트 분석안녕하세요 찐망고 입니다. 이번 글은 AI 활용 웹콘텐츠 실무양성과정에서 진행한 수업 중 일부를 정리한 내용입니다. 이번 학생들은 고3아이들이고 특성화고 친구들이 전국에서 모였는데웹사uiweb.tistory.com 지난 글에서는 디자인을 하기 전에 웹사이트를 어떤 관점으로 분석했는지에 대한 수업 내용을 정리했는데회사와 브랜드는 어떤 곳인지, 무엇을 판매하는지, 타깃은 누구인지부터 시작해서웹사이트의 목적, HERO, 콘텐츠 순서, 마케팅, CTA, 브랜딩과 디자인까지 살펴보았음 그리고 학생들이 각자 웹사이트를 하나씩 선택해서 직접 분석했는데이번에는 여기서 AI를 같이 활용했다.AI에게 처음부터..

안녕하세요 찐망고 입니다. 이번 글은 AI 활용 웹콘텐츠 실무양성과정에서 진행한 수업 중 일부를 정리한 내용입니다. 이번 학생들은 고3아이들이고 특성화고 친구들이 전국에서 모였는데웹사이트에 친숙한 친구들은 아니다.디자인 수업을 하다 보면 레퍼런스 사이트를 많이 찾아보게 되는데예쁜 사이트, 인터랙션이 재미있는 사이트, 요즘 많이 사용하는 레이아웃 등좋은 사이트를 많이 보는 것도 디자인 공부에 필요하다고 이야기 한다.레퍼런스를 찾는 것과왜 이 웹사이트가 이렇게 만들어졌는지를 이해하는 것은 조금 다른 문제라는걸 인지시키는데 같은 디자인이라도 어떤 회사인지, 무엇을 판매하는지, 누가 사용하는지에 따라 웹사이트에서 중요하게 보여줘야 하는 정보가 달라지기때문에이번 수업에서는 디자인을 시작하기 전에웹사이트를 만든 ..

안녕하세요 찐망고입니다. 예전에도 웹디자인과 UI 디자인 레퍼런스 사이트를 정리한 적이 있는데시간이 지나면서 자주 사용하는 사이트도 조금 달라졌고, 단순히 사이트를 나열하기보다 어떤 작업을 할 때 어디를 보면 좋은지 기준으로 다시 정리해보는 걸로!1. GDWEB국내 웹디자인 어워드·레퍼런스국내 기업/브랜드 웹사이트, 업종별 디자인국내 웹사이트2. Awwwards세계적인 웹디자인 어워드최신 웹 트렌드, 인터랙션, 타이포그래피, 레이아웃트렌드/인터랙션3. CSS Design Awards글로벌 웹디자인 어워드UI/UX, 비주얼, 인터랙션, 새로운 표현트렌드/웹디자인4. Lapa Ninja랜딩페이지 중심 레퍼런스Hero, 콘텐츠 순서, CTA, 전환 구조랜딩페이지5. Behance디자이너 포트폴리오 플랫폼웹·앱..

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

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

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