코드그라데이션

피그마를 활용하여 화면정의서 만들기회사에서의 업무 : 화면정의서 → 개발 / 디자인 → QA → TC → 업데이트 그래서 회사에서 피그마로 만들어진 화면정의서는 포트폴리오로? 쓸 수 없다. 화면정의서 → 상상으로 모든 이용이 가능한가? No. → 직접 해보는 것이 Best개발 → 3개월 ~ 5개월그동안 기획은? 다음 스텝을 가야 한다.완성을 위한 과정 => 그게 바로 프로토타입 프로토타입실무에서는 잘 사용하지 않지만, 고객에게 직관적으로 보여줄 때 유용한 결과최단시간, 최소기능으로 고객에게 주는 제품완성본과 거리가 멀어도 된다. cf. MVP : 최소기능ex. 차 → 실제 차실제 차를 만드는 것보다, 유사 소품을 이용하여 나무젓가락으로 제작ex2. EBS : 동영상 플랫폼(-> 여러 강의)잇기 : 카카오..

화면정의서의 영역별 구성1) 상단 영역- 화면들의 메타데이터를 넣는다. 필수화면의 이름부가버전작성자명DepthPage (PPT에서는 필요함)화면 기획의도작성 날짜양식을 PPT로 만드는 방법상단의 [보기] 메뉴 -> [슬라이드 마스터] -> [레이아웃 삽입] 슬라이드 마스터에서 페이지 넘버는 #인데 이걸 상단 우측으로 와서 놔주면 페이지 번호가 나온다.이렇게 만든 양식을 가져다가 쓰면 되는데, [새 슬라이드] 에서 사용자 지정 형식을 선택하면 만든 부분을 사용할 수 있게 된다.  2) 화면 영역-> 어떤 기기로 하느냐가 중요.기기 선정모바일PC (16:9)⇒ 프레임 설정 (비율) → 구글에 검색 “갤럭시 노트4 해상도” ⇒ 픽셀 → 비율아이폰은 일반 기종을 기준으로 한다. 그리드 방식UI 요소의 레이아웃만..

화면정의서 만들기 전- 디자이너와 역할 분담의 기준을 정해야한다. 하나의 기준Case 1) 디자이너가 보통 이상이다.한 화면에 들어가는 구성 요소와 기능정의 → 기획자 역할색상, 폰트, 디자인적 요소등 → 디자이너 재량기획자가 구성요소는 정의한 대로 화면에는 다 있어야 한다.이 화면에 대한 평가는 사용자가 하는 것. ex. 잔망루피, 빵빵이이런 경우는 우리가 어떤 서비스인지 싱크가 다 맞춰진 상태. Case 2) 디자이너가 너무 주니어다.디자인 컨셉 정의 디자인가이드 참여> → 기획자 역할나머지 디자인 업무 → 디자이너 툴을 정한다. PPT회사가 오래된 경우보안이 중요한 경우현재 6정도Figma최신 트렌드현재 4정도수정 / 협업이 용이하다.Tip- 버전 : 기능정의서의 버전과 동일하게 앞을 맞춘다.- e..

화면 정의서기능정의서 : IA를 바탕으로 화면을 만들어 기능을 정의하는 문서=> 기준 ex. 사과를 말로(텍스트로만) 설명한다면?사과 : 과일이고 빨간색의 외형을 갖고 있으며 속에는 노란색의 모형을 띄고 있다. 시각화부터 들어가게 되면 속의 내용을 파악을 못하고, 실제로는 텍스트부터 필연적으로 진행을 해나가야 한다.-> 의미를 파악하면서 시각화를 같이 해 나갈 수 있음.⇒ 텍스트의 한계 → UI&UX 차원의 것 ⇒ 화면정의서에서 할 내용 UI- 유저 인터페이스- 사용자가 서비스를 시각적으로 인지하는 요소들ex. 노션에 눈에 띄는 거의 모든 요소. 잘 만든 UI란?플랫 디자인 * : 무채색유저가 직관적으로 UI를 인지하는 것예쁘다 / 안 예쁘다를 기준으로 하면 안 된다.ex. 노션의 공유 버튼 => "공유..

