. 오늘은 REST API에 대한 개념을 정리해보겠습니다. REST API(RESTful API 또는 RESTful 웹 API라고도 함)REST(Representational State Transfer) 아키텍처 스타일의 설계 원칙을 준수하는 API(애플리케이션프로그래밍 인터페이스)입니다. REST API는 애플리케이션을 통합하고 마이크로서비스 아키텍처의 구성 요소를 연결하는 유연하고 가벼운 방법을 제공합니다. 라고 IBM 게시글에서 정리해주고 있는데요..(https://www.ibm.com/kr-ko/topics/rest-apis) 당최 무슨 말인지.. 더 쉽게 한 번 정리해보도록 하겠습니다! 우선 REST가 무엇인지부터 알아보죠 REST Represantational State Transfer은 직역..

.SPA에 이어 오늘은 유사한 개념인 SSR에 대해서 정리해보겠습니다.SPA에 대한 자세한 내용은 다음 링크를 확인하세요.https://uihkk.tistory.com/22  서버 사이드 랜더링(Server Side Rendering) SSR는 말 그대로 서버 측에서 페이지를 랜더링 한다는 뜻이며서버에서 브라우저에 보일 HTML파일을 미리 준비해 응답하는 형식입니다. 앞서 정리한 SPA(Single Page Application)이 작동하는 방식인 CSR방식과 상반되기에 비교해 정리했습니다. 두 가지 방식의 주요한 차이점은 화면(View)를 그리는 주체가 누구인가인데CSR(Client Side Rendering)은 클라이언트, 즉 사용자가 보고 있는 브라우저가 주체가 되고SSR(Server Side Re..

안녕하세요. 공부를 하면서 헷깔리는 개념들에 대해서 정리 해둘까합니다. SPA라고 하면 조금 생소하게 보이실 수 있지만 우리가 이미 알고 있는 개념일 가능성이 있습니다. 단일 페이지 애플리케이션(Single Page Application) SPA는 말 그대로 한 페이지 안에서 동작하는 앱이라는 뜻이며 필요한 데이터만 비동기로 받아와서 동적으로 현재 화면에 다시 렌더링 하는 방식으로 동작합니다. 기존 방식인 다중 페이지 어플리케이션과 비교한 이미지 입니다. 개념적으로는 이와 같지만 단 하나의 페이지만 존재하는 애플리케이션을 의미하지는 않고, 다수의 페이지를 표시하는 데 페이지 전환을 수행하지 않고, 마치 하나의 페이지인 것처럼 처리하는 기술을 의미합니다. SPA를 사용하는 이유와 장점 사용자가 애플리케이션..

해상도는 웹 디자인에서 항상 고려되어야 하는 대상 입니다. 그 이유는 바로 디스플레이에 이용되는 단위가 정해져있기 때문입니다.  해상도란?이는 디스플레이 표현력의 세밀함 정도를 나타내고 화면이 표현하는 가로, 세로의 픽셀(Pixel)개수를 기준으로 1920x1080(Full HD), 3840x2160(4K UHD) 과 같이 표현합니다.  결국 픽셀 수가 많아질 수록 이미지가 더 선명해진다고 할 수 있고, 이는 디스플레이로 표현되는 것 모두에 해당되는 규격이기 때문에 웹디자인에서도 당연히 이 Pixel을 기준으로 모든 것을 표현하게 된다는 점을 알아두셔야 합니다.해상도 단위 보통 1인치(25.4mm) 안에 표현되는 화소(Pixel)나 점(Dot)의 수로 해상도를 표현합니다. 널리 쓰이는 단위로는 DPI와 ..

와이어프레임의 개념miro에서 정의한 와이어프레임의 정의는 다음과 같습니다. 와이어프레임은 앱 또는 웹사이트 설계를 시각화하거나 새 프로젝트 요소를 매핑하는 간단한 방법입니다.단순한 개요를 만들면 서로 다른 요소가 어떻게 결합하는지를 시각화하고 잠재적 UX 이슈를 파악하기가 쉽습니다.  위에서 설명하듯 와이어프레임을 작성하는 목적은 1. 기획 내용의 재정립단순한 개요를 만들어 >  서로 다른 요소가 어떻게 결합하는지를 시각화 > 잠재적 UX 이슈를 파악 2. 작성 내용 공유협업 대상에게 기획 내용을 설명하고 이해시켜 결과물을 출시하기까지 전체 과정의 참고서를 만드는 것 이렇게 두 가지로 나뉜다고 생각하시면 됩니다.이 문서는 PM, 디자이너, 개발자 혹은 투자자나 결정권자 등 여러 대상을 위하기 때문에 간..

정보구조 설계개념사용자의 행동을 예측해 사용자가 편리하게 만드는 것인터페이스 구조와 네비게이션 체계를 만드는 것 개념은 위와 같지만 간단하게 말하면 메인화면의 글로벌 메뉴를 구성하는 것이라고 생각해주시면 될 것 같습니다. GNB를 구성하거나 사이트맵을 미리 작성해보고 그 구조에 편의성에 대해 고민해볼 수 있습니다. 1.사용자(User)제공하려는 서비스를 이용할 사용자, 이들의 행동과 요구사항 2. 콘텐츠(Contents)사용자가 이용하는 핵심 서비스의 크기와 형태, 구조, 조직 3. 상황(Context, UI spec)사용자의 하드웨어적 환경, 사용자의 기대치, 기술적 제약, 사업적 요구사항, 프로젝트 관리 등  주의사항1. 불필요한 정보 노출 자제2. 정보구조 내 정보량 분산3. 익숙한 용어, 서체, ..

UX/UI 디자인 프로세스 발견(Discovery)사용자 시나이로와 컨셉 모델 정의를 위한 발견과 조사 와이어프레임(Wireframe)유스케이스 워크플로우 사이트 맵 스크린 와이어프레임 주요 상호작용 프로토타입(Prototype)비주얼 디자인 아이콘 + 스타일 가이드스크린 목업 HTML 프로토타입 제작 내부승인(Validate Internally)팀원에게 신속한 피드백 외부 테스트(Test Externally)사용자 조우 요약(Summarize)사용자로부터 인증 반복(Iterate)수정 업데이트 다음 단계로의 계획 및 행동

이제 앞서 한 리서치들의 내용을 종합해 화면으로 구현하기 위해 하나의 기획자료가 되어야합니다. 화면기획서, 스토리보드가 가져야하는 내용과 그 것의 목적과 개념에 대한 설명입니다.유스케이스개념시스템의 동작을 사용자의 입장에서 표현한 시나리오한 시스템에 관련된 요구사항을 끌어내는 과정시스템을 분석하는 사람과 사용자가 함께 시스템의 사용 방법을 결정하는 데 도움을 주는 도구 작성 과정1. 시스템에 대한 사용자의 요구 사항을 찾는다.2. 시스템의 유스케이스와 관계된 모든 행위자(Actor)를 찾는다.3. 행위자가 요구하는 모든 유스케이스를 찾는다.4. 공통된 유스케이스에 대한 서비스들을 정제한다.5. 유스케이스를 목록으로 만들고, 각 유스케이스의 주요 요소들을 식별한다.6. 유스케이스 문서를 작성한다.   스토..

개념리서치 결과를 반영해 페르소나를 작성하고 경쟁 서비스의 벤치마킹이 끝났다면 아이디어를 공유할 수 있는 형태로 만들어야 한다. 이 때 사용되는 것이 아이디어를 시각화한 컨셉 모델(Concept model)입니다. 목적해당 모델로 프로젝트에 참여할 관리, 기획, 디자인, 개발, 테스터까지 전체 팀의 커뮤니케이션을 목적으로 한 도구가 될 것 입니다. 컨셉모델 작성법은 실제로 개발의 DB구조를 설계할 때 기초방법과 굉장히 흡사하며, 실제 나온 Concept Model을 참고하여 ERD를 그려내기 쉽기 때문입니다. 특히 개발자와의 커뮤니케이션이 이 Concept Model 하나로 한 방에 해결됩니다. 구조가 다듬어지면 모델을 사용하여 프로젝트의 범위를 함께 정할 수 있기 때문에 협업 중 일정관리에도 용이합니다..

리서치 중 단계 별로 이용될 수 있는 대표적인 기법에 대해 간단히 정리해보겠습니다. 상황과 순서에 따라 기법들을 적절히 배치한 뒤에 사용해야 하고 검증 리서치의 경우 의미있는 데이터를 얻어내기 위해 주의해서 기법을 결정해야 합니다.1. 선행 리서치단어-개념 매칭제품의 특정한 기능이나 서비스 정보에 대해 사용자들이 지각하는 이미지 조사에 유리제품에 대한 사용자 태도를 알기 위해 초반 시행 페르소나사용의 니즈, 동기, 서비스 사용 행태 등과 같은 사용자 특성 정보 제공사용자의 숨겨진 니즈(Unmet Need) 발굴, UX 방향성 도출 등을 목적으로 시행 카드 소팅(포스트잇 정리)주로 UX 디자인의 마지막 단계인 설계, 구현, 테스트 단계에서 사용,워크플로우(Workflow)나 네비게이션(Navigation)..