분류 전체보기 13

디자인 시스템 ( Design System )

디자인 시스템은 조직 내 다양한 제품과 서비스에 걸쳐 일관성 있는 사용자 경험을 제공하기 위해 디자인 요소와 패턴을 표준화한 포괄적인 가이드라인 세트입니다. 이는 디자인과 개발 작업의 효율성을 높이고, 브랜드 일관성을 유지하는 데 중요한 역할을 합니다. 디자인 시스템은 디지털 제품의 설계와 구현에 적용되며, UI 컴포넌트, 디자인 패턴, 스타일 가이드라인, 사용 가능한 툴킷, 코드 스니펫 등을 포함합니다.디자인 시스템의 주요 구성 요소스타일 가이드색상 팔레트: 브랜드와 제품의 기본 색상, 보조 색상, 강조 색상 등을 정의합니다.타이포그래피: 사용할 글꼴, 텍스트 크기, 라인 높이 등의 타이포그래피 규칙을 설정합니다.아이콘과 이미지: 아이콘 스타일, 이미지 사용 지침 등을 포함합니다.UI 컴포넌트버튼, 입..

Abstract Concept 2024.05.13

Single Source of Truth ( SSOT )

Single Source of Truth (SSOT)는 데이터 관리 원칙 중 하나로, 모든 데이터 요소가 하나의 참조 소스를 가져야 한다는 개념을 의미합니다.이 원칙은 정보의 일관성, 정확성, 효율성을 유지하기 위해 중요합니다.SSOT을 통해 조직은 데이터 중복을 최소화하고, 데이터의 정확성을 향상시키며, 정보 관리의 복잡성을 줄일 수 있습니다.모든 데이터에 대해 하나의 출처를 사용한다는 개념모든 데이터가 하나의 출처를 사용한다는 개념이 모호할 수 있는데 조금 더 나의 생각을 붙여본다면 프로그램에서 발생되는 모든 컴포넌트나 인스턴스들을 파라미터로 데이터를 받게 된다.이때 받게 되는게 데이터가 변형되어서 들어오기도 하지만 결국 같은 소스의 데이터를 변형시켜서 들어오는 것이다.그리고 이런 데이터의 전달은 하..

Abstract Concept 2024.05.13

개발자 관점에서 바라본 디자인 토큰과 배리어블

모든 ui요소의 기본 구성요소로 하드코딩된 값 대신 디자인 토큰을 사용 구글 머티리얼 디자인디자인 토큰에 대해서 공부하다보니 구글 머티리얼이나 다른 디자인 소스에서 해당 디자인에 대한 철학이 아니라 전반적인 디자인 시스템에 대한 일반적인 철학도 많이 있어서 정리하면 좋을듯하여 정리!머티리얼 디자인에서 설명하는 디자인 토큰→ 머티리얼 디자인의 디자인 토큰은 크게 이름과 값 부분으로 구성된다.이름 (name) : 코드에서 나올 법한 이름을 가진다.ex ) md.ref.palette.secondary90 → 이름은 마침표로 구분되어 여러 부분으로 나뉠 수 있다해당 이름과 관련된 값!ex) #E8DEF8 → 해당 이름에 대응되는 값으로 특정 색상을 나타내는 hex코드가 대표적인 예이다.디자인 패턴의 관점으로 디..

FRONTEND/figma 2024.05.13

PS 튜토리얼 2부 2편

하! 정말 오랜만에 포스팅을 하게 됐습니다 ㅠ 그동안 준비해야하는 것들이 많아서 시간이 안 났었어요! 하지만 시간이 없다는 건 핑계! 라는건 진! 리! 아니겠습니까?? :) 아무튼! 오늘의 포스팅을 시작해보겠습니다! 이번 주제는 2부 프로그래밍 언어! 2편인데요. 1편에서는 주로 어떤 언어들을 사용하며 각 언어들의 특징들은 간단히 정리해보았어요. 이번 2편에서는 이제 우리가 프로그래밍 언어를 공부함에 있어서 무엇을 공부해야 하는지에 앞서 왜! Problem Solving(이하 PS)를 공부해야 하는지를 말씀드리도록! 하겠습니다. 만약, 프로그래밍 언어를 처음 공부하시거나 프로그램을 처음 공부하시는 분들은 아마 많이들 혼란스러워하실 거예요. 도대체 뭘 공부해야 하는 거냐? C언어? 포인터? 뭔데?? for..

백준 > Python3 > 2909번 : 캔디 구매

휴~ 정말 오랜만에 포스팅을 하게됬네요. 학생 신분으로 이것저것 하고 있고 개인적으로 작업이 들어와서 작업을 했는데. 견적 내는게 보통일이 아니네요. 쉬울줄 알고 막상 시작했는데 하면할수록 저너머 우주로....;; 아무튼 오늘은 ! 캔디구매라는 문제를 풀어보겠습니다. 이 문제의 경우는 굉장히 간단한 문제이죠?? 반올림 문제!! 그냥 문제를 보셔도 아실거에요. 하지만 파이썬으로 푸신다면 조금 고생하실 수도 있어요. 반올림에는 여러가지가 있지만 파이썬에서는 우리가 일상적으로 사용하는 human arithmetic방식이 아닌 binary arithmetic 방식을 사용해요. 정확히는 round to the nearest: tiest to even인데요!! 일반적으로 4사5입으로 4는 버리고 5는 올려주는 방식..

백준 > Python3 > 9070번 : 장보기

