2024. 07. 19 UIUX(웹) 3일차
[1교시]
- 타켓 명확
- 팝업스토어를 빠르게 찾을 수 있는 어플
- 정보를 정확하게 제공해주는 공간이 없음
- 헛걸음 방지
- 인기 팝업 스토어는 줄이 길어 시간방비 되는 일이 많아 예약을 하거나 밀집도 표시
- 원하는 분위기를 빠르게 찾을 수 있도록 필터 제공
- 방문자 리뷰 피드(다양한 정보 공유 기능)
- 주변 소품샵까지 같이 제공
피드백)
- 어플 디자인도 잘 나올 듯
- 버튼, 디자인 접목, 페이지 수 많이 나올 듯
- 요즘 트렌드 잘 접근함
[2교시]
*질문을 많이 해라
- 타켓 명확히 정하기
- 불편한 점(페인 포인트)
- 니즈(욕구/사람들이 원하는 것)
- 어플의 가장 중심기능(부가기능, 리뷰x)
- 타사 어플 찾아내기(참고) 웹사이트도 가능
- 내가 참고하고 싶은 어플들 찾기(본인들이 원했던 어플, 디자인 정도, 평소 좋아했던 디자인)
- 참고용 어플_내가 좋아하는 스타일의 어플
(1) Target
- 팝업스토어를 행사를 즐겨찾는 2030
(2) Pain point
- 진행 중/진행 예정인 팝업스토의 장소, 시간 정보를 명확히 찾기 힘들다.
- 인기있는 팝업스토어의 경우 대기시간이 길다.
- 긴 시간 대기 후 입장했는데 굿즈가 모두 소진된 경험이 있다.
(3) Needs
- 내가 원하는 팝업스토어의 정확한 정보(시간/장소)를 쉽게 알고 싶다.
- 대기시간을 줄이고 싶다. 오래기다리기 싫다.
- 굿즈 재고 소진 여부를 알고싶다.
- 기대와 달리 실망하는 경우를 대비해 정확한 구성(콘텐츠)과 현장 분위기, 공간을 알고싶다.
- 팝업스토어 행사장 근처 주변 놀거리/가볼만한 곳이 있는지 알고싶다.
(4) 중요기능
- 다양한 팝업스토어의 정확한 장소와 시간 정보 제공
- 현재 인기 있는 팝업스토어 순위
- 내가 방문했던 팝업스토어와 비슷한 팝업 추천
- 웨이팅 기능 > 카카오톡 알림(ex 테이블링)
- 팝업스토어 혼잡도 확인
- 기다리는 시간이 지루하지 않도록 주변 소품샵/팝업스토어 추천
- 팝업스토어 구매자 후기용 피드 > 게시물 업로드 시 현장에서 현금처럼 사용 가능한 포인트 제공
- 네이버페이 연동
>>>>프레젬의 경우 5000설탕부터 네이버 페이로 출금 가능
- 내가 방문했던 팝업스토어 기록 > 등급(ex. 배민) > 등급에 따라 포인트 제공
- 내가 방문했던 팝업스토어 기록 베이스로 한 비슷한 팝업 추천
- 내가 가고 싶은 곳 공유(카카오톡/DM/페이스북 메신저 등)
- 팝업이벤트?
- 사람들이 많이 방문한 팝업스토어 top N개를 선정
(5) 타사 어플
- 팝스(POPS/리워드 티켓)
팝스(POPS) | 팝업 행사, 이벤트 종합 관리 플랫폼 (팝업스토어, 전시, 페스티벌 등)
팝업스토어, 전시, 페스티벌, 플리마켓 등 기간한정 팝업 이벤트에 대한 모든 것! 국내 유일 팝업 홍보 플랫폼 '팝스 POPS'에서 홍보하세요.
www.popsbiz.com
- 실시간 위치기반 정보제공, 현재 위치 기준 주변 팝업 정보 제공
- 한 페이지에서 팝업위치, 기간, 운영시간, 공지, 이벤트, 예약, SNS까지 확인 가능
- 다양한 혜택이 제공되는 리워드 티켓
- 프레젬 - 실시간 팝업/핫플 공유 지도
- 보정 없는 사진만 업로드 가능
ㄴ 보여주기식 SNS
(6) 내가 참고하고 싶은 어플들 찾기(본인들이 원했던 어플, 디자인 정도, 평소 좋아했던 디자인)
(7) 참고용 어플_내가 좋아하는 스타일의 어플
- 온더룩(onthelook)
- 트리플(triple)
- 마이리얼트립(myrealtrip)
[3교시]
*블록 : 박스 너비, 높이 위에서 아래로 채우기
*인라인: 글자 좌우
인라인 - 블록 : 좌우 너비 높이 조정
*display : 변경이 가능
*none : 화면에 표시 되지 않는다.
*flex : 박스
-내부에 있는 자식요소를 아이템 배치
- 효율적으로 정렬
1줄
*gird
- 내부에 있는 자식요소를 아이템 배치
- 효율적으로 정렬
- 2차원 3*4
*table
- 잘 사용하지 않음
*inline - felx
- 내부 자식요소가 인라인처럼 배치된다.
*inline - grid
-내부 자식요소가 인라인처럼 배치된다.
=> 많이 쓰는데, 어려운 것들만 모아두면 됌
- 정리를 해주시는 것이 좋다.
- 너무 많아서 간단히 정리요망
span 태그를 block으로 바꾸기
*boder
- 테두리 영역
- 크기, 종류, 색으로 지정
- 점선
- 점선
- 점선
- 위, 아래, 높이 좌우
* 보더의 색
- 거의 유사
- 1개로 사용 모두
- 2개 상하 / 좌우
- 3개 상 / 좌, 우/ 하
- 4개 상 / 우 / 하/ 좌
* 박스모델
- 사각형 형태로 태그들이 영영을 차지 하고 있다.
- 이름을 박스라고 표현한다.
* 콘텐츠 영역
- 실제 내부 박스 영역에 있는 콘텐츠를 포함
- 너비와 높이가 기본
* 안쪽여백
- padding Area(패딩)
- 콘텐츠와 테두리(boder) 사이의 내부여백
* 경계선 boder
* 마진(Margin)
- 바깥쪽 여백
* 경계선~콘텐츠 영역
- 박스의 실제크기
- 바깥쪽 여백은 간격
- m50(margin: 50px;)
- p30(padding: 30px;)
- 너비x높이(270x270)
* 박스모델
- 실제 크기(콘텐츠, 안쪽 여백, 경계선)
*모델변경
- box sizing
- 요소의 너비와 높이를 계산
* content-box 기본 값
- width 콘텐츠 높이 표시
* border-box
- 콘텐츠, 안쪽여백, 테두리 포함
- 웹 페이지에는 border x(넣지 않음)
클래스 a2개
b3개
bd
b클래스
p패딩 20px
테두리 까지 크기(boder)
모든 기본 값은 bd
높이 100px
너비 100px
[4교시]
*lorem ipsum(이미지 주는)
*imgle 기본형태
- 반복속성을 갖고 있다.
Lorem Picsum
Lorem Ipsum... but for photos
picsum.photos
ㄴ이미지 변화, 사이즈
* repeat(반복)
* no-repeat(반복 안함)
* cover 채우기
* Line-height
- 글자의 줄높이
- 줄 수직간격을 조정
ㄴApple
*vertical-aline
- 기준을 잡아준다.
.
ㄴ vertical-aline: bottem
ㄴ vertical-aline: top
ㄴ vertical-aline: middle
ㄴ inline-block
ㄴbottom
ㄴ basrline 잘 사용x, middle만 잘 알고 있으면 됨
ㄴmiddle
*float
- 문서의 일반적 흐름에서 제외되어 자신을 포함하는 컨테이너
- 왼쪽, 오른쪽 배치
- 문서의 흐름과 상관없이 움직임
- 여러 요소를 만들면 먼저 만든 것 부터 차례대로 배치된다.
ㄴ float : right;를 #a와 #b에 적용했을 때
ㄴ float : left;를 #a와 #b에 적용했을 때
* position
- 문서상의 요소를 배치 방법을 정의
- postion이 있으면 top, bottom, right, left의 위치를 변경할 수 있음
* static (정적 : 기본값)
- 일반 문서 흐름에 따라 배치
* relative(상대적)
- 문서 흐름에 따라 배치
- 상하 좌우 위치 값에 따라서 offset 적용
* absoult(절대적)
- 흐름에서 제거
- 가장 가까운 position 속성을 지정해 준 곳으로
- 상대적으로 적용
* fixed(결정된)
- 지정 위치 고정
- 흐름 제거
ㄴ left, top은 포지션을 지정 안해주면 안 됨
ㄴc 포지션 박스 아래로
ㄴ흐름도가 빠지니까 위에서 박스들이 올라옴
* absolute
- 부모의 postion 속성이 없으면 브라우저 화면 기준으로
- 부모의 postion 속성이 있으면 그 쪽 기준으로 이동
- 웹사이트 만들 때 잘 사용하지 않는 것이 좋음(보통은 박스 안에서 통제/ postion 안에서 직접적 이동x)
* postion 속성
- 꼭 필요할 때만 사용해야 함
ㄴ포지션 속성이 지정되는 곳을 가지고 지정해 줌
ㄴbox1(ctrl+ shify+방향키=> 드래그)
ㄴbox2
