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

사주 AI웹서비스 제작노트 -16사주 AI웹서비스 제작노트 -15사주 AI웹서비스 제작노트 -14사주 AI웹서비스 제작노트 -13사주 AI웹서비스 제작노트 -12사주 AI웹서비스 제작노트 -11사주 AI웹서비스 제작노트 -10사주 AI웹서비스 제작uiweb.tistory.com 마지막 제작노트를 쓴 게 카카오톡 로그인 연동이었는데그사이 시간이 꽤 지남...로그인과 로그아웃, 마이페이지까지 만들고디테일을 조금 더 손봐야 하는데 당장 개발할 시간이 없어서찐망고 사주풀이는 일단 그대로 운영하고 있다.그러던 중 구글 API 서비스의 결제 방식이후불에서 선불로 변경돼서 그 설정을 바꿨다.찐망고 사주풀이에는 현재 다음 서비스가 연결되어 있다.Supabase: 로그인, 회원 인증, 데이터베이스Vercel: 사이트 배..

안녕하세요 찐망고입니다. 웹퍼블리싱 수업을 시작하면 가장 먼저 사용하는 프로그램 중 하나가 Visual Studio Code, VS Code입니다.HTML, CSS, JavaScript 코드를 작성할 수 있는 코드 에디터인데요.VS Code를 설치했다고 바로 코딩을 시작해도 되지만, 처음에 몇 가지 환경설정과 익스텐션을 설치해두면 훨씬 편하게 작업할 수 있습니다.이번 글에서는 제가 웹퍼블리싱 수업에서 사용하는 기준으로VS Code 기본 환경설정과 초보자에게 추천하는 익스텐션 6개를 정리해보겠습니다. VS Code를 처음 설치하면 기본적으로 어두운 테마가 적용되어 있는 경우가 많은데테마는 작업자의 취향이라 꼭 바꿀 필요는 없습니다.저는 수업할 때 화면을 같이 보거나 캡처해서 설명하는 경우가 많아서 밝은 테..

안녕하세요 찐망고입니다. 학생수가 너무 많아 피드백을 하다보면 시간을 너무 잡아먹게 되다보니 피드백 스킬 만들어본걸 공유해봅니다.아래는 읽기 편하게 써볼게요 일하면서 ChatGPT를 쓰다 보면 같은 설명을 반복하게 된다“회의 내용에서 결정된 사항과 할 일을 나눠줘.”“제안서를 볼 때 고객 요구사항이 빠졌는지 먼저 확인해줘.”“글을 수정하되 내가 쓰는 말투는 유지해줘.”작업할 내용은 매번 바뀌지만 원하는 방식은 비슷해지는데그때마다 요청문을 다시 쓰거나,어딘가 저장해둔 프롬프트를 가져와서 붙여넣기도 한다.이렇게 반복해서 사용하는 작업 방식과 기준을 스킬로 정리해둘 수 있다.쉽게 이야기하면 어떤 작업을 할 때 무엇부터 확인하고, 어떤 기준을 지키고, 결과를 어떻게 정리할지 적어둔 작업 지침이다. 예를 들면 ..

안녕하세요 찐망고입니다. 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랜딩페이지 중심 레퍼런스Her..