기능정의서소프트웨어 개발 과정에서 각 기능의 세부 사항을 문서화한 것.이 문서는 개발팀과 이해관계자들이 소프트웨어의 각 기능이 어떻게 작동해야 하는지에 대해 명확하고 일관된 이해를 가질 수 있도록 도와준다. 일반적인 기획안 → '방향성' 을 제시세부사항에 대한 것들은 아니다.=> "조율과정" 정의 ⇒ 기준이 된다.함부로 바뀌기 어렵다 ⇒ 약속정의는 같은 레이어의 말을 적는 것이 아니다!깡? → 배포? ⇒ 정의X런닝맨 705회 화면 갈무리런닝맨 705회 화면 갈무리런닝맨 705회 화면 갈무리런닝맨 705회 화면 갈무리 그렇다면 정의란?- 한 단계 아래 뎁스로 가서 설명을 하는 것 사전적 정의? X → 서비스에 한정되서 적용되는 정의 ex. 버튼버튼 : 클릭하는 UI이다 → 사전적 정의버튼 : 클릭하면 초록..

회원 계정 예시 크게 정형화되거나 정답인 방법이라 할 것은 없으나, 우측부터 해서 좌측으로  이런 figjam 파일을 문서로 정리하면 이렇게 된다. . 그런데 이런 IA 문서화는 여러 방법으로 할 수 있다.다양한 방법들  앞서 말했듯 문서화는 싱크를 맞춰가는 과정이므로, 팀의 룰에 맞추면 된다.상상. 시장에서 서비스가 유통 중일 때1) 내 물건이 잘 팔리는 경우=> 팔리는 '방법 설계' 에 몰두한다. 2) 내 물건이 조금 판매가 떨어지거나 휘청이면?=> "구조를 뜯어보아야."=> "운영"의 차원이다. 발명가적인 관점 X앞서 배웠듯이 기획이란 추상적 개념이 운영까지 구체화 되는 과정=> 이 때 이게 어드민이다.운영기획을 해야 한다. 무엇을 관리해야 할까 => 이 때 IA를 보면서 설계를 하는 것어드민의 사..

대중적?자본의 힘매니아적?오히려... 돈을 끌어모을 수 있다.ex. 하이엔드 브랜드=> 팬덤 구성 => 오래 살아남는다.따라서 팬덤층이 더 중요하다. IA (Information Architecture)정보 구조(도) 정보란?서비스에 들어갈 기능기능핵심기능고객의 문제점을 해결하는 직접적인 기능ex. 이미지를 제공하는 기능서브기능핵심기능에 연관성이 있거나 도와주는 기능ex. 이미지 편집기능 / 확장자 변경 기능 구조란?나뭇가지 구조→ Depth 라는 구조 기획에서 IA를 짜는 이유는?아이디에이션의 정리 방법 팔을 IA로 만들기뼈어깨뼈손목뼈연골신경근육살⇒ 만들기 좋은 툴 Figjam  작성 순서1) 정보를 아이디에이션한다.2) 구체화, 반대기능 진행계정 - 생성장바구니 - 리스트업, 담는 기능 구매 환불생..

플로우차트(Flowchart)문제 해결 과정이나 시스템의 작동 원리를 도식화하는 데 사용되는 다이어그램의 한 형태.복잡한 프로세스를 단계별로 시각적으로 표현하여, 정보의 흐름과 각 단계에서의 작업을 명확하게 이해할 수 있도록 도와준다. 이를 통해 사람들이 프로세스를 쉽게 분석하고, 문제를 식별하며, 효율성을 개선할 수 있다. 플로우차트의 주요 구성 요소플로우차트는 다양한 기호를 사용하여 프로세스의 각 요소를 나타낸다. 주요 기호로는 다음과 같은 것들이 있다.시작/종료 (Oval): 프로세스의 시작과 끝을 나타낸다.처리 (Rectangle): 일반적인 작업이나 명령의 실행을 나타내는 기호다.결정 (Diamond): 결정이 필요한 지점, 즉 두 개 이상의 경로 중에서 선택을 해야 할 때 사용입출력 (Para..