# wireframe

piczo

MVP 🤔 MVP란 무엇인가 Minimum : 최소의 | Viable : 존속 가능한, 생존 가능한 | Product : 제품 ⇨ 최소 노력을 들여, 고객에 대한 최대 배움을 얻게 해주는 프로덕트 ⇨ 출시 > 측정 > 배움 > Pivot / 개선 으로 이어지는 피드백 루프를 가장 효율적으로 형성하는 방법 ⇨ 제품 출시 전, 고객의 반응을 얻고 피벗 결정 or 개선하면서 시행착오에 따른 시간과 비용 절감 >💡 피봇(Pivot)이란? 기업이 기존에 하던 비지니스 모델 또는 프로덕트의 성공 가능성이 낮다고 판단 시, 새로운 비지니스 모델로 전환하는 것 👍🏻좋은 MVP vs 👎🏻나쁜 MVP ![](https://velog.velcdn.com/images/piczo/post/04eb3904-7ba5-4

hyeonhee_bee

오늘의 목표 와이어프레임 완성하기 컴포넌트들 정리하기 오늘의 디자인 와이어프레임 페이지별로 정리(기존에 손으로 스케치한것을 figma로 정리한 느낌이다) overlay 설정에 대해 프론트와 소통 오늘의 보완점 - 소통방식을 좀 더 명확히! 사유 문의주신 부분에 대해 준비되지않은 figma 이미지(내가 알아볼수있을 정도로 정리해놓음, 투명도 등을 정확하게 해놓지 않음)로 급하게 설명하려다보니, 말로 설명하게 되는 부분이 있었다. overlay, backdrop 같은 용어에 대한 정확한 정의에 대해 스스로 자신이 없어서 한번 더 묻다보니 한 큐에 소통이 안되는 부분이 있었다. => 대화가 아주 살짝 돌아갔음(모두가 A를 이야기했지만 서로 B를 이야기하는 줄 알았던 느낌) - Foundation을 명확히! 기존에는 감으로 margin, padding을 잡았다. 새롭게 배운건 보통 8의 배수로 margin, pad

azd2013

목차 UI/ UX UI 디자인 UX 디자인 UI/UX 사용성 평가 Wireframe/ Prototype 📌 UI/ UX UI (User Interface) : 사람들이 컴퓨터와 상호작용하는 시스템 보통 UI라고 하면 떠오르는 것은 화면상의 그래픽 요소 외에도 키보드, 마우스 등의 물리적 요소도 컴퓨터와 상호작용하기 위한 시스템이라고 하여 UI라고 볼 수 있음 GUI (Graphical User Interface) : 사용자가 그래픽을 통해 컴퓨터와 정보를 교환하는 작업 환경 -> 요즘은 스마트폰과 컴퓨터뿐만 아니라 스마트워치, 키오스크, 대중교통 터치스크린 등 화면과의 상호 작용을 통해 사용하는 기기들이 많아지면서 GUI가 굉장히 중요한 역할을 함 UX (User Ex

ddussi

이번엔 CSS를 통해서 레이아웃을 알아보자 레이아웃(layout) 이번에도 역시 레이아웃의 의미에 대해서 먼저 알아보자면 >레이아웃(layout) 컴퓨터 그래픽 디자인이나 소프트웨어 디자인에서 각 구성요소를 제한된 공간 안에 효과적으로 배열하는 일을 의미한다. 레이아웃이 왜 중요하냐? 우리가 볼 수 있는 화면은 한정적이고 공간이 많지 않기에, 충분히 활용해야 효과를 높일 수 있을 뿐만 아니라 레이아웃을 통해서 기본적인 컨셉 또한 파악할 수 있기 때문이죠. 특히 웹 또는 애플리케이션을 개발할 때 레이아웃의 뼈대를 그리는 단계를 와이어프레임이라고 하는데 훌륭한 와이어프레임을 보면, 어떤 목적을 가진 프로그램인지 유추하는 것이 가능합니다. 와이어프레임(Wireframe) 와이어프레

developerpyk

학습 목표 레이아웃을 위한 HTML을 만들 수 있다. > o display: flex;를 자식 요소가 아닌 부모 요소에 적용해야 함을 이해한다. > o > display: flex(속성명:속성값)를 설정하는 이유는 원하고자 하는 영역을 화면상에서 고정이 아니라 > 유연하게 정렬하거나 조절하기 위함이다. 즉, 고정되어 있는 위치를 유연하게 움직이기 위해서 사용한다. > flex의 속성 중 부모 요소에 적용해야 하는 속성이 있고, 자식 요소에 적용해야 하는 속성이 있다. > 이때, display: flex, flex-wrap, flex-direction, justify-content, align-items는 > 부모 요소에 적용해야 자식 요소에 작동한다. 따라서 주고 싶은 태그가 자식이 없는 경우에는 임의로 그 태그를 덮는 부모 태그를 만들어 그 부모 태그에 flex 속성을 적용한다. > 이때, flex-wrap, flex-direction, justif

yooyeri

Short Review⏰ Day19 [TIL] 오늘은 협업 툴인Figma를 활용해 디자이너, 개발자와 커뮤니케이션 할 수 있는 프로토타입, 스토리보드 작성법을 공부했다. 더불어 UX 라이팅을 통해 '사용자의 행동을 가이드하고 동기를 부여해 행동을 끌어내는 문구'를 작성하는 방법을 공부했다. 우리가 마이크로카피를 통해 얻고자 하는 것은 다음 세가지이다. 사용자의 행동을 유도(동기 부여, 전환율 증대)하거나 가이드 제공 브랜딩 및 차별성 강화 사용자 행동에 따르는 문제를 미리 방지하며, 긍정적인 사용자 경험을 제공 좋은 마이크로카피는 다음 키워드를 따른다. >Useful, Clear, Concise, On Brand Lesson Insight🪄 과연 디자이너의 영역과 PM의 영역은 어떻게

youa7878

❤️‍🔥 wireframe 선과 틀을 잡는다는 뜻으로, 제품 기획 단계에서 페이지를 어떻게 구성할 것인지 구조를 잡기 위한 목적으로 만든다. 와이어프레임을 표현할 때 품질 수준을 전문 용어로 피델리티로 표현해 3가지 레벨로 나뉜다. Low Fidelity Wireframe (Lo-Fi Wireframe) 손으로 빠르게 그린 수준의 와이어프레임 Middle Fidelity Wireframe (Mid-Fi Wireframe) Lo-Fi 와이어프레임을 그리면서 아이디어가 어느 정도 구체화되고 확정된 이후 보기 좋게 다듬은 수준의 와이어프레임 High Fidelity Wireframe (Hi-Fi Wireframe) 와이어프레임을 완성본에 가깝게 작성한 수준의 와이어프레임

bokimy

와이어프레임 : 웹, 앱을 개발할 때 레이아웃의 뼈대를 그리는 단계 =와이어로 설계된 모양 -> 단순한 선이나 도형으로 인터페이스를 시각적으로 묘사한 것. => 아주 단순하게, 레이아웃과 제품의 구조를 보여주는 용도. 와이어프레임 단계에서는 전환 효과나 애니메이션,사용자 테스트 등등의 스타일링 요소나 UX(User Experience)를 판단하지 않는다.

formroller

페이지 레이아웃(Page Layout) 레이아웃 : 웹 사이트의 성격과 목적에 막제 필요한 요소들을을 배치하는 작업 학습 목표 레이아웃을 위한 HTML 구조 만들기 웹 페이지 요소를 정렬하는데 Flexbox에 대한 핵심적 개념과 내용 이해하기 1.레이아웃: 화면을 나누는 방법 1-1) 화면 분할(HTML 구성하기) 대부분의 콘텐츠는 (좌->우) / (위->아래)로 흐른다. CSS로 화면을 구분할 때에는 수직/수평 분할을 차례로 적용해 콘텐츠 흐름에 따라 작업을 진행하자. 수직 분할 : 화면을 수직으로 나눠, 콘텐츠에 요소를 가로 배치 수평 분할 : 분할된 요소를 수평으로 구분해, 내부 콘텐츠 요소를 세로로 배치 (height 속성 추가시 수평 분할이 더 직관적) 1-2) 레이아웃 리셋 때때로 문서가 갖는 기본 스타일이 레이아웃 잡는데 방해가 될 때도 있으며 다음과 같은 사례를 들 수 있다. `<bod

yenj

계산기 만들기 저번주 조금 어려웠던 자바스크립트를 지나 html, css를 거치며 계산기의 mock-up을 만드는 과제를 수행했다. html과 css는 직관적으로 눈으로 볼 수 있다는 점이 재미있다보니 다양하게 시도해보며 나만의 계산기 목업을 만드는 과정이 너무 즐거웠다. 이를 바탕으로 실제 계산기의 기능을 수행할 수 있도록 자바스크립트로 기능까지 구현한다면 완성한 뒤 뿌듯할 것 같다..! 물론 지금은 너무나도 기초적인 과정을 수행하고 있지만 나만의 속도를 잃지 않고 단계적으로 성장할 수 있도록 노력해야겠다. 계산기 만드는 과정 1. 와이어프레임 작성하기 와이어프레임은 시각적으로 어떻게 보여질 것인지에 대해 대략적인 틀을 잡는 것으로 볼 수 있는데 나는 우선 코드

wlwl99

와이어프레임(Wireframe) : 웹 또는 애플리케이션을 개발할 때 레이아웃의 뼈대를 그리는 단계로, 단순한 선과 도형으로 웹/앱의 인터페이스를 시각적으로 묘사한 것이다. 위의 와이어프레임은 화면의 영역을 구분하고, 각 영역에서 사용할 주요 태그들을 표시한다. 목업(Mock-up) : 실물 크기의 모형 실물 제품이 없는 무형의 웹 또는 앱에서 의미하는 목업은 실제 제품이 작동하는 모습과 동일하게 HTML문서 내에 요소들을 하드코딩하는 것이다. 하드코딩(Hard coding) : 프로그램의 소스 코드 내부에 데이터를 직접 입력해서 저장하는 것 ➡️ 하지만, 역동적인 웹 애플리케이션을 만들기 위해서는, 데이터들을 변수로 관리하여 값을 동적으로 담아야 한다. **

hyo123

Wireframe 와이어프레임 > 와이어프레임은 선(wire)으로 틀(frame)을 잡는다는 뜻! -> 제품 기획 단계에서 페이지를 어떻게 구성할 것인지 구조를 잡기위한 목적. 와이어프레임의 품질수준 레벨 -> 피델리티(fidelity) > 1. Low Fidelity Wireframe (Lo-Fi Wireframe) -> 손으로 그린 수준의 와이어프레임을 Lo-Fi 와이어프레임이라고 한다. 작성하는데 시간이 짧아 수정하기 쉽다. > 2. Middle Fidelity Wireframe (Mid-Fi Wireframe) -> Lo-Fi 와이어프레임이 어느정도 구체화되고 확정된 후에 보기 좋게 다듬어주면 Mid-Fi 와이어프레임이 된다. Mid-Fi 와이어프레임을 봤을 때 어떻게 작동할지 대충 예상할 수 있다. > 3. High Fidelity Wireframe (Hi-Fi Wireframe) -> 와이어프레임을 완성본에 가깝게 작성한

bumsu

📌 진행계획 8/6 (토) 와이어프레임 수정 심화 학습자료 공부 json-server 통신 역할 분담 메인 페이지 : 공동 방명록 페이지 : 하병노 상세페이지 : 서동욱 수정페이지 : 신범수 📖 와이어 프레임 (2차 수정) 📌 홈 화면 📌 방명록 📌

tootb

와이어프레임(wireframe) 제품 기획 단계에서 페이지 구조를 잡기 위한 것 1. Low Fidelity Wireframe (Lo-Fi Wireframe) 손으로 빠르게 그린 수준 2. Middle Fidelity Wireframe (Mid-Fi Wireframe) 아이디어가 어느정도 구체화 된 후에 보기좋게 다듬어준 수준. 해당 페이지가 어떻게 작동할지 예상 가능 3. High Fidelity Wireframe (Hi-Fi Wireframe) 완성본에 가깝게 작성한 것. 와이어프레임이라기 보다는 목업에 가까운 형태. 와이어프레임 작성 목적과 맞지 않기 때문에 Hi-Fi 수준까지 만드는 경우는 거의 없음 프로토타입 (prototype) 실제 제품과 흡사하게 구현한 것으로 페이지 이동과 상호작용이 가능함 개발 들어가기 전 단계에 작성 UI의 상호작용을 시뮬레이션 하는 것이 목적 1. Low Fidelity Prototype (L

zirryo

week 1 / 22.06.28 >## WireFrame 💿 와이어프레임 웹 또는 앱을 개발할 때 레이아웃의 뼈대를 그리는 단계. 단순하게 레이아웃과 제품의 구조를 보여주는 용도 단순한 선과 도형으로 웹이나 앱의 인터페이스를 시각적으로 묘사한 것. >## Mock-up 📀 목업 목업 : 실물 크기의 모형 다만, 앱이나 웹은 실물이 없으므로 실제와 동일하게 작동하는 HTML, CSS 문서를 작성한다. 실제와 동일한 기능을 제공하지는 않음. >## OVEN 💿 오븐 웹 와이어프레임을 직접 만들어 볼 수 있는 툴. [🔗오븐 바로가기] (https://ovenapp.io) >![](https://velog.velcdn.com/images/zirryo/post/4e295f50-1ff6-44a6-aa05-40082b9d6

tootb

React SPA 규모가 커질수록 사용자와의 상호작용이 많아지고 속도 저하 문제가 발생함에 따라 이 문제를 해결하기 위해 등장한 SPA SPA 등장배경과 개념 (Single Page Application) 전통적인 웹사이트는 페이지 전체를 로딩하여 시간이 오래걸리는 반면, SPA는 페이지 전환 전후에 중복되는 부분은 새로 불러오지 않음 (ex. header, navigation, footer) 서버로부터 완전히 새로운 페이지를 불러오지 않고 화면 업데이트를 위해 필요한 데이터만 전달받아 브라우저에서 해당하는 부분만 업데이트 하는 방식 장점 필요한 데이터만 받아서 업데이트하기 때문에 사용자와의 interaction이 빠름 서버에서 요청받은 데이터만 넘겨주므로 서버 과부하문제가 현저하게 줄어듦 더 나은 유저경험 제공 (전체페이지 렌더링하지 않아도 되기 때문) 대표적인 플랫폼: 유튜브, 페이스북, 지메일, 에어비엔비, 넷플릭스 등 단

minthug94_

와이어프레임이란? >와이어프레임은 말 그대로 "와이어로 설계된 모양"을 의미하며, 단순한 선이나, 도형으로 웹이나 앱의 인터페이스를 시각적으로 묘사한 것입니다. 와이어프레임은 아주 단순하게, 레이아웃과 제품의 구조를 보여주는 용도입니다. 전환 효과나, 애니메이션, 사용자 테스트 같은 스타일링 요소나 UX(사용자 경험, User Experience)를 판단하는 것이 아닙니다. 와이어 프레임으로 웹페이지에 대략적인 구도를 잡아주고, 메모를 통해 중요 기능을 부연 설명한다. 와이어프레임을 만드는데 활용한 URL h

daeseongkim

기능에 대해서 많은 고민을 했다. 처음에는 단순히 글을 쓰고, 그 글을 다른 사람들이 읽고 공감하면 좋겠다는 생각을 했는데, 그것만으로는 뭔가... 뭔가... 부족한 듯 싶어서 상급종합병원과 각 과에 대한 의견을 나눌 수 있는 상세페이지를 만들어보자는 결론이 나왔다. 그걸 바탕으로 열심히 기획 및 디자인을 진행했다. FlowChart > 최대한 발생할 수 있는 모든 것들을 적어보고자 노력했다. Wir

rlacksals96

들어가기 UI 제작은 UI/UX 디자이너들이 담당하는 경우도 있지만, 상황에 따라 담당자가 없는 경우, 프론트엔드 개발자가 디자인까지 하는 경우도 있다. 데브코스 프로젝트를 비롯하여, 대다수의 교내 프로젝트에서 디자이너가 있는 경우가 드물기 때문에 디자인 툴 활용법을 익히는 것도 좋은 것 같다. 본인이 그림 그리기에 자신이 없다하더라도 디자인 툴을 활용하면 충분히 괜찮은 디자인을 만들 수 있고, 사용법도 간단하다. 현재 유명한 디자인 툴로는 Adobe XD, Photoshop, Illustrator, Figma 등이 있다. 그중 Figma는 무료로 사용가능하고, 협업에 최적화된 툴이라 판단하여 데브코스 프로젝트에서는 Figma를 사용하였다. <img src='https://images.velog.io/images/rlacksals96/post/a5be5c67-5473-459d-b57b-dc1e01c0956b/image.png' width

cptkuk91

SPA는 Single Page Application의 약자입니다. SPA의 등장 배경 전통적인 웹 사이트는 페이지를 보여주기 위해서 매번 HTML 파일 전체를 불러와야 했습니다. 하지만 SPA를 통해 변경 된 부분만 새로 불러오기 때문에 깜빡임이 사라졌습니다. 전체 페이지를 계속해서 새로 고침하는 것은 서버와의 불필요한 트래픽을 발생시키고 사용자 입장에서도 느린 반응 때문에 UX 경험 제공이 어려워지게 됩니다. SPA의 개념 SPA는 서버로부터 완전히 새로운 페이지를 불러오는 것이 아닙니다. 화면을 업데이트 하기 위해 필요한 데이터만 서버에서 전달받아 해당하는 부분만 업데이트 하는 방식입니다. SPA의 장점 사용사와 수시로 상호작용이 발생할 때 페이지 전체를 렌더링하는 것이 아니라 필요한 부분만 업데이트 하기 때문에 사용자의 행동에 빠르게 반응합니다. (결론은 빠르다.) 서버 입장에서도 요청받은 데이터만 넘겨주기 때문에 과부하 문제를 줄일 수