이번에 풀어볼 문제는 장보기라는 문제입니다. 순서대로 정렬하는 문제라고 볼 수 있는데요.여기서는 정렬의 기준이 2개가 주어지는데 순차적으로 기준이 사용되는 케이스에요.다른 분들은 어떻게 푸는지 잘모르겠지만 저같은 경우는 weight(가중치)를 부여해서정렬할때 사용하는 값을 만들어서 정렬을 시켜요. 여기서는 sorted를 사용하니이 가중치 적용과 sorted함수가 포인트겠네요. 문제평소 맛살을 즐겨 먹는 혜선은 맛살을 구입하러 2-마트에 갔다. 식품코너에서 맛살을 고르면서 혜선은 고민이 되기 시작했다. 여러 업체에서 나온 맛살들이 들어있는 개수도 다르고 가격도 다르기 때문에 어떤 것을 사야 싼 가격에 많이 먹을 수 있을지 생각해야 했기 때문이다. 혜선은 현명하게도 각 맛살에 써진 중량(g)과 가격(원)을 ..

PS 튜토리얼 2부 1편

안녕하세요. 오늘은 튜토리얼 2부(1)입니다.제가 곰곰히 생각을 해봤는데요.일단 튜토리얼은 크게 3부분으로 나누려고 합니다. 첫번째는 언어와 관련된 부분두번째는 problem solving의 문제들이 어떻게 구성되고어떤 결과들이 나오는지에 대해서이고마지막은 우리가 초반에 어떤 문제들을 풀어나가야 하는가에 대한 부분으로나눌까하네요. 막상 모두 알고나면 정말 아무것도 아닌데아무도 알려주지 않고 알아내려해도 힘겹게힘겹게 찾아야하는 것들이에요. 저만 그런건지는 모르겠는데아무튼 많은 분들이 힘들어 하시는 것 같았으니이렇게 글을 적어놓더라도 쓸모가 없진 않겠죠??^^ 일단은 오늘은 프로그래밍 언어에 관련해서 적어보겠습니다. 처음 프로그래밍을 시작하시는 분들은 어떤 언어를 선택하느냐도되게 갈팡질팡하시고 또 막상 선택..

백준 > Python3 > 7513번 : 준살 프로그래밍 대회

이번 포스팅은 준살 프로그래밍 대회라는 문제군요! 문제를 풀다가 느꼈는데 네가 막 쓰고있는 신택스/문법들이 초보자분들에게는 어색하게 느껴질 수 있다고 느껴서 쉬운버젼과 제가 잘 쓰는 문법버젼으로 둘 다 적어야겠다고 생각했습니다. 아마도 파이썬 신택스/문법에 관한 섹션을 따로 만들어야할 것 같기도 하네요. 그럼 시작해보도록 하겠습니다^^ 문제 준규는 해빈이의 위대함을 전세계에 알리기위해서 프로그래밍 대회를 개최하려고 한다. 대회를 준비하던 중, 잠시 페이스북에서 Poke에 집중하느라 참가 신청을 구현하지 못했다. 대회에 참가하는 사람들은 모두 아이디와 비밀번호를 이용해 시스템에 로그인해야 한다. 참가 신청을 구현하지 않았기 때문에, 모든 사람들의 아이디는 "userN" 형식이다. 비밀번호는 사람들이 추측할..

Problem Solving 튜토리얼을 시작해보려 합니다.

안녕하세요! 프로그래밍을 어떻게 시작할지 막막하신분들이나 Problem Solving 혹은 알고리즘에 관심이 있는데 막상해보려는데 막막하신분들! 모두 읽으시면 좋을만한 포스팅을 해보려고 합니다. 제가 컴퓨터를 좋아해서 어릴때부터 프로그래밍을 조금씩 공부하면서 이것저것하고 그러면서 큰 전환점이 몇번 있었는데 그 중에 가장 큰 전환점이 이 Problem Solving을 접한때였어요. 어릴때는 마냥 신기해서 웹사이트를 만들면서 코드를 이것저것 붙이면서 동작시켜보기도 하고 게임을 보면서 나도 만들어보면서 와! 나도 만들어보고싶다!! 라고 생각하기도 했어요. 그래서 프로그래밍 책이나 알고리즘책을 사서 보곤했어요. 결과는??? 고냥 책받침으로 갔었죠 ㅠㅠ 그러다가 대학교에 진학하게 됬고 좋아한다고 생각하던 컴퓨터공..

백준 > Python3 > 5675번 : 시침과 분침

오늘의 포스팅은 5675번으로 시침과 분침 문제를 풀어보겠습니다. 이번 문제에서는 3가지 풀이를 만들어보겠습니다. 먼저, 직관적으로 푸는 방법이고. 두번째는 1번 풀이를 이용해서 실행시간을 단축시키는 방법을 이용한 풀이이고 마지막은 조금 다른 관점으로 풀어서 숏코딩을 위한 테크닉을 적용시켜보겠습니다!! 문제 상근이 방에 걸려있는 시계는 완벽한 원 모양이다. 시계에는 시침과 분침이 원의 중심을 기준으로 돌아가고 있다. 시침은 시를 나타내고, 분침은 분을 나타낸다. 시계에는 60개의 눈금이 지름을 따라서 표시되어 있다. 눈금과 눈금 사이의 거리는 모두 같다. 분침은 1분에 한 번씩 다음 눈금으로 이동한다. 시침은 12분에 한 번식 다음 눈금으로 이동한다. 즉, 1시간이 지나면 다섯 눈금을 이동하게 된다. 이..