codingai

안녕하세요. 제가 지금 스티치를 들어가봤는데요. 스티치에서 피그마로 추출하는 것을 지원하다가 지원을 종료한 것으로 보입니다.<img src="https://cdn.inflearn.com/public/files/posts/1d5d0e56-d445-468f-969e-80ca2920bb78/b6f3be84-93f8-4724-af9b-3dd7ce0a6479.png" media-type="img" alt="image.png" title="image.png" width="643" height="532"> 그래서 이제 선택지는<img src="https://cdn.inflearn.com/public/files/posts/e31d686c-fd0b-460c-ace5-e46a2f969059/65364cb4-fbf6-4443-a778-ed02e10c6cb9.png" media-type="img" alt="image.png" title="image.png" width="643" height="925"> html to design 플러그인을 사용하시는 방법이 남게 된 것 같습니다. 10회까지는 무료고, 10회 이상일 경우엔 유료로 사용 가능합니다.

구글 스티치에서 피그마로 내보내기

<img src="https://cdn.inflearn.com/public/files/posts/9fe43d2e-77e6-458a-8cdf-d2b394e4b31c/cc86364d-a37c-4316-bc3c-6f56a5d40a71.png" media-type="img" alt="image.png" title="image.png" width="262" height="266">안녕하세요. 저는 맥을 쓰고 있는데요. iShot을 쓰고 있습니다. 윈도우시라면 기본 캡쳐 프로그램을 쓰면 됩니다. 저도 윈도우를 쓸 때는 기본 캡쳐 프로그램 썼었는데 맥에서는 캡쳐가 불편해서 계속 iShot을 쓰고 있습니다.:)

캡쳐할때 쓰시는 프로그램 이름 알 수 있나요?

