나의 FE피봇이야기 (179) 썸네일형 리스트형 [UI] 텝(tabs)으로 구성할 것인가? 페이지(pages)로 구성할 것인가? 홈페이지를 만들다 보면 종종 몇가지 질문데 부딧치게 된다. 이 페이지는 어떻게 구성해야 사용자가 훨씬 편리하게 사용할수 있을까? 이번엔 콘텐츠를 바탕으로 텝(a tab)과 페이지(a page)로 어떻게 구성할 것인가에 대해서 논의해보도록 한다. 텝이란? 인터페이스 디자인에서 탭은 여러 문서 또는 패널을 단일 창에 포함할 수 있는 그래픽 사용자 인터페이스 개체이다. 특징 탭은 사용자가 앞뒤로 이동할 필요 없이 여러 페이지 사이를 쉽게 전환할 수 있게 해주고 인터페이스 공간을 절약하는 데 유용할 수 있다. 하지만 너무 많은 탭이 열려 있으면 복잡해지고 사용자가 원하는 정보를 찾기 어려워질 수 있다 탭을 사용하면 공간을 절약하고 사용자가 앞뒤로 이동할 필요 없이 여러 페이지 사이를 빠르게 전환 탭은 한 페이지.. [UI]사람은 어떻게 화면을 보는가? F 초두효과(Primacy effect)는 심리학 용어로 먼저 제시된 정보가 추후 알게 된 정보보다 더 강력한 영향을 미치는 현상을 말한다. 말 그대로 뇌에 처음 입력된 정보가 나중에 입력된 정보보다 가장 기억에 잘 남는다는 것이다. 미국 다트머스대 심리학과 폴 왈렌(Paul J. Whalen) 교수는 "인간의 뇌는 0.017초라는 짧은 순간에 상대방에 대한 호감이나 신뢰 여부를 판단한다"고 말했다. 우리는 홈페이지를 어떻게 눈으로 보는가? 우리나라에서는 z 보기로 알려짐 사용자는 먼저 콘텐츠 영역의 상단을 가로질러 수평으로 이동하며 읽습니다. 이 초기 요소는 F의 상단 바를 형성합니다. 그런 다음 화면 왼쪽 아래에 흥미로운 내용을 발견하면 두 번째 수평 이동을 통해 이전 이동보다 더 짧은 영역을 가로질러 .. [DMBS] 데이터 모델링 관점 데이터 모델링 관점에서 데이터 관점, 프로세스 관점, 데이터와 프로세스의 상관 관점이 3가지가 존재한다. 데이터 모델링 관점 내용 활동 데이터 관점 (What, Data) 업무가 어떤 데이터와 관련이 있는지 또는 데이터 간의 관계는 무엇인지에 대해서 모델링을 하는 방법 구조분석 프로세스 관점(How, Process) 업무가 실제로 하고 있는 일은 무엇인지 또는 무엇을 해야 하는지를 모델링 하는 방법 업무시나리오 분석 데이터와 프로세스의 상관 관점(Interaction) 업무가 처리하는 일의 방법에 따라 데이터으 어떻게 영향을 받고 있는지 모델링하는 방법 CRUD 매트릭스 [DBMS] 정규화 이 글은 아래의 영상을 보고 작성했다. https://www.youtube.com/watch?v=rVxcheAkMSk 정규화란 - 데이터 중복을 해소하기 위해서 Relation을 분해화는 과정이다 예시)함수적 종속 관계 FD 다이어그램 {학번, 과목번호} -> 성적 학번 -> 지도교수 학번 -> 학과 지도교수 -> 학과 제 1 정규형 : 원자값이 아닌 도메인(속성)을 분해 (중복되는 속성이 원자값을 가질 때까지 분해) - 원자값이 아닌 도메인을 분해한다 --> 1 정규형을 만족한다 - 즉 중복된 속성을 제거한다. - 어떤 Relation R에 속한 모든 모데인이 원자값으로 구성되어 있다면 1NF(제 1 정규현)를 만족한다. 제 2 정규형 : 부분함수 종속성 제거 - 기본키를 중심으로 종속이 되지 않는 경.. [DBMS]Nested Loop, Sort_Merge and Hashed Join 완전히 이해된 개념은 아니지만 이곳에 정리하고 또 채워나가보도록 하겠다. 아래 영상을 보고 이해를 했고 PGA(Program Global Area)에 대한 정보를 추가하였다. https://www.youtube.com/watch?v=SVD5ldwVYpo https://lhoris.tistory.com/129 PGA 예시 Table A = IDOL_GROUP Table B = IDOL_MEMBER Relationship(Column) : GORUP_NAME Nested Loop Join IDOL_GROUP = Outer table IDOL_Member = Inner table IDOL_GROUP에서 소녀시대라는 Row하는 선택하고 InnerTable에서 소녀시대 맴버를 찾아서 쭈루록 등록 일종의 For 문.. [DMBS]식별자 비식별자, 외래키 식별자와 비식별자는 외래키와의 관계를 말한다. 결론부터 말하면 식별자가 즉 A Entity와 B Entity의 관계에서 B가 A에게 외래키로만 의존(Dependancy)하고 있다면 식별적 관계 B가 자제척으로 PK를 가지고 있으며 A와의 관계는 외래키로 처리할 경우 비식별 관계 식별자 장/단점 장 : 데이터 정합성 유지 를 DB에서 검증 단 : DB 구조 변경이 어려움 비 식별자 장/단점 장 : DB 구조 변경이 자유로움(왜냐 부모 Entity로부터 독립적이기 떄문) 단 : 데이터 무결성 보장이 낮음 참조 https://velog.io/@mong9_s/DBRDBMS-6.-%EC%8B%9D%EB%B3%84%EA%B4%80%EA%B3%84%EC%99%80-%EB%B9%84%EC%8B%9D%EB%B3%84%E.. [DBMS]ERD 모델을 Relational Model 변환 규칙 Step 1. Mapping of Strong Entity Types --> Table Step 2. Mapping of Weak Entity Types --> Table Step 3. Mapping of Binary 1 : N Types --> Foreign Key Step 4. Mapping of Binary 1 : 1 Types --> Foreign Key Step 5. Mapping of Binary M:N Types --> Table Step 6. Mapping of N-ary Relationship Types --> Table Step 7. Mapping of Multivalued atrributes --> Table Step 1. Mapping of Strong Entity Types -->.. [DBMS]Normalization -> 3rd Normal Form From 국민대 Database Table의 제작은 ERD Table 순으로 만들어져야만 합니다. 그래야 깨끗한 구조의 Table이 나올 수 있습니다.만약 그렇지 못한다면 정규화(Normalization)라는 작업을 통해서 테이블의 데이터 정리작업에 들어갑니다. 왜 Table과 Table을 분리해서 만드는가? Update Anomaly ,Insert Anomaly, Delete Anomaly 변칙때문에 예를 들어, Update Anomaly - Entity와 Enity를 함께 섞어서 사용할 경우, 많은 중복 데이터가 나올 수 있다. -만약 특정 컬럽에 어떤 정보를 변경할 시 그 많은 데이터를 바꿔야 하니까 --> 다시 말해 설계가 깨끗하다면 한번만(한개만) 바꾸면 다 되는 관계도를 만들 수 있다. Normalizatio.. [DBMS]Constraint Violation From 국민대 도메인(Domain Constraints) - 속성 값은 1) 원자성(더 이상 분리되지 않는 값)을 가지며, 2)도메인의 정의된 값이어야 함 - Composite Attritute와 Multi-valuted Attribute는 허용되지 않음 Composite Attritute : 주소 = 시군구+상세주소 Multi-valuted Attribute 취미 = 축구, 농구, 배구 - Null 값은 허용됨(Not Null이 아닌 경우) 키 제약(Key Constraints) - 릴레이션의 모든 레코드는 서로 구별 가능해야 함 ex. 주민번호, 학번 Super Key = 유리한 식별 가능한 키+ Column을 첨가 한 것 개체 무결성 제약(Entity Inegrity Constraints) - 기본키(PK)는 U.. [DBMS]Partical Approach for ER Modeling From 국민대 Partical Approach for ER Modeling 관계도를 모델을 그릴 때 정석적인 순서 1. 주요 개체 도출 ex) 직원, 부서, 프로젝트, 부양가족 등등 2. 개체 간 관계 도출 2-1. 관계 도출, 마름모 2-2. 대응수 도출, ex) 1:1 , 1:N, N:M 3. 개체 및 관계의 속성 도출 3-1. 키 속성 도출 3-2. 일반 속성 도출 N-ary Relationships 어떤 업체(a Supplier)가 어떤 프로젝트(a Project)에 어떤 부품(a Product)을 공급했다. Ternary Relationships 3의 엔티티가 있다고 하면, 2개를 고정시켜서 N 관계수를 기입한다. ex. 하나의 업체가 하나의 부품을 / N의 프로젝트에 공급할 수 있다. ex. 하나의 프로젝트.. [DBMS]Relastionship Interpretation(관계 해석) 3가지 카디널리티 비율 제약조건 ( Cardinality Ratio Constraint ) 존재 일대일(1:1) - 두 개 Entity 서로 일대일 대응 -->관계를 통해 생성된 attribute는 1의 반대 쪽에 넣을 수 있다'라는 전제가 있어서 1:1 관계는 둘 다 가능. 일대다(1:N) - 하나의 Enity가 다른 Entity N개 만큼 대응. - 그 반대는 성립 안됨 --> 관계에서 생성된 attribute는 1에 반대 쪽에 넣을 수 있다. 다대다(N:M) - 하나의 Entity가 다른 Entity N개 만큼 대응. - 반대로 다른 Entity가 하나의 Entity에 N만큼 대응. -->M : N 관계에서는 어디에도 관계에서 생선된 attribute을 포함할 수 없기 때문에 새로운 Entity를 .. [DEV]로딩과 연관된, 동기 처리와 비동기 처리 많은 불로그들이 동일 내용을 복붙해서 저도 동기와 비동기의 정의는 Ctrl+C and V 하기로 했습니다. 다만 어떤 블로그에서는 로직을 설명해 주시면서 비동치리를 해도 이런 문제가 나타난다라고 설명해줘요. 그 문제점을 다시 해결하는 로직까지 같이 써준 블로그가 있어서 가져옴. https://sudo-minz.tistory.com/21 동기 처리 요청을 하면 (바로) 응답을 받는다는 의미. 말 그대로 동시에 일어난다는 뜻 -> 요청과 결과가 한 자리에서 동시에 일어남. -> A노드와 B노드 사이의 작업 처리 단위(transaction)를 동시에 맞추겠다. 비동기 처리 - 동시에 일어나지 않는다를 의미. 요청과 결과가 동시에 일어나지 않을거라는 약속 -> 요청과 응답이 다른 시간대 존재하기 때문에, 요청내.. [DB]Part0-Precourse-Conceptual Data Modeling(개념적 설계) BY 국민대 요구사항 분석 > 개념적 설계 > 논리적 설계 > 물리적 설계 개념적 설계 (Entity Relationship Model) : 개체 관계 모델 --> 최종 산출물 '다이어 그램'(Entity Relationship Diagram) 논리적 설계 (Relational Model) : 컴퓨터 언어로 변경, Table 형태로 만드는 것 Relationship : E-R diagram 에서 마름모, 관계 Relational : Table ER Model Concept and element 개체(Entity) - 실세계에 존재하는 의미있는 하나의 정보 단위 - 물리적 객체뿐 아니라 개념적 객체도 포함 ex. 물리적 객체 : 학생, 자동차, 강의실 ex. 개념적 객체 : 프로젝트, 직업, 교과목 관계(Relatio.. [DB]Part0-Precourse-Conceptual Data Modeling BY국민대 Database evironment Stored Database Meta data DBMS Softawre : Java와 같은 언어로Queries 섞어서 Stored Database조회를 하던 삽입을 하던 RIUD(독립형 / 내장형) Schema VS Instance Schema- 데이터베이스 구조, 테이터 타입(int, object etc), 그리고 제약 조건 대한(1개 이상의 대명사가 들어가야한다.) A Table의 a' field가 B Table a'와 연결 되야 하는 명세와 같은 정의- DB design, DB modeling, Instance- 특정 시점에 데이터베이스에 실제로 저장되어 있는 데이터= Database instance = Occurrence = Snapshot. SQL(Struct.. [UI]사설서점 메인 페이지는 뭐로 구성될까? -조사 대상 : 교보문고, 알라딘 -자체 이벤트 : 도서 중심 이벤트 -비지니스 확장 : 도서 + 상품(자사가 운영하는 아이템 판매 연계) -문화 콘텐츠 : 텍스트 이외 방법으로 만들어진 콘텐츠 ex. 영상, 오프라인 만남 사설 서점에 공통적으로 가장 많이 사용하는 요소 순위 1등 : 광고(도서 판매) 2등 : 북 큐레이션 요약 사업자이다보니 상품을 팔아야 하는 것에 주된 목적이 있는 것을 알 수 있다. 책을 팔기 위해서 상품을 끼워 파는 이벤트를 열거나 북 큐레이션을 통해 책을 더 구매할 수 있도록 만든다. *하단 참조 이미지 참고 사설 서점 특징 : 알라딘 알라딘은 자체 이벤트와 북 큐레이션으로 사용자에게 첫 인상을 주려고 한다. 사실 여기서 자체 이벤트라고 뭉뚱그리긴 했지만 자체 이벤트를 살펴보면 .. [UX]토스 프로턱트 디자이의 UI 개선 이야기 이번에 토스 Product Desing분의 User eXperience 를 바탕으로 한 User Interface 이야기를 공유해볼까 합니다. 원글 https://toss.tech/article/thinking-user-perspective 사용자 관점을 인식하기 위해서 메이커가 주의해야 할 상황 1. "이건 당연히 알 수 있는거 아닌가?" 사용자는 연령에 따라, 디바이스나 서비스 이해 정도에 따라, 경험의 유무에 따라, 또 디자인의 전달력에 따라 이해의 정도가 다르기 때문에 공급자의 의도를 당연하게 알아줄 수 없어요. 2. "어려울 수도 있긴 한데 일단은" 내 안의 공급자적 자아가 사실은 쉽게 풀어내지 못한 디자인임을 스스로도 알고 있지만 이 정도에서 타협하고 싶을 때 나오게되는 말이에요. 3. "원래.. [Dev]개발자로부터 배우는 API 기본 (Javascript) 개발자분들의 블로그를 조금씩 보는 이유는 어떤식으로 개발 로직을 제작하는지 이해하기 위해서 입니다. API에 대한 개념을 간략히 설명하고 본론 내용을 요약 정리 해보록하겠습니다. ※본 글은 한 개발자의 글(아래)을 요약했을 뿐입니다. 원글 https://www.hyobb.com/22.-api#api-3 API API는 서버와 클라이언트가 통신하는 과정 속에서 어떠한 방식으로 데이터를 요청하고 전달하겠다는 약속이라고 할 수 있습니다. API 호출을 배우려면 json 형식에 대해 먼저 알아야하는데요, https://jsonplaceholder.typicode.com/posts 에 접속해보면, 많은 json 형식의 데이터들을 볼 수 있습니다. json 이란 JavaScript Object Notation의 약.. [UI]한 개만 선택해야 할때? 라디오(Radio) or 선택박스(Select Element) 종종 홈페이지를 제작하다보면 고민되는 지점들이 생긴다. 이번 페이지에서는 한 개만 선택하는 상황에서 어떤 User Interface를 사용할 것이지 대한 저만에 생각을 공유해봅니다. 라디오(Radio) 버튼 1. 선택이 한개 일 때 2. 보여줘야 하는 옵션의 수가 적을 때 (보통 5개 기준) 3. 옵션의 수가 적고 글을 많을 떄 Select Element(DropDown) 1. 디폴트 값을 주고 싶지 않을 때 2. 옵션의 개수가 상당히 많아 공간 활용이 필요할 때 그럼에도 불구하고 많은 전반적인 문맥을 읽을 수 있어야 한다고 생각합니다. 라디오버튼은 클릭수는 낮지만 옵션이 많어지거나 특정 정보를 기본값으로 하고 있습니다. 반대로 셀렉트 요소는 빠르게 옵션을 확인할 수 없어 클릭수가 높아진다는 단점이 있습.. [UX] 탭(tab)이냐 페이지냐 탭을 사용하는 이유는 사용자가 페이지에서 빠르게 1) '내가 원하는 정보를 습득할 수 있느냐'와 2) '이 페이지의 정보를 한 번에 인쇄 가능하냐'이다. Tab의 정의From material Design Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy. 탭은 동일한 수준의 계층에서 구룹간의 탐색을 구성하고 허용한다. 1번의 관점으로는 탭은 글의 구조상 소제목처럼 사용하는 것이다. 빠르게 정보를 소비하는 시대에서 사람들의 스캔 능력을 높여주는 역할을 한다. 2번의 관점으로는 집중도와 연결된다. 글을 혹은 필요한 정보를 읽고 있는데 갑자기 내용이 끊긴다면 .. 이전 1 ··· 6 7 8 9 다음