안녕하세요. >> 표시로 각 항목별 답변 드려요.실제로 개발할때 IA, 페르소나만 있으면 되나요?제가 앱을 하나 개발중인데요. 저 혼자 1인 개발로 하고 있습니다. 일단 생각나는데로 페이지 하나씩 개발하다보니 페이지 다 만들고나서 기능 추가, 수정을 위해 갈아 엎는 경우가 계속 생기더라구요.AI에 물어보니,&nbsp;혼자서 개발할 때의 적용 순서 (요약)"대참사"를 막기 위한 가장 이상적인 생각의 흐름은 다음과 같습니다.1. "누구를 위한 앱이지?" -> 유저 페르소나를 간단히 정의한다. (예: "30대 초반의 이직 준비생, 김코딩")>> 네 맞습니다. 이게 정말 필요합니다. 누구를 위한 서비스인가를 먼저 생각하고 시작해야 합니다.1. "김코딩은 지금 어떤 어려움을 겪고 있지?" -> 유저 저니맵을 그려본다. (예: "강의 정보가 흩어져 있어 비교하기 힘들다"는 Pain Point 발견!)>> 네 이건 사실 유저 저니맵은 대기업이나 해외기업이 아니고선 하진 않습니다. 하지만 좀 기획을 공을 들이는 스타트업이나 개인들은 이것을 추가로 하기도 합니다. 그런데 사실 지금은 AI 시대라서 AI에게 요청하고 해당 내용을 받아서 동의하거나 일부 생각이 다른 부분을 수정해달라고 하면 돼서 유저 저니맵을 그려보는 것도 좋습니다.1. "좋아, 이 문제를 우리 앱으로 어떻게 해결해 줄까?" -> 핵심 기능들의 유저 플로우를 그린다. (예: "강의 비교하기" 플로우, "수강 신청" 플로우를 그려보며 필요한 화면들을 구체화한다.)>> 네 이것도 AI로 10분이면 할 수 있는 일이어서 해보는 것을 추천드려요.1. "그래서 우리 앱은 총 몇 개의 화면이 필요하고, 메뉴는 어떻게 구성할까?" -> IA를 정리한다. (예: 엑셀에 필요한 페이지 목록과 메뉴 구조를 쭉 적는다.)>> 이 부분은 AI가 아직 잘 못하는 것 같아요. 그리고 메뉴의 구성이 해외의 서비스와 국내 서비스가 유사하기도 하지만 다른 부분도 많고 AI는 이런 서비스의 메뉴를 너무 과하게 만들 거야 너무 간소화해서 만들거나 해서 이 부분에 있어서 경력이 없으신 분들은 기준 잡기가 어렵다고 생각합니다. 하지만 방법이 있습니다. 그건 실제로 존재하는 유사 서비스를 직접 파악해서 메뉴 구조를 작성해보시면 아~ 이런 서비스는 이런 정보의 규모가 필요하구나를 아실 수 있고 그렇게 직접 작업하시면서 AI에게 더블체크하시면 도움이 되실 거에요.1. "각 화면의 레이아웃은 어떻게 잡고, 흐름은 자연스러운가?" -> 와이어프레임/프로토타입을 만든다. (예: Figma로 간단히 화면들을 그리고 연결해서 직접 클릭해본다.)>> 피그마로 할 수 있는 것은 1차 UI를 그리고 2차 프로토타이핑을 해보면 흐름을 시뮬레이션을 할 수 있어서 누락된 UI를 발견해서 추가하실 수 있으실 거에요. 직접 클릭해보면 누락 포인트를 더 확실하게 잡아내실 수 있으실 거에요.1. "오케이, 이대로 만들면 되겠다!" -> 이제 개발을 시작한다.>> 일단 1) 유저 페르소나 2) IA 3) UI 4) 프로토타이핑 그런데 프로토타이핑을 전체 페이지를 할 필요는 없고 회원가입, 로그인, 비번찾기, 마이페이지 등 회원체계에 대해선 꼭 해야 하고요. 이게 기본 뼈대니까요. 그리고 핵심 페이지들 정도 쇼핑몰이면 리스트, 상세, 결제 등 정보를 프로토타이핑을 해보시면 됩니다. 더 욕심을 내시면 더 하셔도 되는데 프로토타이핑도 노가다여서요.^^; 5) 마지막으로 기능정의까지 해놓으시면 기획단에서는 다음 단계인 디자인, 개발을 위한 준비는 된 것입니다.이 과정을 거치면, 개발 단계에서는 이미 구조가 다 정해져 있기 때문에 '뭘 만들어야 하지?'를 고민하는 대신 '어떻게 잘 만들지?'에만 집중할 수 있습니다. 라우팅이 꼬이거나 페이지를 뒤엎을 확률이 극적으로 줄어들게 됩니다.>> 맞습니다. AI 시대에 기획이 더 필요한 이유입니다. 설계 단계에서 시행착오를 다 겪고 디자인 단계부터는 달리시면 되는 게 맞습니다.&nbsp;위와같이 얘기해주는데요. 유저 저니맵과 유저 플로우는 따로 할 필요가 없나요? 선생님 강의에 내용이 없는거 같아서요. 그리고 와이어프레임과 프로토타입은 같은거에요?>> 유저 저니맵, 유저 플로우는 선택이지 필수는 아닙니다. 그리고 IA 작성이 번거로우시다면 유저 플로우가 IA와 유사한 것이어서 유저 플로우를 만드셔도 됩니다.네 제 강의의 커리큘롬이 현업에서 더 보편적으로 쓰이는 것이고 현업에서는 유저 저니맵, 유저 플로우는 저 말고는 하는 분들을 보지 못했습니다.와이어프레임은 UI를 뜻하고, 프로토타입은 견본품이란 뜻인데 피그마에서의 프로토타입은 각 화면 UI를 연결하는 것으로 프로토타입이라고 합니다.그럼 우선 답변이 된 것 같고요. 추가로 궁금하신 사항은 또 문의 주세요. 저 역시 매일매일 기획을 하거나 개발을 하고 있어서 바로 바로 답변은 드리지 못하지만 지금과 같이 또 답변 드리겠습니다.감사합니다.^^

실제로 개발할때 IA, 페르소나만 있으면 되나요?

안녕하세요. 최근 커서 ai 업데이트로 노트패드 위치가 왼쪽으로 이동했습니다. 확인 부탁드려요.^^ <img src="https://cdn.inflearn.com/public/files/posts/0fccf714-45a9-44de-95a1-74659ed34d62/49f117b0-4a2e-41a2-aecc-e0ffa28984bf.png" media-type="img" alt="image.png" title="image.png" width="643" height="536">

커서 ai 노트패드가 안보여요.

죄송하지만 별도의 파일을 제공해드리진 않아서요.;;

문의드립니다

Canva에서 작업 중인 디자인의 캔버스 세로 크기를 조정하려면 다음 방법을 사용하실 수 있습니다.&nbsp;1. 새로운 맞춤형 크기 디자인 생성 후 기존 디자인 복사:&nbsp;Canva 무료 버전에서는 작업 중인 디자인의 크기를 직접 변경하는 기능이 제공되지 않습니다. 그러나 다음과 같은 방법으로 세로 크기를 조정할 수 있습니다:&nbsp;새로운 디자인 생성: Canva 홈 화면에서 우측 상단의 '디자인 만들기'를 클릭한 후, '맞춤형 크기'를 선택합니다. 여기서 원하는 가로 및 세로 크기를 입력하여 새로운 빈 캔버스를 생성합니다.&nbsp;기존 디자인 복사: 기존 디자인으로 돌아가 모든 요소를 선택한 후 복사(Ctrl+C)합니다. 그런 다음 새로 만든 캔버스에 붙여넣기(Ctrl+V)하여 요소들을 배치합니다. 이때, 요소들의 위치나 크기를 새 캔버스에 맞게 조정해주셔야 합니다.&nbsp;&nbsp;이 방법을 통해 무료 버전에서도 원하는 세로 크기의 캔버스를 사용할 수 있습니다. ​​&nbsp;2. Canva Pro의 '크기 조정' 기능 사용:&nbsp;Canva Pro 사용자라면 '크기 조정' 기능을 활용하여 디자인의 크기를 쉽게 변경할 수 있습니다:&nbsp;크기 조정: 편집기 상단 메뉴에서 '크기 조정'을 클릭한 후, 원하는 새 크기를 선택하거나 직접 입력합니다. '크기 조정'을 클릭하면 현재 디자인의 크기가 변경되며, '복사 및 크기 조정'을 선택하면 원본 디자인은 유지되고 새로운 크기의 디자인이 복사본으로 생성됩니다.&nbsp;&nbsp;이 기능을 통해 작업 중인 디자인의 세로 크기를 손쉽게 조정할 수 있습니다. ​​&nbsp;3. 요소의 세로 크기 조정:&nbsp;캔버스 자체의 세로 크기를 변경하는 대신, 디자인 내 특정 요소의 세로 크기를 조정하려면 다음을 참고하세요:&nbsp;요소 선택: 크기를 조정하려는 요소를 클릭합니다.&nbsp;크기 조정: 선택한 요소의 모서리에 나타나는 크기 조절 핸들을 드래그하여 세로 크기를 조정합니다.&nbsp;정확한 크기 입력: 상단 메뉴의 '위치'를 클릭한 후, '고급' 섹션에서 너비와 높이 값을 직접 입력하여 정확한 크기로 조정할 수 있습니다. ​​&nbsp;&nbsp;이러한 방법들을 활용하여 Canva에서 디자인의 세로 크기를 효과적으로 조정하실 수 있습니다.​​&nbsp;&nbsp;

안녕하세요. 구글시트 엑셀외에는 노션이 적합합니다.^^

앱 메뉴 구조도 작성툴

산출물 자료를 공유해드렸습니다. 잘 활용해주세요.:)
<img src="https://cdn.inflearn.com/public/comments/aa1973f0-eb90-4bbb-bc3a-ebf30344674e/blob" alt="" />

수업 자료를 받을 수가 없어요

산출물 양식 공유해드렸습니다. 잘 활용해주세요.:)
<img src="https://cdn.inflearn.com/public/comments/8aaba4b0-099c-4e22-86b0-fac10ce04505/blob" alt="" />

안녕하세요, 답변 꼭 주세요!

산출물 양식 첨부해드렸습니다. 잘 활용해주세요.:)
<img src="https://cdn.inflearn.com/public/comments/89e6613c-6daf-434f-8ae1-5516ca144b37/blob" alt="" />

codingai

Bài viết